From 7f917989196058314ce20b72fcbe1a5792978402 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Fri, 13 Jun 2025 14:45:54 +0300
Subject: [PATCH 1/9] upgrade example-latest to react-native 0.80

---
 .../java/com/examplelatest/MainApplication.kt |   10 +-
 ExampleLatest/android/build.gradle            |    2 +-
 .../android/gradle/wrapper/gradle-wrapper.jar |  Bin 43705 -> 43764 bytes
 .../gradle/wrapper/gradle-wrapper.properties  |    2 +-
 ExampleLatest/android/gradlew                 |    4 +-
 ExampleLatest/android/gradlew.bat             |    9 +-
 ExampleLatest/ios/ExampleLatest/Info.plist    |   22 +-
 ExampleLatest/ios/Podfile.lock                | 1508 +++++++++++------
 ExampleLatest/package-lock.json               |  726 ++++----
 ExampleLatest/package.json                    |   28 +-
 ExampleLatest/tsconfig.json                   |    2 +-
 ExamplesShared/components/colorPickerStyle.ts |    2 +-
 12 files changed, 1407 insertions(+), 908 deletions(-)

diff --git a/ExampleLatest/android/app/src/main/java/com/examplelatest/MainApplication.kt b/ExampleLatest/android/app/src/main/java/com/examplelatest/MainApplication.kt
index 04e088b..592ad66 100755
--- a/ExampleLatest/android/app/src/main/java/com/examplelatest/MainApplication.kt
+++ b/ExampleLatest/android/app/src/main/java/com/examplelatest/MainApplication.kt
@@ -5,14 +5,12 @@ import com.nativeSplashScreen.NativeSplashScreenPackage
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
 import com.facebook.react.ReactNativeHost
 import com.facebook.react.ReactPackage
 import com.facebook.react.common.assets.ReactFontManager
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.soloader.OpenSourceMergedSoMapping
-import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
 
@@ -38,13 +36,9 @@ class MainApplication : Application(), ReactApplication {
 
     override fun onCreate() {
         super.onCreate()
-        SoLoader.init(this, OpenSourceMergedSoMapping)
         ReactFontManager.getInstance().addCustomFont(
             this, "Quicksand", R.font.quicksand
         )
-        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-            // If you opted-in for the New Architecture, we load the native entry point for this app.
-            load()
-        }
+        loadReactNative(this)
     }
 }
diff --git a/ExampleLatest/android/build.gradle b/ExampleLatest/android/build.gradle
index 9766946..b4f3ad9 100755
--- a/ExampleLatest/android/build.gradle
+++ b/ExampleLatest/android/build.gradle
@@ -5,7 +5,7 @@ buildscript {
         compileSdkVersion = 35
         targetSdkVersion = 35
         ndkVersion = "27.1.12297006"
-        kotlinVersion = "2.0.21"
+        kotlinVersion = "2.1.20"
     }
     repositories {
         google()
diff --git a/ExampleLatest/android/gradle/wrapper/gradle-wrapper.jar b/ExampleLatest/android/gradle/wrapper/gradle-wrapper.jar
index 9bbc975c742b298b441bfb90dbc124400a3751b9..1b33c55baabb587c669f562ae36f953de2481846 100644
GIT binary patch
delta 642
zcmdmamFde>rVZJA^}0Q$xegf!xPEW^+5YDM%iT2bEgct9o+jH~+sJas#HZ=szO|**
z=Pj=X_vx?W&DSwKck|WWn~hffsvnQ+42*W$b7b0$SCcOoZ`{W{^$^pk;4>8-A*-)$
z?n(Po`1$6Jn_u?t-L+tsPyZ2#X}8T6OS8pAU;kdgd+_Hw4z4TW0p9E!T+=f7-c&O%
zFic^X{7^$?^Ho04eona9<j-?s7{5&pn3vAfATT*_p3LN00ny11Rtil1HBXAkTNo_F
zzkq$Rzpyk|IAy*RlYkgpSVT+(EPNd(yipP=9LB_`2v^ayz>n#mGMxKhA=~8B%JN`M
zMhm5wc-2v)$``sY$!Q`9xiU@DhI73ZxiGEKg>yIPs)NmWwMdF-ngLXpZSqV5ez36n
zVkxF2rjrjWR+_xr6e6@_u@s~2<o%12m_J)HOm?uBn*82c8LYT)i4=33JxI(O%zp{w
z$2u}hws-UZ^W&CEF->uv{9vi*<o>1pj2)BjFD+-%@&pRVP1f{O1glxTOp2-62Ph;v
z`N1+vCd)9ea)af*Ol1*JCfnp$%Uu}%OuoN7g2}3C@`L5FlP#(sA=|h@iixuZC?qp^
z=L$=v$ZoI}|87Wh=&h7udff{aieKr*l+zDp?pf)_bbRvUf>kn;HCDMXNlgbbo!QRK
I1x7am0No)LiU0rr

delta 584
zcmexzm1*ZyrVZJAexH5Moc8h7)w{^+t*dqJ%=yhh23L$9JpFV=_k`zJ-?Q4DI*eSe
z+ES)HSrVnWLtJ&)lO<X$;;LdIOT<1FeJo;R2=Hd-$lYjX>%hRkV9zl5qqWRt0e;bb
zPPo`)y?HTAyZI&u&X<|2$FDHCf4;!v8}p=?Tm`^F0`u(|1ttf~&t$qP3KUSD>@TJQ
zRwJ}Pim6NzEc8KA6)e;S6gs8=7IIL8sQL*MYEuRYO;Uj<%3UbMbV&^&!Zvx+LKmjT
z8Zch6rYP7Tw?$Hn(UTJwWiS=$f{lB(C=e*%usDV})0AQIK~sat=ND@+Gg*Pyij!rR
z*fa02W|%BsV++>4W{DKDGSIUEHd2$P+8ct!RF+CHDowUuTEZOZ%rJSQv*qOXOSPDN
zT|sP-$p*_3ncsWB*qoD7JQcyZ9xan%cJP6Tb4-?AZpr*F6v98hoNaPJm@HV`yya5N
z))6pqFXn@}P(3T0nEzM8*c_9KtE9o|_pFd&K35GBXP^9Kg(b6GH-z8S4GDzIl~T+b
zdLd#meKKHu$5u))8cu$=GKINkGDPOUD)!0$C(BH(U!}!-e;Q0ok8Sc?V1zRO04>ts
AA^-pY

diff --git a/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties b/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties
index 37f853b..002b867 100755
--- a/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties
+++ b/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/ExampleLatest/android/gradlew b/ExampleLatest/android/gradlew
index faf9300..23d15a9 100755
--- a/ExampleLatest/android/gradlew
+++ b/ExampleLatest/android/gradlew
@@ -114,7 +114,7 @@ case "$( uname )" in                #(
   NONSTOP* )        nonstop=true ;;
 esac
 
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+CLASSPATH="\\\"\\\""
 
 
 # Determine the Java command to use to start the JVM.
@@ -213,7 +213,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
         -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
         "$@"
 
 # Stop when "xargs" is not available.
diff --git a/ExampleLatest/android/gradlew.bat b/ExampleLatest/android/gradlew.bat
index 9b42019..11bf182 100755
--- a/ExampleLatest/android/gradlew.bat
+++ b/ExampleLatest/android/gradlew.bat
@@ -1,3 +1,8 @@
+@REM Copyright (c) Meta Platforms, Inc. and affiliates.
+@REM
+@REM This source code is licensed under the MIT license found in the
+@REM LICENSE file in the root directory of this source tree.
+
 @rem
 @rem Copyright 2015 the original author or authors.
 @rem
@@ -70,11 +75,11 @@ goto fail
 :execute
 @rem Setup the command line
 
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+set CLASSPATH=
 
 
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
 
 :end
 @rem End local scope for the variables with windows NT shell
diff --git a/ExampleLatest/ios/ExampleLatest/Info.plist b/ExampleLatest/ios/ExampleLatest/Info.plist
index 2d215f2..40dd5c4 100755
--- a/ExampleLatest/ios/ExampleLatest/Info.plist
+++ b/ExampleLatest/ios/ExampleLatest/Info.plist
@@ -32,7 +32,18 @@
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
+	<key>RCTNewArchEnabled</key>
+	<true/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>BungeeSpice-Regular.ttf</string>
+		<string>Quicksand-Bold.ttf</string>
+		<string>Quicksand-Light.ttf</string>
+		<string>Quicksand-Medium.ttf</string>
+		<string>Quicksand-Regular.ttf</string>
+		<string>Quicksand-SemiBold.ttf</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -47,14 +58,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>UIAppFonts</key>
-	<array>
-		<string>BungeeSpice-Regular.ttf</string>
-		<string>Quicksand-Bold.ttf</string>
-		<string>Quicksand-Light.ttf</string>
-		<string>Quicksand-Medium.ttf</string>
-		<string>Quicksand-Regular.ttf</string>
-		<string>Quicksand-SemiBold.ttf</string>
-	</array>
 </dict>
 </plist>
diff --git a/ExampleLatest/ios/Podfile.lock b/ExampleLatest/ios/Podfile.lock
index 639ec92..a03967e 100644
--- a/ExampleLatest/ios/Podfile.lock
+++ b/ExampleLatest/ios/Podfile.lock
@@ -1,74 +1,85 @@
 PODS:
   - boost (1.84.0)
   - DoubleConversion (1.1.6)
-  - fast_float (6.1.4)
-  - FBLazyVector (0.79.3)
+  - fast_float (8.0.0)
+  - FBLazyVector (0.80.0)
   - fmt (11.0.2)
   - glog (0.3.5)
-  - hermes-engine (0.79.3):
-    - hermes-engine/Pre-built (= 0.79.3)
-  - hermes-engine/Pre-built (0.79.3)
+  - hermes-engine (0.80.0):
+    - hermes-engine/Pre-built (= 0.80.0)
+  - hermes-engine/Pre-built (0.80.0)
   - RCT-Folly (2024.11.18.00):
     - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
+    - fast_float (= 8.0.0)
     - fmt (= 11.0.2)
     - glog
     - RCT-Folly/Default (= 2024.11.18.00)
   - RCT-Folly/Default (2024.11.18.00):
     - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
+    - fast_float (= 8.0.0)
     - fmt (= 11.0.2)
     - glog
   - RCT-Folly/Fabric (2024.11.18.00):
     - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
+    - fast_float (= 8.0.0)
     - fmt (= 11.0.2)
     - glog
-  - RCTDeprecation (0.79.3)
-  - RCTRequired (0.79.3)
-  - RCTTypeSafety (0.79.3):
-    - FBLazyVector (= 0.79.3)
-    - RCTRequired (= 0.79.3)
-    - React-Core (= 0.79.3)
-  - React (0.79.3):
-    - React-Core (= 0.79.3)
-    - React-Core/DevSupport (= 0.79.3)
-    - React-Core/RCTWebSocket (= 0.79.3)
-    - React-RCTActionSheet (= 0.79.3)
-    - React-RCTAnimation (= 0.79.3)
-    - React-RCTBlob (= 0.79.3)
-    - React-RCTImage (= 0.79.3)
-    - React-RCTLinking (= 0.79.3)
-    - React-RCTNetwork (= 0.79.3)
-    - React-RCTSettings (= 0.79.3)
-    - React-RCTText (= 0.79.3)
-    - React-RCTVibration (= 0.79.3)
-  - React-callinvoker (0.79.3)
-  - React-Core (0.79.3):
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+  - RCTDeprecation (0.80.0)
+  - RCTRequired (0.80.0)
+  - RCTTypeSafety (0.80.0):
+    - FBLazyVector (= 0.80.0)
+    - RCTRequired (= 0.80.0)
+    - React-Core (= 0.80.0)
+  - React (0.80.0):
+    - React-Core (= 0.80.0)
+    - React-Core/DevSupport (= 0.80.0)
+    - React-Core/RCTWebSocket (= 0.80.0)
+    - React-RCTActionSheet (= 0.80.0)
+    - React-RCTAnimation (= 0.80.0)
+    - React-RCTBlob (= 0.80.0)
+    - React-RCTImage (= 0.80.0)
+    - React-RCTLinking (= 0.80.0)
+    - React-RCTNetwork (= 0.80.0)
+    - React-RCTSettings (= 0.80.0)
+    - React-RCTText (= 0.80.0)
+    - React-RCTVibration (= 0.80.0)
+  - React-callinvoker (0.80.0)
+  - React-Core (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
-    - React-Core/Default (= 0.79.3)
+    - React-Core/Default (= 0.80.0)
     - React-cxxreact
     - React-featureflags
     - React-hermes
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/CoreModulesHeaders (0.79.3):
+  - React-Core/CoreModulesHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -77,16 +88,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/Default (0.79.3):
+  - React-Core/Default (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-cxxreact
     - React-featureflags
@@ -94,35 +111,47 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/DevSupport (0.79.3):
+  - React-Core/DevSupport (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
-    - React-Core/Default (= 0.79.3)
-    - React-Core/RCTWebSocket (= 0.79.3)
+    - React-Core/Default (= 0.80.0)
+    - React-Core/RCTWebSocket (= 0.80.0)
     - React-cxxreact
     - React-featureflags
     - React-hermes
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTActionSheetHeaders (0.79.3):
+  - React-Core/RCTActionSheetHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -131,16 +160,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTAnimationHeaders (0.79.3):
+  - React-Core/RCTAnimationHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -149,16 +184,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTBlobHeaders (0.79.3):
+  - React-Core/RCTBlobHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -167,16 +208,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTImageHeaders (0.79.3):
+  - React-Core/RCTImageHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -185,16 +232,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTLinkingHeaders (0.79.3):
+  - React-Core/RCTLinkingHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -203,16 +256,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTNetworkHeaders (0.79.3):
+  - React-Core/RCTNetworkHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -221,16 +280,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTSettingsHeaders (0.79.3):
+  - React-Core/RCTSettingsHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -239,16 +304,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTTextHeaders (0.79.3):
+  - React-Core/RCTTextHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -257,16 +328,22 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTVibrationHeaders (0.79.3):
+  - React-Core/RCTVibrationHeaders (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
     - React-Core/Default
     - React-cxxreact
@@ -275,67 +352,87 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-Core/RCTWebSocket (0.79.3):
+  - React-Core/RCTWebSocket (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTDeprecation
-    - React-Core/Default (= 0.79.3)
+    - React-Core/Default (= 0.80.0)
     - React-cxxreact
     - React-featureflags
     - React-hermes
     - React-jsi
     - React-jsiexecutor
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsitooling
     - React-perflogger
     - React-runtimescheduler
     - React-utils
-    - SocketRocket (= 0.7.1)
+    - SocketRocket
     - Yoga
-  - React-CoreModules (0.79.3):
+  - React-CoreModules (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTTypeSafety (= 0.79.3)
-    - React-Core/CoreModulesHeaders (= 0.79.3)
-    - React-jsi (= 0.79.3)
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTTypeSafety (= 0.80.0)
+    - React-Core/CoreModulesHeaders (= 0.80.0)
+    - React-jsi (= 0.80.0)
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsinspectortracing
     - React-NativeModulesApple
     - React-RCTBlob
     - React-RCTFBReactNativeSpec
-    - React-RCTImage (= 0.79.3)
+    - React-RCTImage (= 0.80.0)
     - ReactCommon
-    - SocketRocket (= 0.7.1)
-  - React-cxxreact (0.79.3):
+    - SocketRocket
+  - React-cxxreact (0.80.0):
     - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - React-callinvoker (= 0.79.3)
-    - React-debug (= 0.79.3)
-    - React-jsi (= 0.79.3)
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-callinvoker (= 0.80.0)
+    - React-debug (= 0.80.0)
+    - React-jsi (= 0.80.0)
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsinspectortracing
-    - React-logger (= 0.79.3)
-    - React-perflogger (= 0.79.3)
-    - React-runtimeexecutor (= 0.79.3)
-    - React-timing (= 0.79.3)
-  - React-debug (0.79.3)
-  - React-defaultsnativemodule (0.79.3):
+    - React-logger (= 0.80.0)
+    - React-perflogger (= 0.80.0)
+    - React-runtimeexecutor (= 0.80.0)
+    - React-timing (= 0.80.0)
+    - SocketRocket
+  - React-debug (0.80.0)
+  - React-defaultsnativemodule (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - React-domnativemodule
     - React-featureflagsnativemodule
     - React-hermes
@@ -344,9 +441,16 @@ PODS:
     - React-jsiexecutor
     - React-microtasksnativemodule
     - React-RCTFBReactNativeSpec
-  - React-domnativemodule (0.79.3):
+    - SocketRocket
+  - React-domnativemodule (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - React-Fabric
     - React-FabricComponents
     - React-graphics
@@ -355,35 +459,38 @@ PODS:
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-Fabric (0.79.3):
+  - React-Fabric (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
     - React-cxxreact
     - React-debug
-    - React-Fabric/animations (= 0.79.3)
-    - React-Fabric/attributedstring (= 0.79.3)
-    - React-Fabric/componentregistry (= 0.79.3)
-    - React-Fabric/componentregistrynative (= 0.79.3)
-    - React-Fabric/components (= 0.79.3)
-    - React-Fabric/consistency (= 0.79.3)
-    - React-Fabric/core (= 0.79.3)
-    - React-Fabric/dom (= 0.79.3)
-    - React-Fabric/imagemanager (= 0.79.3)
-    - React-Fabric/leakchecker (= 0.79.3)
-    - React-Fabric/mounting (= 0.79.3)
-    - React-Fabric/observers (= 0.79.3)
-    - React-Fabric/scheduler (= 0.79.3)
-    - React-Fabric/telemetry (= 0.79.3)
-    - React-Fabric/templateprocessor (= 0.79.3)
-    - React-Fabric/uimanager (= 0.79.3)
+    - React-Fabric/animations (= 0.80.0)
+    - React-Fabric/attributedstring (= 0.80.0)
+    - React-Fabric/componentregistry (= 0.80.0)
+    - React-Fabric/componentregistrynative (= 0.80.0)
+    - React-Fabric/components (= 0.80.0)
+    - React-Fabric/consistency (= 0.80.0)
+    - React-Fabric/core (= 0.80.0)
+    - React-Fabric/dom (= 0.80.0)
+    - React-Fabric/imagemanager (= 0.80.0)
+    - React-Fabric/leakchecker (= 0.80.0)
+    - React-Fabric/mounting (= 0.80.0)
+    - React-Fabric/observers (= 0.80.0)
+    - React-Fabric/scheduler (= 0.80.0)
+    - React-Fabric/telemetry (= 0.80.0)
+    - React-Fabric/templateprocessor (= 0.80.0)
+    - React-Fabric/uimanager (= 0.80.0)
     - React-featureflags
     - React-graphics
     - React-hermes
@@ -394,13 +501,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/animations (0.79.3):
+    - SocketRocket
+  - React-Fabric/animations (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -416,13 +526,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/attributedstring (0.79.3):
+    - SocketRocket
+  - React-Fabric/attributedstring (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -438,13 +551,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/componentregistry (0.79.3):
+    - SocketRocket
+  - React-Fabric/componentregistry (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -460,13 +576,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/componentregistrynative (0.79.3):
+    - SocketRocket
+  - React-Fabric/componentregistrynative (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -482,22 +601,25 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/components (0.79.3):
+    - SocketRocket
+  - React-Fabric/components (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
     - React-cxxreact
     - React-debug
-    - React-Fabric/components/legacyviewmanagerinterop (= 0.79.3)
-    - React-Fabric/components/root (= 0.79.3)
-    - React-Fabric/components/scrollview (= 0.79.3)
-    - React-Fabric/components/view (= 0.79.3)
+    - React-Fabric/components/legacyviewmanagerinterop (= 0.80.0)
+    - React-Fabric/components/root (= 0.80.0)
+    - React-Fabric/components/scrollview (= 0.80.0)
+    - React-Fabric/components/view (= 0.80.0)
     - React-featureflags
     - React-graphics
     - React-hermes
@@ -508,13 +630,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/components/legacyviewmanagerinterop (0.79.3):
+    - SocketRocket
+  - React-Fabric/components/legacyviewmanagerinterop (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -530,13 +655,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/components/root (0.79.3):
+    - SocketRocket
+  - React-Fabric/components/root (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -552,13 +680,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/components/scrollview (0.79.3):
+    - SocketRocket
+  - React-Fabric/components/scrollview (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -574,13 +705,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/components/view (0.79.3):
+    - SocketRocket
+  - React-Fabric/components/view (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -597,14 +731,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-Fabric/consistency (0.79.3):
+  - React-Fabric/consistency (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -620,13 +757,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/core (0.79.3):
+    - SocketRocket
+  - React-Fabric/core (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -642,13 +782,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/dom (0.79.3):
+    - SocketRocket
+  - React-Fabric/dom (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -664,13 +807,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/imagemanager (0.79.3):
+    - SocketRocket
+  - React-Fabric/imagemanager (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -686,13 +832,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/leakchecker (0.79.3):
+    - SocketRocket
+  - React-Fabric/leakchecker (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -708,13 +857,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/mounting (0.79.3):
+    - SocketRocket
+  - React-Fabric/mounting (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -730,19 +882,22 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/observers (0.79.3):
+    - SocketRocket
+  - React-Fabric/observers (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
     - React-cxxreact
     - React-debug
-    - React-Fabric/observers/events (= 0.79.3)
+    - React-Fabric/observers/events (= 0.80.0)
     - React-featureflags
     - React-graphics
     - React-hermes
@@ -753,13 +908,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/observers/events (0.79.3):
+    - SocketRocket
+  - React-Fabric/observers/events (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -775,13 +933,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/scheduler (0.79.3):
+    - SocketRocket
+  - React-Fabric/scheduler (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -799,13 +960,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/telemetry (0.79.3):
+    - SocketRocket
+  - React-Fabric/telemetry (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -821,13 +985,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/templateprocessor (0.79.3):
+    - SocketRocket
+  - React-Fabric/templateprocessor (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -843,19 +1010,22 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/uimanager (0.79.3):
+    - SocketRocket
+  - React-Fabric/uimanager (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
     - React-cxxreact
     - React-debug
-    - React-Fabric/uimanager/consistency (= 0.79.3)
+    - React-Fabric/uimanager/consistency (= 0.80.0)
     - React-featureflags
     - React-graphics
     - React-hermes
@@ -867,13 +1037,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-Fabric/uimanager/consistency (0.79.3):
+    - SocketRocket
+  - React-Fabric/uimanager/consistency (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -890,21 +1063,24 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-  - React-FabricComponents (0.79.3):
+    - SocketRocket
+  - React-FabricComponents (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
     - React-cxxreact
     - React-debug
     - React-Fabric
-    - React-FabricComponents/components (= 0.79.3)
-    - React-FabricComponents/textlayoutmanager (= 0.79.3)
+    - React-FabricComponents/components (= 0.80.0)
+    - React-FabricComponents/textlayoutmanager (= 0.80.0)
     - React-featureflags
     - React-graphics
     - React-hermes
@@ -915,29 +1091,32 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components (0.79.3):
+  - React-FabricComponents/components (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
     - React-cxxreact
     - React-debug
     - React-Fabric
-    - React-FabricComponents/components/inputaccessory (= 0.79.3)
-    - React-FabricComponents/components/iostextinput (= 0.79.3)
-    - React-FabricComponents/components/modal (= 0.79.3)
-    - React-FabricComponents/components/rncore (= 0.79.3)
-    - React-FabricComponents/components/safeareaview (= 0.79.3)
-    - React-FabricComponents/components/scrollview (= 0.79.3)
-    - React-FabricComponents/components/text (= 0.79.3)
-    - React-FabricComponents/components/textinput (= 0.79.3)
-    - React-FabricComponents/components/unimplementedview (= 0.79.3)
+    - React-FabricComponents/components/inputaccessory (= 0.80.0)
+    - React-FabricComponents/components/iostextinput (= 0.80.0)
+    - React-FabricComponents/components/modal (= 0.80.0)
+    - React-FabricComponents/components/rncore (= 0.80.0)
+    - React-FabricComponents/components/safeareaview (= 0.80.0)
+    - React-FabricComponents/components/scrollview (= 0.80.0)
+    - React-FabricComponents/components/text (= 0.80.0)
+    - React-FabricComponents/components/textinput (= 0.80.0)
+    - React-FabricComponents/components/unimplementedview (= 0.80.0)
     - React-featureflags
     - React-graphics
     - React-hermes
@@ -948,14 +1127,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/inputaccessory (0.79.3):
+  - React-FabricComponents/components/inputaccessory (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -972,14 +1154,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/iostextinput (0.79.3):
+  - React-FabricComponents/components/iostextinput (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -996,14 +1181,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/modal (0.79.3):
+  - React-FabricComponents/components/modal (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1020,14 +1208,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/rncore (0.79.3):
+  - React-FabricComponents/components/rncore (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1044,14 +1235,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/safeareaview (0.79.3):
+  - React-FabricComponents/components/safeareaview (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1068,14 +1262,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/scrollview (0.79.3):
+  - React-FabricComponents/components/scrollview (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1092,14 +1289,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/text (0.79.3):
+  - React-FabricComponents/components/text (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1116,14 +1316,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/textinput (0.79.3):
+  - React-FabricComponents/components/textinput (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1140,14 +1343,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/components/unimplementedview (0.79.3):
+  - React-FabricComponents/components/unimplementedview (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1164,14 +1370,17 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricComponents/textlayoutmanager (0.79.3):
+  - React-FabricComponents/textlayoutmanager (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1188,76 +1397,112 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - React-FabricImage (0.79.3):
+  - React-FabricImage (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
-    - RCTRequired (= 0.79.3)
-    - RCTTypeSafety (= 0.79.3)
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired (= 0.80.0)
+    - RCTTypeSafety (= 0.80.0)
     - React-Fabric
     - React-featureflags
     - React-graphics
     - React-hermes
     - React-ImageManager
     - React-jsi
-    - React-jsiexecutor (= 0.79.3)
+    - React-jsiexecutor (= 0.80.0)
     - React-logger
     - React-rendererdebug
     - React-utils
     - ReactCommon
+    - SocketRocket
     - Yoga
-  - React-featureflags (0.79.3):
-    - RCT-Folly (= 2024.11.18.00)
-  - React-featureflagsnativemodule (0.79.3):
+  - React-featureflags (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - SocketRocket
+  - React-featureflagsnativemodule (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - React-featureflags
     - React-hermes
     - React-jsi
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-  - React-graphics (0.79.3):
+    - SocketRocket
+  - React-graphics (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-hermes
     - React-jsi
     - React-jsiexecutor
     - React-utils
-  - React-hermes (0.79.3):
+    - SocketRocket
+  - React-hermes (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - React-cxxreact (= 0.79.3)
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-cxxreact (= 0.80.0)
     - React-jsi
-    - React-jsiexecutor (= 0.79.3)
+    - React-jsiexecutor (= 0.80.0)
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsinspectortracing
-    - React-perflogger (= 0.79.3)
+    - React-perflogger (= 0.80.0)
     - React-runtimeexecutor
-  - React-idlecallbacksnativemodule (0.79.3):
+    - SocketRocket
+  - React-idlecallbacksnativemodule (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - React-hermes
     - React-jsi
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - React-runtimescheduler
     - ReactCommon/turbomodule/core
-  - React-ImageManager (0.79.3):
+    - SocketRocket
+  - React-ImageManager (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
+    - RCT-Folly
     - RCT-Folly/Fabric
     - React-Core/Default
     - React-debug
@@ -1265,76 +1510,153 @@ PODS:
     - React-graphics
     - React-rendererdebug
     - React-utils
-  - React-jserrorhandler (0.79.3):
+    - SocketRocket
+  - React-jserrorhandler (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-cxxreact
     - React-debug
     - React-featureflags
     - React-jsi
     - ReactCommon/turbomodule/bridging
-  - React-jsi (0.79.3):
+    - SocketRocket
+  - React-jsi (0.80.0):
     - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-  - React-jsiexecutor (0.79.3):
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - SocketRocket
+  - React-jsiexecutor (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - React-cxxreact (= 0.79.3)
-    - React-jsi (= 0.79.3)
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-cxxreact (= 0.80.0)
+    - React-jsi (= 0.80.0)
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsinspectortracing
-    - React-perflogger (= 0.79.3)
-  - React-jsinspector (0.79.3):
+    - React-perflogger (= 0.80.0)
+    - SocketRocket
+  - React-jsinspector (0.80.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - React-featureflags
     - React-jsi
+    - React-jsinspectorcdp
+    - React-jsinspectornetwork
     - React-jsinspectortracing
-    - React-perflogger (= 0.79.3)
-    - React-runtimeexecutor (= 0.79.3)
-  - React-jsinspectortracing (0.79.3):
+    - React-perflogger (= 0.80.0)
+    - React-runtimeexecutor (= 0.80.0)
+    - SocketRocket
+  - React-jsinspectorcdp (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - SocketRocket
+  - React-jsinspectornetwork (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-jsinspectorcdp
+    - SocketRocket
+  - React-jsinspectortracing (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - RCT-Folly
+    - RCT-Folly/Fabric
     - React-oscompat
-  - React-jsitooling (0.79.3):
+    - SocketRocket
+  - React-jsitooling (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
-    - RCT-Folly (= 2024.11.18.00)
-    - React-cxxreact (= 0.79.3)
-    - React-jsi (= 0.79.3)
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-cxxreact (= 0.80.0)
+    - React-jsi (= 0.80.0)
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsinspectortracing
-  - React-jsitracing (0.79.3):
+    - SocketRocket
+  - React-jsitracing (0.80.0):
     - React-jsi
-  - React-logger (0.79.3):
+  - React-logger (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
-  - React-Mapbuffer (0.79.3):
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - SocketRocket
+  - React-Mapbuffer (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-debug
-  - React-microtasksnativemodule (0.79.3):
+    - SocketRocket
+  - React-microtasksnativemodule (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - React-hermes
     - React-jsi
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-  - React-NativeModulesApple (0.79.3):
+    - SocketRocket
+  - React-NativeModulesApple (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-callinvoker
     - React-Core
     - React-cxxreact
@@ -1342,33 +1664,61 @@ PODS:
     - React-hermes
     - React-jsi
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-runtimeexecutor
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-  - React-oscompat (0.79.3)
-  - React-perflogger (0.79.3):
+    - SocketRocket
+  - React-oscompat (0.80.0)
+  - React-perflogger (0.80.0):
+    - boost
     - DoubleConversion
-    - RCT-Folly (= 2024.11.18.00)
-  - React-performancetimeline (0.79.3):
-    - RCT-Folly (= 2024.11.18.00)
-    - React-cxxreact
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - SocketRocket
+  - React-performancetimeline (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-featureflags
     - React-jsinspectortracing
     - React-perflogger
     - React-timing
-  - React-RCTActionSheet (0.79.3):
-    - React-Core/RCTActionSheetHeaders (= 0.79.3)
-  - React-RCTAnimation (0.79.3):
-    - RCT-Folly (= 2024.11.18.00)
+    - SocketRocket
+  - React-RCTActionSheet (0.80.0):
+    - React-Core/RCTActionSheetHeaders (= 0.80.0)
+  - React-RCTAnimation (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTTypeSafety
     - React-Core/RCTAnimationHeaders
+    - React-featureflags
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-  - React-RCTAppDelegate (0.79.3):
+    - SocketRocket
+  - React-RCTAppDelegate (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1392,24 +1742,35 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon
-  - React-RCTBlob (0.79.3):
+    - SocketRocket
+  - React-RCTBlob (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-Core/RCTBlobHeaders
     - React-Core/RCTWebSocket
     - React-jsi
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - React-RCTNetwork
     - ReactCommon
-  - React-RCTFabric (0.79.3):
+    - SocketRocket
+  - React-RCTFabric (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-Core
     - React-debug
     - React-Fabric
@@ -1421,6 +1782,8 @@ PODS:
     - React-ImageManager
     - React-jsi
     - React-jsinspector
+    - React-jsinspectorcdp
+    - React-jsinspectornetwork
     - React-jsinspectortracing
     - React-performancetimeline
     - React-RCTAnimation
@@ -1431,10 +1794,17 @@ PODS:
     - React-rendererdebug
     - React-runtimescheduler
     - React-utils
+    - SocketRocket
     - Yoga
-  - React-RCTFBReactNativeSpec (0.79.3):
+  - React-RCTFBReactNativeSpec (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1443,8 +1813,15 @@ PODS:
     - React-jsiexecutor
     - React-NativeModulesApple
     - ReactCommon
-  - React-RCTImage (0.79.3):
-    - RCT-Folly (= 2024.11.18.00)
+    - SocketRocket
+  - React-RCTImage (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTTypeSafety
     - React-Core/RCTImageHeaders
     - React-jsi
@@ -1452,66 +1829,108 @@ PODS:
     - React-RCTFBReactNativeSpec
     - React-RCTNetwork
     - ReactCommon
-  - React-RCTLinking (0.79.3):
-    - React-Core/RCTLinkingHeaders (= 0.79.3)
-    - React-jsi (= 0.79.3)
+    - SocketRocket
+  - React-RCTLinking (0.80.0):
+    - React-Core/RCTLinkingHeaders (= 0.80.0)
+    - React-jsi (= 0.80.0)
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-    - ReactCommon/turbomodule/core (= 0.79.3)
-  - React-RCTNetwork (0.79.3):
-    - RCT-Folly (= 2024.11.18.00)
+    - ReactCommon/turbomodule/core (= 0.80.0)
+  - React-RCTNetwork (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTTypeSafety
     - React-Core/RCTNetworkHeaders
+    - React-featureflags
     - React-jsi
+    - React-jsinspectorcdp
+    - React-jsinspectornetwork
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-  - React-RCTRuntime (0.79.3):
+    - SocketRocket
+  - React-RCTRuntime (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-Core
     - React-hermes
     - React-jsi
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsinspectortracing
     - React-jsitooling
     - React-RuntimeApple
     - React-RuntimeCore
     - React-RuntimeHermes
-  - React-RCTSettings (0.79.3):
-    - RCT-Folly (= 2024.11.18.00)
+    - SocketRocket
+  - React-RCTSettings (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTTypeSafety
     - React-Core/RCTSettingsHeaders
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-  - React-RCTText (0.79.3):
-    - React-Core/RCTTextHeaders (= 0.79.3)
+    - SocketRocket
+  - React-RCTText (0.80.0):
+    - React-Core/RCTTextHeaders (= 0.80.0)
     - Yoga
-  - React-RCTVibration (0.79.3):
-    - RCT-Folly (= 2024.11.18.00)
+  - React-RCTVibration (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-Core/RCTVibrationHeaders
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-  - React-rendererconsistency (0.79.3)
-  - React-renderercss (0.79.3):
+    - SocketRocket
+  - React-rendererconsistency (0.80.0)
+  - React-renderercss (0.80.0):
     - React-debug
     - React-utils
-  - React-rendererdebug (0.79.3):
+  - React-rendererdebug (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
-    - RCT-Folly (= 2024.11.18.00)
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-debug
-  - React-rncore (0.79.3)
-  - React-RuntimeApple (0.79.3):
+    - SocketRocket
+  - React-rncore (0.80.0)
+  - React-RuntimeApple (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-callinvoker
     - React-Core/Default
     - React-CoreModules
@@ -1531,10 +1950,16 @@ PODS:
     - React-RuntimeHermes
     - React-runtimescheduler
     - React-utils
-  - React-RuntimeCore (0.79.3):
+    - SocketRocket
+  - React-RuntimeCore (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-cxxreact
     - React-Fabric
     - React-featureflags
@@ -1548,24 +1973,38 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-  - React-runtimeexecutor (0.79.3):
-    - React-jsi (= 0.79.3)
-  - React-RuntimeHermes (0.79.3):
+    - SocketRocket
+  - React-runtimeexecutor (0.80.0):
+    - React-jsi (= 0.80.0)
+  - React-RuntimeHermes (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
     - hermes-engine
-    - RCT-Folly/Fabric (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-featureflags
     - React-hermes
     - React-jsi
     - React-jsinspector
+    - React-jsinspectorcdp
     - React-jsinspectortracing
     - React-jsitooling
     - React-jsitracing
     - React-RuntimeCore
     - React-utils
-  - React-runtimescheduler (0.79.3):
+    - SocketRocket
+  - React-runtimescheduler (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-callinvoker
     - React-cxxreact
     - React-debug
@@ -1579,21 +2018,32 @@ PODS:
     - React-runtimeexecutor
     - React-timing
     - React-utils
-  - React-timing (0.79.3)
-  - React-utils (0.79.3):
+    - SocketRocket
+  - React-timing (0.80.0)
+  - React-utils (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - React-debug
     - React-hermes
-    - React-jsi (= 0.79.3)
-  - ReactAppDependencyProvider (0.79.3):
+    - React-jsi (= 0.80.0)
+    - SocketRocket
+  - ReactAppDependencyProvider (0.80.0):
     - ReactCodegen
-  - ReactCodegen (0.79.3):
+  - ReactCodegen (0.80.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
     - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1611,54 +2061,76 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-  - ReactCommon (0.79.3):
-    - ReactCommon/turbomodule (= 0.79.3)
-  - ReactCommon/turbomodule (0.79.3):
+    - SocketRocket
+  - ReactCommon (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
+    - glog
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - ReactCommon/turbomodule (= 0.80.0)
+    - SocketRocket
+  - ReactCommon/turbomodule (0.80.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - React-callinvoker (= 0.79.3)
-    - React-cxxreact (= 0.79.3)
-    - React-jsi (= 0.79.3)
-    - React-logger (= 0.79.3)
-    - React-perflogger (= 0.79.3)
-    - ReactCommon/turbomodule/bridging (= 0.79.3)
-    - ReactCommon/turbomodule/core (= 0.79.3)
-  - ReactCommon/turbomodule/bridging (0.79.3):
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-callinvoker (= 0.80.0)
+    - React-cxxreact (= 0.80.0)
+    - React-jsi (= 0.80.0)
+    - React-logger (= 0.80.0)
+    - React-perflogger (= 0.80.0)
+    - ReactCommon/turbomodule/bridging (= 0.80.0)
+    - ReactCommon/turbomodule/core (= 0.80.0)
+    - SocketRocket
+  - ReactCommon/turbomodule/bridging (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - React-callinvoker (= 0.79.3)
-    - React-cxxreact (= 0.79.3)
-    - React-jsi (= 0.79.3)
-    - React-logger (= 0.79.3)
-    - React-perflogger (= 0.79.3)
-  - ReactCommon/turbomodule/core (0.79.3):
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-callinvoker (= 0.80.0)
+    - React-cxxreact (= 0.80.0)
+    - React-jsi (= 0.80.0)
+    - React-logger (= 0.80.0)
+    - React-perflogger (= 0.80.0)
+    - SocketRocket
+  - ReactCommon/turbomodule/core (0.80.0):
+    - boost
     - DoubleConversion
-    - fast_float (= 6.1.4)
-    - fmt (= 11.0.2)
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - React-callinvoker (= 0.79.3)
-    - React-cxxreact (= 0.79.3)
-    - React-debug (= 0.79.3)
-    - React-featureflags (= 0.79.3)
-    - React-jsi (= 0.79.3)
-    - React-logger (= 0.79.3)
-    - React-perflogger (= 0.79.3)
-    - React-utils (= 0.79.3)
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - React-callinvoker (= 0.80.0)
+    - React-cxxreact (= 0.80.0)
+    - React-debug (= 0.80.0)
+    - React-featureflags (= 0.80.0)
+    - React-jsi (= 0.80.0)
+    - React-logger (= 0.80.0)
+    - React-perflogger (= 0.80.0)
+    - React-utils (= 0.80.0)
+    - SocketRocket
   - RNGestureHandler (2.25.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1677,12 +2149,17 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - RNReanimated (3.17.5):
+  - RNReanimated (3.18.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1701,14 +2178,19 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.17.5)
-    - RNReanimated/worklets (= 3.17.5)
+    - RNReanimated/reanimated (= 3.18.0)
+    - RNReanimated/worklets (= 3.18.0)
+    - SocketRocket
     - Yoga
-  - RNReanimated/reanimated (3.17.5):
+  - RNReanimated/reanimated (3.18.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1727,13 +2209,18 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.17.5)
+    - RNReanimated/reanimated/apple (= 3.18.0)
+    - SocketRocket
     - Yoga
-  - RNReanimated/reanimated/apple (3.17.5):
+  - RNReanimated/reanimated/apple (3.18.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1752,12 +2239,17 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
-  - RNReanimated/worklets (3.17.5):
+  - RNReanimated/worklets (3.18.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1776,13 +2268,18 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/worklets/apple (= 3.17.5)
+    - RNReanimated/worklets/apple (= 3.18.0)
+    - SocketRocket
     - Yoga
-  - RNReanimated/worklets/apple (3.17.5):
+  - RNReanimated/worklets/apple (3.18.0):
+    - boost
     - DoubleConversion
+    - fast_float
+    - fmt
     - glog
     - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
+    - RCT-Folly
+    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
@@ -1801,6 +2298,7 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - SocketRocket
     - Yoga
   - SocketRocket (0.7.1)
   - Yoga (0.0.0)
@@ -1814,7 +2312,6 @@ DEPENDENCIES:
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
-  - RCT-Folly/Fabric (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
   - RCTRequired (from `../node_modules/react-native/Libraries/Required`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
@@ -1840,6 +2337,8 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector-modern`)
+  - React-jsinspectorcdp (from `../node_modules/react-native/ReactCommon/jsinspector-modern/cdp`)
+  - React-jsinspectornetwork (from `../node_modules/react-native/ReactCommon/jsinspector-modern/network`)
   - React-jsinspectortracing (from `../node_modules/react-native/ReactCommon/jsinspector-modern/tracing`)
   - React-jsitooling (from `../node_modules/react-native/ReactCommon/jsitooling`)
   - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
@@ -1879,6 +2378,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - SocketRocket (~> 0.7.1)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1900,7 +2400,7 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
-    :tag: hermes-2025-06-04-RNv0.79.3-7f9a871eefeb2c3852365ee80f0b6733ec12ac3b
+    :tag: hermes-2025-05-06-RNv0.80.0-4eb6132a5bf0450bf4c6c91987675381d7ac8bca
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTDeprecation:
@@ -1951,6 +2451,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector-modern"
+  React-jsinspectorcdp:
+    :path: "../node_modules/react-native/ReactCommon/jsinspector-modern/cdp"
+  React-jsinspectornetwork:
+    :path: "../node_modules/react-native/ReactCommon/jsinspector-modern/network"
   React-jsinspectortracing:
     :path: "../node_modules/react-native/ReactCommon/jsinspector-modern/tracing"
   React-jsitooling:
@@ -2035,78 +2539,80 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
-  fast_float: 06eeec4fe712a76acc9376682e4808b05ce978b6
-  FBLazyVector: a62a7a5760929b6265e27bc01ab7598dde93ebd3
+  fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
+  FBLazyVector: 778b815a6fb3fa1599f581ffb9a5e85fad313c1d
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
-  hermes-engine: 94ed01537bdeccaab1adbf94b040d115d6fa1a7f
-  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
-  RCTDeprecation: c3e3f5b4ea83e7ff3bc86ce09e2a54b7affd687d
-  RCTRequired: ee438439880dffc9425930d1dd1a3c883ee6879c
-  RCTTypeSafety: fe728195791e1a0222aa83596a570cf377cd475e
-  React: 114ee161feb204412580928b743e6716aebac987
-  React-callinvoker: d175cf3640a993f6cd960044a7657543157f0ba9
-  React-Core: cd487c9eeb125c902242bcc76ced12e14adf4ea4
-  React-CoreModules: 202df4f342e5c2893d5d1899b2856879a90d4bf1
-  React-cxxreact: 72be57cebb9976199e6130ec6f9d511c6ae3b310
-  React-debug: 5414189118050ebad6c701942c01c63bb499f5a6
-  React-defaultsnativemodule: d9683a9187744c14c6ce7eb1a1a3649d33591e43
-  React-domnativemodule: ea54d8fd1ee946a97654635f5a4d9245f6588006
-  React-Fabric: 3cdce860fd1079c27f8cd8e029f716e6c4b34a4e
-  React-FabricComponents: 126c59bb8d69d795492e2a2c97a0c1738a29730b
-  React-FabricImage: 6cf335909c59746e7aca2180901367978cc21959
-  React-featureflags: 670eb7cdf1495ea7bf392f653c19268291acaad1
-  React-featureflagsnativemodule: 16b4eae0bf4d838e0a807c6b0cde2b4ae84534ef
-  React-graphics: 0d6b3201d0414e56897f09693df82d601cac0613
-  React-hermes: a40e47b18c31efe4baa7942357e2327ddab63918
-  React-idlecallbacksnativemodule: 37c6d6053ad5123405b0fbb695c44841273482dd
-  React-ImageManager: 1f5cb695a06454329759bfce8548ac0d4fcd069e
-  React-jserrorhandler: a8214a9f297af6ee3cb004e2cb5185214cfc4360
-  React-jsi: ae02c9d6d68dbed80a9fde8f6d6198035ca154ce
-  React-jsiexecutor: 8c266057f23430685a2d928703e77eda80e1742e
-  React-jsinspector: 8789c28cbd63ff818d23550556490883caa89cdb
-  React-jsinspectortracing: 150180f7ed6fd2252308b5608b62ea698ca087b6
-  React-jsitooling: 1fd5c99a3688a5152781be4ecfb88ca9c6cb11d8
-  React-jsitracing: c87b3d789f4d5053a2518fb8202c1e1ccd6848a9
-  React-logger: 514fac028fee60c84591f951c7c04ba1c5023334
-  React-Mapbuffer: fae8da2c01aeb7f26ad739731b6dba61fd02fd97
-  React-microtasksnativemodule: 20454ffccff553f0ee73fd20873aa8555a5867fb
-  React-NativeModulesApple: 65b2735133d6ce8a3cb5f23215ef85e427b0139c
-  React-oscompat: f26aa2a4adc84c34212ab12c07988fe19e9cf16a
-  React-perflogger: e15a0d43d1928e1c82f4f0b7fc05f7e9bccfede8
-  React-performancetimeline: 064f2767a5d4d71547ea32a3cd8a76a101dfd11f
-  React-RCTActionSheet: c89c8b9b7c3ef87cb6a67e20f5eaea271f4b5f67
-  React-RCTAnimation: e00af558ccb5fedd380ae32329be4c38e92e9b90
-  React-RCTAppDelegate: 10d98d4867643322fa4fcd04548359ac88c74656
-  React-RCTBlob: ef645bccf9c33d3b4391794983744da897474dfb
-  React-RCTFabric: 06ff9416fc48742bba58ed81a0d0a62bf0f8c7ec
-  React-RCTFBReactNativeSpec: e0942c2c7efa10303c63e287c1c1788aeb6d99ef
-  React-RCTImage: 0e3669a0bda8995874736d0f8f12c21d522df3c4
-  React-RCTLinking: bd81ec3d1b6686a7c58bc8ed8b7a1f05ff2b3f8b
-  React-RCTNetwork: 20b8044841a043b80e7027e1bc4049ffa552d1fa
-  React-RCTRuntime: 0084733b33619670bea35cb02c96412d9271718e
-  React-RCTSettings: fa1d3e6c302e9980b5670315e2ccc998255ce32a
-  React-RCTText: 71f01a9261c015b76702e9d7a4153c9ca45f2341
-  React-RCTVibration: 0e05fa4647ec1391c409fcc1cbd7cdb4894d80ef
-  React-rendererconsistency: 6a79c0a31890942940480f6e761365c4f604394f
-  React-renderercss: 18c7ae4971ae6eb6c6c1d4c8f241a856a8e4243f
-  React-rendererdebug: d621c08946310b44e58a80b6bf96a6c13e779cff
-  React-rncore: 91456f1e8feadf5216b37073968c16c14061f8d7
-  React-RuntimeApple: 013c318ce9b3506b4fc7abe67369fdd14fc18bea
-  React-RuntimeCore: 66eaaf42eae393a1d592557493a70b80f051f885
-  React-runtimeexecutor: 4e7bc0119ff38f80df43d109ef9508497cac1eee
-  React-RuntimeHermes: 2878d6e471ac3eb88ecc946d07938c4f9ec4f63e
-  React-runtimescheduler: ea0278e84e37a64a0f02b5bcb98fec1d49450fe7
-  React-timing: 4e298a80e9a41c31d884df0422c9eb73a240ec0d
-  React-utils: fbb79f805d13e0613bc1f799c7bbe5659a0d5ba9
-  ReactAppDependencyProvider: e6d0c3c3cc9862a3ccef0c252835cd7ccb96313d
-  ReactCodegen: d9e143b4669db804e47387c1c07d7b65c9aedb8b
-  ReactCommon: e243aa261effc83c10208f0794bade55ca9ae5b6
-  RNGestureHandler: ebef699ea17e7c0006c1074e1e423ead60ce0121
-  RNReanimated: 2313402fe27fecb7237619e9c6fcee3177f08a65
+  hermes-engine: 7068e976238b29e97b3bafd09a994542af7d5c0b
+  RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
+  RCTDeprecation: ff787f6c860a1b97dd1bc27264b61d23ad1994da
+  RCTRequired: 664eb8399ed8a83e26ab65af7c2ad390f7e61696
+  RCTTypeSafety: a5cf7a7e80baf972e331dc028e5d5c19bb2535a4
+  React: 606d4dccbcf29aec4dc84a7921405a28e1701a22
+  React-callinvoker: 0e13bd3c039df9ceef04f7381a81f017655c8361
+  React-Core: 701ad54ae468c2ca1e4869d659b30ebfee30ac77
+  React-CoreModules: 99d3515898255378fa2d6fc906b6dca093d280c4
+  React-cxxreact: 3410a1edbe15936bcf8eae61a546af1bec06ed98
+  React-debug: a9e91845f3670c3a19249f52919f0488b7842cf7
+  React-defaultsnativemodule: 8fad7c7173d6133d15b1532251df550d0d1c1f87
+  React-domnativemodule: 1da1f2bc921a9e4652918f37285c3830f561c86b
+  React-Fabric: e6f729f372f959bda89268c2c921fac55a9579dc
+  React-FabricComponents: f2ab7d78be2ea1dd06a7d8d606f5740cd1f54041
+  React-FabricImage: 220e8ce3ccdb483fd4283d8b21839676e8b88e27
+  React-featureflags: b64383c3268d03c3fab25c03a5c7e5fab0931a55
+  React-featureflagsnativemodule: 4c7b5cbe887d120a1797f65e6676fe9e1f9396ea
+  React-graphics: 4031c43a78b816dc1043dca24dfabf1d2622df9a
+  React-hermes: dc21a35794633bf2aef73645d273f5ee3bdf777a
+  React-idlecallbacksnativemodule: 9d6ea7839e347ffd3791315ba418370421d6c7c7
+  React-ImageManager: b743a715eca9abbf69fbd50732315565c9eb3863
+  React-jserrorhandler: 850fe8285385ffa783cc73e5e2eda8ddcb84e147
+  React-jsi: ea8a33b23165395610436c8f0d715e2c3bbcec7e
+  React-jsiexecutor: 0fb247eca0908176917380e1e1b75339f52a0c72
+  React-jsinspector: dcfc9ee7f2610ff05aa8f66fc8203cf7be875d0e
+  React-jsinspectorcdp: 6803046f78af0b3caace9002e28b0ca1fd97c1c4
+  React-jsinspectornetwork: b25ef98ec036aa1b454ebc904b983059e1ebc6e7
+  React-jsinspectortracing: 777ae30cf41f6305ffc509e53bef86bb1027395f
+  React-jsitooling: 568f4974066f14597084df606a6ad79fa52715b6
+  React-jsitracing: 47cb4a6c4b3c5e2d1d32ff4880d74d5faf58423c
+  React-logger: b69e65dc60f768e5509ac0cc27a360124bf70478
+  React-Mapbuffer: b48f9f3311fd0ec0f7a5dc39d707eff521fb5f38
+  React-microtasksnativemodule: d8568d0485a350c720c061ae835e09fc88c28715
+  React-NativeModulesApple: f10596688a03af66804cfbe61792be24a7888da8
+  React-oscompat: 7c0a341cc31e350da71ddf2e46de0a845d1d1626
+  React-perflogger: 4cc44451f694d6205f47bd8d5d87c9c862c3335c
+  React-performancetimeline: a81afec7aba50bdb80e5a692b03eff2dc499fe37
+  React-RCTActionSheet: 99864bd8422649219f24eca9a51445e698b70b8e
+  React-RCTAnimation: 7cb99a851a514673a1e48ca5fcbdee7c7c760da1
+  React-RCTAppDelegate: cd3bc49cec7cef167e920d5e54194d161cd8ab6d
+  React-RCTBlob: c96068eb67bf4a587f279db91c6948fc761826b9
+  React-RCTFabric: ca43b2e7bf026a8898a4eea81e9306786a892065
+  React-RCTFBReactNativeSpec: 96df6e569ad40c52f286762a59d7a96644567f5b
+  React-RCTImage: c40e65f565882df880c4f8994940c8b070923239
+  React-RCTLinking: 88992a3fb7c8caa868a2fc3489b26741e75ac5b5
+  React-RCTNetwork: 89c9222b388d90229511cc974abee608ac9c1221
+  React-RCTRuntime: 8a0222f21dacd0946aaff43976a06bd082e49e42
+  React-RCTSettings: 9e7a5f4262523dee5a1f9b0fd1e674b2a11bd7db
+  React-RCTText: 67f2955faca189ff85c3c5686505be9526df5461
+  React-RCTVibration: e4fe5861cee22c972672d29da4cdf24b6313e01d
+  React-rendererconsistency: a4db9bb060c65bce8ae83d936ed0719696055bd2
+  React-renderercss: 77c768faf43570d50e3657b97ce1a4c4614012d6
+  React-rendererdebug: 460dacb65d9ec58ba44e5c936b89e58530dd2a06
+  React-rncore: 322add36430c38049067a5d365f166256975391f
+  React-RuntimeApple: 9a7b848f3ea1b2aa6eefb0e42a5e113ed9b47f3d
+  React-RuntimeCore: d9feb0e71b045780372d72b9fd0e4326c2ee97d8
+  React-runtimeexecutor: 49ea276161508d50b3486c385e1ca7972d1699f5
+  React-RuntimeHermes: 31f857c04fda874cefef4dfbd1c8b0d234c4d606
+  React-runtimescheduler: 3cb2ab6622f9580b237a110350804933f8aec680
+  React-timing: a275a1c2e6112dba17f8f7dd496d439213bbea0d
+  React-utils: 257f8c08cb0559e458a9a9254967058434198ced
+  ReactAppDependencyProvider: cd55f820247d424280ae0b94e1ffb38963410c01
+  ReactCodegen: 23096f8bccd173d409b0ad9b25776cdbd76b9845
+  ReactCommon: 658874decaf8c4fd76cfa3a878b94a869db85b1c
+  RNGestureHandler: 36fed59e7d9665e3c8660ac9ea93e55f7347aaab
+  RNReanimated: 2010262133feb53009f16faaa404042eed7da018
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 29f74a5b77dca8c37669e1e1e867e5f4e12407df
+  Yoga: 395b5d614cd7cbbfd76b05d01bd67230a6ad004e
 
 PODFILE CHECKSUM: d7a215749d28de40b77f4cf61bc640deb33edca0
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.15.2
diff --git a/ExampleLatest/package-lock.json b/ExampleLatest/package-lock.json
index b72ba1b..10db774 100755
--- a/ExampleLatest/package-lock.json
+++ b/ExampleLatest/package-lock.json
@@ -8,31 +8,31 @@
       "name": "example-latest",
       "version": "0.0.1",
       "dependencies": {
-        "react": "19.0.0",
-        "react-native": "0.79.3",
-        "react-native-gesture-handler": "^2.25.0",
-        "react-native-reanimated": "^3.17.5"
+        "react": "19.1.0",
+        "react-native": "0.80.0",
+        "react-native-gesture-handler": "^2.26.0",
+        "react-native-reanimated": "^3.18.0"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
         "@babel/preset-env": "^7.25.3",
         "@babel/runtime": "^7.25.0",
-        "@react-native-community/cli": "18.0.0",
-        "@react-native-community/cli-platform-android": "18.0.0",
-        "@react-native-community/cli-platform-ios": "18.0.0",
-        "@react-native/babel-preset": "0.79.3",
-        "@react-native/eslint-config": "0.79.2",
-        "@react-native/metro-config": "0.79.3",
-        "@react-native/typescript-config": "0.79.2",
+        "@react-native-community/cli": "19.0.0",
+        "@react-native-community/cli-platform-android": "19.0.0",
+        "@react-native-community/cli-platform-ios": "19.0.0",
+        "@react-native/babel-preset": "0.80.0",
+        "@react-native/eslint-config": "0.80.0",
+        "@react-native/metro-config": "0.80.0",
+        "@react-native/typescript-config": "0.80.0",
         "@types/jest": "^29.5.13",
-        "@types/react": "^19.0.0",
-        "@types/react-test-renderer": "^19.0.0",
+        "@types/react": "^19.1.0",
+        "@types/react-test-renderer": "^19.1.0",
         "eslint": "^8.19.0",
         "eslint-config-prettier": "^10.1.1",
         "eslint-plugin-prettier": "^5.2.6",
         "jest": "^29.6.3",
         "prettier": "3.5.3",
-        "react-test-renderer": "19.0.0",
+        "react-test-renderer": "19.1.0",
         "typescript": "5.0.4"
       },
       "engines": {
@@ -53,14 +53,14 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.27.1",
         "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "picocolors": "^1.1.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -125,13 +125,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz",
-      "integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==",
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
+      "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.27.0",
-        "@babel/types": "^7.27.0",
+        "@babel/parser": "^7.27.5",
+        "@babel/types": "^7.27.3",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^3.0.2"
@@ -336,18 +336,18 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -391,12 +391,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
-      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
+      "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.0"
+        "@babel/types": "^7.27.3"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1902,14 +1902,14 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
-      "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.27.0",
-        "@babel/types": "^7.27.0"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1935,16 +1935,16 @@
     },
     "node_modules/@babel/traverse--for-generate-function-map": {
       "name": "@babel/traverse",
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
-      "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
+      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.27.0",
-        "@babel/parser": "^7.27.0",
-        "@babel/template": "^7.27.0",
-        "@babel/types": "^7.27.0",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.27.3",
+        "@babel/parser": "^7.27.4",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.27.3",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -1953,13 +1953,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
-      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
+      "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2051,9 +2051,9 @@
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2147,9 +2147,9 @@
       }
     },
     "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2789,18 +2789,18 @@
       }
     },
     "node_modules/@react-native-community/cli": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-18.0.0.tgz",
-      "integrity": "sha512-DyKptlG78XPFo7tDod+we5a3R+U9qjyhaVFbOPvH4pFNu5Dehewtol/srl44K6Cszq0aEMlAJZ3juk0W4WnOJA==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-19.0.0.tgz",
+      "integrity": "sha512-a7lAt0mACJ2jsCgDIFWpsCaqWxWoRTZwRMD5HOS3RYOYEUBzp4bfiQdjLUmrx5vF76KvcD0Q1YigrAVrEbSmbw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-clean": "18.0.0",
-        "@react-native-community/cli-config": "18.0.0",
-        "@react-native-community/cli-doctor": "18.0.0",
-        "@react-native-community/cli-server-api": "18.0.0",
-        "@react-native-community/cli-tools": "18.0.0",
-        "@react-native-community/cli-types": "18.0.0",
+        "@react-native-community/cli-clean": "19.0.0",
+        "@react-native-community/cli-config": "19.0.0",
+        "@react-native-community/cli-doctor": "19.0.0",
+        "@react-native-community/cli-server-api": "19.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
+        "@react-native-community/cli-types": "19.0.0",
         "chalk": "^4.1.2",
         "commander": "^9.4.1",
         "deepmerge": "^4.3.0",
@@ -2819,26 +2819,26 @@
       }
     },
     "node_modules/@react-native-community/cli-clean": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-18.0.0.tgz",
-      "integrity": "sha512-+k64EnJaMI5U8iNDF9AftHBJW+pO/isAhncEXuKRc6IjRtIh6yoaUIIf5+C98fgjfux7CNRZAMQIkPbZodv2Gw==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-19.0.0.tgz",
+      "integrity": "sha512-Br+bxxEKXpikzlBLeAv3Bh1DRGrveJmULEG6Q9XPHzPOtRZcRlcDcBidjVwu8XGJdYiplvFdK6cC2sxCM2Mbvw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
         "fast-glob": "^3.3.2"
       }
     },
     "node_modules/@react-native-community/cli-config": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-18.0.0.tgz",
-      "integrity": "sha512-GUGvyek06JRF4mfd9zXao9YQW4+H8ny69HznqNXVRtVSIIekFyjOpKQeSEzdcyqJEEa5gej22GOz1JCHMKBccg==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-19.0.0.tgz",
+      "integrity": "sha512-HyZOVqnUIs5WlsARqEG/um9cz+XJNIalCkrUeb5MLpxejnWFVLc3hiYoFZhb6KHKj8edg9TotOM0VbzURSYAfA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "chalk": "^4.1.2",
         "cosmiconfig": "^9.0.0",
         "deepmerge": "^4.3.0",
@@ -2847,43 +2847,43 @@
       }
     },
     "node_modules/@react-native-community/cli-config-android": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-android/-/cli-config-android-18.0.0.tgz",
-      "integrity": "sha512-pgnhEO2cmOeb+bBFEBZFYjeFjDTqWoV0JTorTiugj9bb4RQRCl8cr35baVlBGhxAuaio3722CsJ9GRF1oHjP8w==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-android/-/cli-config-android-19.0.0.tgz",
+      "integrity": "sha512-TDd6qdjVjGKuLUEJdPtBJIUOZAJ+oLLiejdrVsfJplJWlFnJVmUAv2M7yT69U+5kh/fGaaHGtsyDekK0B4Gtbg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "chalk": "^4.1.2",
         "fast-glob": "^3.3.2",
         "fast-xml-parser": "^4.4.1"
       }
     },
     "node_modules/@react-native-community/cli-config-apple": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-apple/-/cli-config-apple-18.0.0.tgz",
-      "integrity": "sha512-6edjTt3mlNMFBuB/Xd6u0O7GEkhJiKvQgmcoBH18FsNy5cpiHDwQsG8EWM5cHeINp1gMK845qq9fFsTko6gqyQ==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-apple/-/cli-config-apple-19.0.0.tgz",
+      "integrity": "sha512-apIOz46ZseD/eL4LjOTR3UH6UEXSj6bHK3SPA6JmcxY8q8brnAjUxzNC7FGeKBcUbeLbRyXplIuxuOrBpcX3QQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
         "fast-glob": "^3.3.2"
       }
     },
     "node_modules/@react-native-community/cli-doctor": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-18.0.0.tgz",
-      "integrity": "sha512-cD3LJfu2h2QSFmZai+fl7RrORKodd5XHSuB7Y9oF1zkebpRYN720vaUtK+GsepqBOElwKk5gl8uVolJ3j+xm8A==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-19.0.0.tgz",
+      "integrity": "sha512-z+fhaQjS0zvWnJ8+gZStSZS2hsF1Lge3g8OthBrzoBPlkmpxeID/H2dEZOY7W9D7ngY/CaCmpQxLzaJVOjlrvw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-config": "18.0.0",
-        "@react-native-community/cli-platform-android": "18.0.0",
-        "@react-native-community/cli-platform-apple": "18.0.0",
-        "@react-native-community/cli-platform-ios": "18.0.0",
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-config": "19.0.0",
+        "@react-native-community/cli-platform-android": "19.0.0",
+        "@react-native-community/cli-platform-apple": "19.0.0",
+        "@react-native-community/cli-platform-ios": "19.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "chalk": "^4.1.2",
         "command-exists": "^1.2.8",
         "deepmerge": "^4.3.0",
@@ -2897,9 +2897,9 @@
       }
     },
     "node_modules/@react-native-community/cli-doctor/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -2910,51 +2910,51 @@
       }
     },
     "node_modules/@react-native-community/cli-platform-android": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-18.0.0.tgz",
-      "integrity": "sha512-3Y3RleN/des1C3oRS6s6fDvFYKN0KwsLrYFRpVx9vzdDnH1OGyFJOy4DbrruSPtdNiHUpvvHnOOxeLMj0+/tmw==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-19.0.0.tgz",
+      "integrity": "sha512-oY5ztWIZxa7EWiQHNG5RXhx/8DA7t4EPiu0qizuz+tV6sAiDcnPQv4hRYF3+wyeIXk/NJjxnYQe9xeQ0Yt1X4A==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-config-android": "18.0.0",
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-config-android": "19.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
         "logkitty": "^0.7.1"
       }
     },
     "node_modules/@react-native-community/cli-platform-apple": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-apple/-/cli-platform-apple-18.0.0.tgz",
-      "integrity": "sha512-zD18gdP5Wr8BSLJ79xtHuPYcg2Vi/nL+WsGsPm7TZjzR5ZU2WbY/tZ+qTGVTQYhQaah+92sU+Dam7gStMrF/fA==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-apple/-/cli-platform-apple-19.0.0.tgz",
+      "integrity": "sha512-nSuPAaGSDxhsIUzr3JSa9AaQ3f5si6S2+J7FJxTLGuJ2hXrbDXtwOUmtmln09U8cg8Yewa9zh6rjTLVSsFvbAA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-config-apple": "18.0.0",
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-config-apple": "19.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
         "fast-xml-parser": "^4.4.1"
       }
     },
     "node_modules/@react-native-community/cli-platform-ios": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-18.0.0.tgz",
-      "integrity": "sha512-05Nvkkre/4Gao1TYqyP1wGet8td1dAH0CLJKqLNl9Te6ihnrQ8/8OhjIna5xw0iEFr9An8VdLfaPu1Dgv2qAnQ==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-19.0.0.tgz",
+      "integrity": "sha512-oi8p8ccbnk9VYMAjqowB2zicUbCyl/DwD0mdTMivX/YQNIflAIFvzq6p76EP4J3E0/IPu9S0IpgVPCBdTyiSlg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-platform-apple": "18.0.0"
+        "@react-native-community/cli-platform-apple": "19.0.0"
       }
     },
     "node_modules/@react-native-community/cli-server-api": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-18.0.0.tgz",
-      "integrity": "sha512-tdmGV7ZntYmzrXWheZNpAy6dVI2yrsX4sQH+xAzU7lCfKHk6J8GucxedduXnB5qBB4JgSrrbzg2RLNxv5v0S/Q==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-19.0.0.tgz",
+      "integrity": "sha512-udcSGC9hrWOGqB4S5L8cH8wgckbrZfc0iF6bH2b2/QalJ3vD016WDoZ6R6fyiyB/u8YsFJ3bnb6tk0tKInKWjg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "18.0.0",
+        "@react-native-community/cli-tools": "19.0.0",
         "body-parser": "^1.20.3",
         "compression": "^1.7.1",
         "connect": "^3.6.5",
@@ -2967,9 +2967,9 @@
       }
     },
     "node_modules/@react-native-community/cli-tools": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-18.0.0.tgz",
-      "integrity": "sha512-oR6FcDEcSDYos79vZy4+Tj8jgAE0Xf5HEiRXMJFGISYLRx7tvslSaK8SodUOW9TZe2bCZOb5QSvj8zeMpORmxg==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.0.0.tgz",
+      "integrity": "sha512-O6qGE+1xZOOJY43CcjL3E6xtVx5m6TDEVzysIJ0jHjjE1QqYijx6W8VuWebmA08MfX4JCE2jzUrwx2Ns2GguGg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -2986,9 +2986,9 @@
       }
     },
     "node_modules/@react-native-community/cli-tools/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -2999,9 +2999,9 @@
       }
     },
     "node_modules/@react-native-community/cli-types": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-18.0.0.tgz",
-      "integrity": "sha512-J84+4IRXl8WlVdoe1maTD5skYZZO9CbQ6LNXEHx1kaZcFmvPZKfjsaxuyQ+8BsSqZnM2izOw8dEWnAp/Zuwb0w==",
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-19.0.0.tgz",
+      "integrity": "sha512-fpnpy6iLX9Uohh83vWRsfi3wMfFT8C8TiKrMiln2e9rnoyZwZqm3gnz8pDUnldmFkaOjKxW0FAiRXxwhJGebsw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3022,32 +3022,32 @@
       }
     },
     "node_modules/@react-native/assets-registry": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.79.3.tgz",
-      "integrity": "sha512-Vy8DQXCJ21YSAiHxrNBz35VqVlZPpRYm50xRTWRf660JwHuJkFQG8cUkrLzm7AUriqUXxwpkQHcY+b0ibw9ejQ==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.80.0.tgz",
+      "integrity": "sha512-MlScsKAz99zoYghe5Rf5mUqsqz2rMB02640NxtPtBMSHNdGxxRlWu/pp1bFexDa1DYJwyIjnLgt3Z/Y90ikHfw==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/babel-plugin-codegen": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.79.3.tgz",
-      "integrity": "sha512-Zb8F4bSEKKZfms5n1MQ0o5mudDcpAINkKiFuFTU0PErYGjY3kZ+JeIP+gS6KCXsckxCfMEKQwqKicP/4DWgsZQ==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.80.0.tgz",
+      "integrity": "sha512-LXd766LHCR/79WmhIg4zUB9jRosgw8xGJ1QnYOoef1rA7vCdubC23nhUxF+PJdfTdAl1cqX4u1dhZcjg6yXjRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.3",
-        "@react-native/codegen": "0.79.3"
+        "@react-native/codegen": "0.80.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/babel-preset": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.79.3.tgz",
-      "integrity": "sha512-VHGNP02bDD2Ul1my0pLVwe/0dsEBHxR343ySpgnkCNEEm9C1ANQIL2wvnJrHZPcqfAkWfFQ8Ln3t+6fdm4A/Dg==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.80.0.tgz",
+      "integrity": "sha512-ZgwbSOUPNKpIsZ6E0y3bncahh2vBf5V1URNV0tr9PBtu/LbGJ12nBKSH7gqrFdRzfEwKlhc0vP8p1oJt+A5mpw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3092,8 +3092,8 @@
         "@babel/plugin-transform-typescript": "^7.25.2",
         "@babel/plugin-transform-unicode-regex": "^7.24.7",
         "@babel/template": "^7.25.0",
-        "@react-native/babel-plugin-codegen": "0.79.3",
-        "babel-plugin-syntax-hermes-parser": "0.25.1",
+        "@react-native/babel-plugin-codegen": "0.80.0",
+        "babel-plugin-syntax-hermes-parser": "0.28.1",
         "babel-plugin-transform-flow-enums": "^0.0.2",
         "react-refresh": "^0.14.0"
       },
@@ -3105,13 +3105,13 @@
       }
     },
     "node_modules/@react-native/codegen": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.79.3.tgz",
-      "integrity": "sha512-CZejXqKch/a5/s/MO5T8mkAgvzCXgsTkQtpCF15kWR9HN8T+16k0CsN7TXAxXycltoxiE3XRglOrZNEa/TiZUQ==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.80.0.tgz",
+      "integrity": "sha512-X9TsPgytoUkNrQjzAZh4dXa4AuouvYT0NzYyvnjw1ry4LESCZtKba+eY4x3+M30WPR52zjgu+UFL//14BSdCCA==",
       "license": "MIT",
       "dependencies": {
         "glob": "^7.1.1",
-        "hermes-parser": "0.25.1",
+        "hermes-parser": "0.28.1",
         "invariant": "^2.2.4",
         "nullthrows": "^1.1.1",
         "yargs": "^17.6.2"
@@ -3124,18 +3124,18 @@
       }
     },
     "node_modules/@react-native/community-cli-plugin": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/community-cli-plugin/-/community-cli-plugin-0.79.3.tgz",
-      "integrity": "sha512-N/+p4HQqN4yK6IRzn7OgMvUIcrmEWkecglk1q5nj+AzNpfIOzB+mqR20SYmnPfeXF+mZzYCzRANb3KiM+WsSDA==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/community-cli-plugin/-/community-cli-plugin-0.80.0.tgz",
+      "integrity": "sha512-uadfVvzZfz5tGpqwslL12i+rELK9m6cLhtqICX0JQvS7Bu12PJwrozhKzEzIYwN9i3wl2dWrKDUr08izt7S9Iw==",
       "license": "MIT",
       "dependencies": {
-        "@react-native/dev-middleware": "0.79.3",
+        "@react-native/dev-middleware": "0.80.0",
         "chalk": "^4.0.0",
-        "debug": "^2.2.0",
+        "debug": "^4.4.0",
         "invariant": "^2.2.4",
-        "metro": "^0.82.0",
-        "metro-config": "^0.82.0",
-        "metro-core": "^0.82.0",
+        "metro": "^0.82.2",
+        "metro-config": "^0.82.2",
+        "metro-core": "^0.82.2",
         "semver": "^7.1.3"
       },
       "engines": {
@@ -3150,21 +3150,6 @@
         }
       }
     },
-    "node_modules/@react-native/community-cli-plugin/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/@react-native/community-cli-plugin/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "license": "MIT"
-    },
     "node_modules/@react-native/community-cli-plugin/node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -3178,26 +3163,26 @@
       }
     },
     "node_modules/@react-native/debugger-frontend": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.79.3.tgz",
-      "integrity": "sha512-ImNDuEeKH6lEsLXms3ZsgIrNF94jymfuhPcVY5L0trzaYNo9ZFE9Ni2/18E1IbfXxdeIHrCSBJlWD6CTm7wu5A==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.80.0.tgz",
+      "integrity": "sha512-lpu9Z3xtKUaKFvEcm5HSgo1KGfkDa/W3oZHn22Zy0WQ9MiOu2/ar1txgd1wjkoNiK/NethKcRdCN7mqnc6y2mA==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/dev-middleware": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/dev-middleware/-/dev-middleware-0.79.3.tgz",
-      "integrity": "sha512-x88+RGOyG71+idQefnQg7wLhzjn/Scs+re1O5vqCkTVzRAc/f7SdHMlbmECUxJPd08FqMcOJr7/X3nsJBrNuuw==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/dev-middleware/-/dev-middleware-0.80.0.tgz",
+      "integrity": "sha512-lLyTnJ687A5jF3fn8yR/undlCis3FG+N/apQ+Q0Lcl+GV6FsZs0U5H28YmL6lZtjOj4TLek6uGPMPmZasHx7cQ==",
       "license": "MIT",
       "dependencies": {
         "@isaacs/ttlcache": "^1.4.1",
-        "@react-native/debugger-frontend": "0.79.3",
+        "@react-native/debugger-frontend": "0.80.0",
         "chrome-launcher": "^0.15.2",
         "chromium-edge-launcher": "^0.2.0",
         "connect": "^3.6.5",
-        "debug": "^2.2.0",
+        "debug": "^4.4.0",
         "invariant": "^2.2.4",
         "nullthrows": "^1.1.1",
         "open": "^7.0.3",
@@ -3208,15 +3193,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@react-native/dev-middleware/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
     "node_modules/@react-native/dev-middleware/node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -3229,12 +3205,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@react-native/dev-middleware/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "license": "MIT"
-    },
     "node_modules/@react-native/dev-middleware/node_modules/open": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
@@ -3252,15 +3222,15 @@
       }
     },
     "node_modules/@react-native/eslint-config": {
-      "version": "0.79.2",
-      "resolved": "https://registry.npmjs.org/@react-native/eslint-config/-/eslint-config-0.79.2.tgz",
-      "integrity": "sha512-ukb9qGvrFC/3YVlWVy/GGM+auKdGIsbbumCyfOYPfUdhHFWA/twz1zK4bJQmCZ38iINuTENYedRzoE+U57GclA==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/eslint-config/-/eslint-config-0.80.0.tgz",
+      "integrity": "sha512-bd0GOcG++qIKzEngeyeNrGaDWWHtB8CpC5zbpYho2TTWpJDxBRcoPAzBdpPkxQtpBMdXyYRZMENRp6Khrg0YYQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
-        "@react-native/eslint-plugin": "0.79.2",
+        "@react-native/eslint-plugin": "0.80.0",
         "@typescript-eslint/eslint-plugin": "^7.1.1",
         "@typescript-eslint/parser": "^7.1.1",
         "eslint-config-prettier": "^8.5.0",
@@ -3268,7 +3238,7 @@
         "eslint-plugin-ft-flow": "^2.0.1",
         "eslint-plugin-jest": "^27.9.0",
         "eslint-plugin-react": "^7.30.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-native": "^4.0.0"
       },
       "engines": {
@@ -3293,9 +3263,9 @@
       }
     },
     "node_modules/@react-native/eslint-plugin": {
-      "version": "0.79.2",
-      "resolved": "https://registry.npmjs.org/@react-native/eslint-plugin/-/eslint-plugin-0.79.2.tgz",
-      "integrity": "sha512-Abu+0OuwTje9E5eQOvYpTUuXvDgGjHeFhnfNVY9BXalBK8OrX20EFlonWvIbFqii136eS5KLEBm2Wjqk2V5XJg==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/eslint-plugin/-/eslint-plugin-0.80.0.tgz",
+      "integrity": "sha512-4kFD3M/zGqKdKyeevnTdhgAhNCj89VflDfv2wElo4jOb07xkR6VlEymv/6mZX3tdP/N5ukP2SZB+FDZH1GxBTg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3303,33 +3273,33 @@
       }
     },
     "node_modules/@react-native/gradle-plugin": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/gradle-plugin/-/gradle-plugin-0.79.3.tgz",
-      "integrity": "sha512-imfpZLhNBc9UFSzb/MOy2tNcIBHqVmexh/qdzw83F75BmUtLb/Gs1L2V5gw+WI1r7RqDILbWk7gXB8zUllwd+g==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/gradle-plugin/-/gradle-plugin-0.80.0.tgz",
+      "integrity": "sha512-drmS68rabSMOuDD+YsAY2luNT8br82ycodSDORDqAg7yWQcieHMp4ZUOcdOi5iW+JCqobablT/b6qxcrBg+RaA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/js-polyfills": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.79.3.tgz",
-      "integrity": "sha512-PEBtg6Kox6KahjCAch0UrqCAmHiNLEbp2SblUEoFAQnov4DSxBN9safh+QSVaCiMAwLjvNfXrJyygZz60Dqz3Q==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.80.0.tgz",
+      "integrity": "sha512-dMX7IcBuwghySTgIeK8q03tYz/epg5ScGmJEfBQAciuhzMDMV1LBR/9wwdgD73EXM/133yC5A+TlHb3KQil4Ew==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/metro-babel-transformer": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.79.3.tgz",
-      "integrity": "sha512-m56FEv22JYFpMFA+vp5FDj43swkS+K8jYA7uB7KtTlh8PjDJ8X0OfFmGTE/pOy4tFSQfVQnbKx9+eTx7bcKX9g==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.80.0.tgz",
+      "integrity": "sha512-5TldnaJE15IUNnZhjAelRz4+6qATlSO9yuzLqN1Y47qfJrAl/2lrI4KdSjFfvUaWrhezi94Aly1OKSJm9fjrXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
-        "@react-native/babel-preset": "0.79.3",
-        "hermes-parser": "0.25.1",
+        "@react-native/babel-preset": "0.80.0",
+        "hermes-parser": "0.28.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
@@ -3340,38 +3310,38 @@
       }
     },
     "node_modules/@react-native/metro-config": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.79.3.tgz",
-      "integrity": "sha512-yOk7vqxIpz77QDkkDxYzr/BonRe/LsC/dfiP3dSiaYhUtgbkvFupBhm0Ry7T95o8mE44/zUyGt7bbzq+u8jLVw==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.80.0.tgz",
+      "integrity": "sha512-LJ1ZC9vs/B3wez6BsOIgJ3iw7N4QalMpiT/fb5b66L4vHUGqVucOWNUwpxbDb1m1/wlhTa8AljiAdjt401sFjA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native/js-polyfills": "0.79.3",
-        "@react-native/metro-babel-transformer": "0.79.3",
-        "metro-config": "^0.82.0",
-        "metro-runtime": "^0.82.0"
+        "@react-native/js-polyfills": "0.80.0",
+        "@react-native/metro-babel-transformer": "0.80.0",
+        "metro-config": "^0.82.2",
+        "metro-runtime": "^0.82.2"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/normalize-colors": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.79.3.tgz",
-      "integrity": "sha512-T75NIQPRFCj6DFMxtcVMJTZR+3vHXaUMSd15t+CkJpc5LnyX91GVaPxpRSAdjFh7m3Yppl5MpdjV/fntImheYQ==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.80.0.tgz",
+      "integrity": "sha512-bJZDSopadjJxMDvysc634eTfLL4w7cAx5diPe14Ez5l+xcKjvpfofS/1Ja14DlgdMJhxGd03MTXlrxoWust3zg==",
       "license": "MIT"
     },
     "node_modules/@react-native/typescript-config": {
-      "version": "0.79.2",
-      "resolved": "https://registry.npmjs.org/@react-native/typescript-config/-/typescript-config-0.79.2.tgz",
-      "integrity": "sha512-krHAkkPRCOEhuqN3iwRUwIyE1rAnUQ9//huzUc1ukcoQ7Y4qFxM6amhNloAmYn4QH1Ay6o5At00VbEh2xoHISA==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/typescript-config/-/typescript-config-0.80.0.tgz",
+      "integrity": "sha512-mlZhlXnVsDFvetx2vnOEwspJ5qWLiH2JY7dhxMiT/N90uJZjgFFvRMAWWNeJ1zgZPQylEuHHUUlDoaDZ7tQbTA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@react-native/virtualized-lists": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.79.3.tgz",
-      "integrity": "sha512-/0rRozkn+iIHya2vnnvprDgT7QkfI54FLrACAN3BLP7MRlfOIGOrZsXpRLndnLBVnjNzkcre84i1RecjoXnwIA==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.80.0.tgz",
+      "integrity": "sha512-d9zZdPS/ZRexVAkxo1eRp85U7XnnEpXA1ZpSomRKxBuStYKky1YohfEX5YD5MhphemKK24tT7JR4UhaLlmeX8Q==",
       "license": "MIT",
       "dependencies": {
         "invariant": "^2.2.4",
@@ -3918,6 +3888,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -4325,12 +4304,12 @@
       }
     },
     "node_modules/babel-plugin-syntax-hermes-parser": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.25.1.tgz",
-      "integrity": "sha512-IVNpGzboFLfXZUAwkLFcI/bnqVbwky0jP3eBno4HKtqvQJAHBLdgxiG6lQ4to0+Q/YCN3PO0od5NZwIKyY4REQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.28.1.tgz",
+      "integrity": "sha512-meT17DOuUElMNsL5LZN56d+KBp22hb0EfxWfuPUeoSi54e40v1W4C2V36P75FpsH9fVEfDKpw5Nnkahc8haSsQ==",
       "license": "MIT",
       "dependencies": {
-        "hermes-parser": "0.25.1"
+        "hermes-parser": "0.28.1"
       }
     },
     "node_modules/babel-plugin-transform-flow-enums": {
@@ -4466,9 +4445,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5988,16 +5967,16 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
     "node_modules/eslint-plugin-react-native": {
@@ -6021,9 +6000,9 @@
       "license": "MIT"
     },
     "node_modules/eslint-plugin-react/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6110,9 +6089,9 @@
       }
     },
     "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6812,9 +6791,9 @@
       }
     },
     "node_modules/glob/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -7000,18 +6979,18 @@
       }
     },
     "node_modules/hermes-estree": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
-      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.28.1.tgz",
+      "integrity": "sha512-w3nxl/RGM7LBae0v8LH2o36+8VqwOZGv9rX1wyoWT6YaKZLqpJZ0YQ5P0LVr3tuRpf7vCx0iIG4i/VmBJejxTQ==",
       "license": "MIT"
     },
     "node_modules/hermes-parser": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
-      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.28.1.tgz",
+      "integrity": "sha512-nf8o+hE8g7UJWParnccljHumE9Vlq8F7MqIdeahl+4x0tvCUJYRrT0L7h0MMg/X9YJmkNwsfbaNNrzPtFXOscg==",
       "license": "MIT",
       "dependencies": {
-        "hermes-estree": "0.25.1"
+        "hermes-estree": "0.28.1"
       }
     },
     "node_modules/hoist-non-react-statics": {
@@ -7061,6 +7040,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -9241,9 +9233,9 @@
       }
     },
     "node_modules/metro": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro/-/metro-0.82.1.tgz",
-      "integrity": "sha512-/avNIHMlZhkDRl5ZMKNGuZSFZU56M3ABtt/JFQBJWEnitHtSD3Qidnfgjglq61yDbsWBv7aVrOFhdPRPTHN92A==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro/-/metro-0.82.4.tgz",
+      "integrity": "sha512-/gFmw3ux9CPG5WUmygY35hpyno28zi/7OUn6+OFfbweA8l0B+PPqXXLr0/T6cf5nclCcH0d22o+02fICaShVxw==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
@@ -9261,24 +9253,24 @@
         "error-stack-parser": "^2.0.6",
         "flow-enums-runtime": "^0.0.6",
         "graceful-fs": "^4.2.4",
-        "hermes-parser": "0.25.1",
+        "hermes-parser": "0.28.1",
         "image-size": "^1.0.2",
         "invariant": "^2.2.4",
         "jest-worker": "^29.7.0",
         "jsc-safe-url": "^0.2.2",
         "lodash.throttle": "^4.1.1",
-        "metro-babel-transformer": "0.82.1",
-        "metro-cache": "0.82.1",
-        "metro-cache-key": "0.82.1",
-        "metro-config": "0.82.1",
-        "metro-core": "0.82.1",
-        "metro-file-map": "0.82.1",
-        "metro-resolver": "0.82.1",
-        "metro-runtime": "0.82.1",
-        "metro-source-map": "0.82.1",
-        "metro-symbolicate": "0.82.1",
-        "metro-transform-plugins": "0.82.1",
-        "metro-transform-worker": "0.82.1",
+        "metro-babel-transformer": "0.82.4",
+        "metro-cache": "0.82.4",
+        "metro-cache-key": "0.82.4",
+        "metro-config": "0.82.4",
+        "metro-core": "0.82.4",
+        "metro-file-map": "0.82.4",
+        "metro-resolver": "0.82.4",
+        "metro-runtime": "0.82.4",
+        "metro-source-map": "0.82.4",
+        "metro-symbolicate": "0.82.4",
+        "metro-transform-plugins": "0.82.4",
+        "metro-transform-worker": "0.82.4",
         "mime-types": "^2.1.27",
         "nullthrows": "^1.1.1",
         "serialize-error": "^2.1.0",
@@ -9295,14 +9287,14 @@
       }
     },
     "node_modules/metro-babel-transformer": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.82.1.tgz",
-      "integrity": "sha512-SuDMRdJKafSj9mzIijCNRxVXWrlJZdTnVE9iTGHO85UFTp/mWOLftqCjEtEjc78/0Wq3Y8IoYayx/VkYmKUf/g==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.82.4.tgz",
+      "integrity": "sha512-4juJahGRb1gmNbQq48lNinB6WFNfb6m0BQqi/RQibEltNiqTCxew/dBspI2EWA4xVCd3mQWGfw0TML4KurQZnQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
         "flow-enums-runtime": "^0.0.6",
-        "hermes-parser": "0.25.1",
+        "hermes-parser": "0.28.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
@@ -9310,23 +9302,24 @@
       }
     },
     "node_modules/metro-cache": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.82.1.tgz",
-      "integrity": "sha512-4ZK5EdgM8bTLLjpPCYOImirXUXVZpUU/I81BeAkScF8FFJfEHhV8yFyVp4/689bLbUBMwqz3rvYyxnrMi242lA==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.82.4.tgz",
+      "integrity": "sha512-vX0ylSMGtORKiZ4G8uP6fgfPdDiCWvLZUGZ5zIblSGylOX6JYhvExl0Zg4UA9pix/SSQu5Pnp9vdODMFsNIxhw==",
       "license": "MIT",
       "dependencies": {
         "exponential-backoff": "^3.1.1",
         "flow-enums-runtime": "^0.0.6",
-        "metro-core": "0.82.1"
+        "https-proxy-agent": "^7.0.5",
+        "metro-core": "0.82.4"
       },
       "engines": {
         "node": ">=18.18"
       }
     },
     "node_modules/metro-cache-key": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.82.1.tgz",
-      "integrity": "sha512-RoByg/cxJUewdO4yDx3udpxc6S59570Ub34Jm2gjvOcYQOkGxNepNgyhWFlZLM7P7aBF2UwdCqDB1hoTRtQqNw==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.82.4.tgz",
+      "integrity": "sha512-2JCTqcpF+f2OghOpe/+x+JywfzDkrHdAqinPFWmK2ezNAU/qX0jBFaTETogPibFivxZJil37w9Yp6syX8rFUng==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6"
@@ -9336,19 +9329,19 @@
       }
     },
     "node_modules/metro-config": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.82.1.tgz",
-      "integrity": "sha512-+w3280sUdZmEDpmEhk66vfeWs8xKhogiPim+JT6AIhrTUS4exki+yFgXDdnBXrjvAvhxUtCZcoIueFKCC/mbZw==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.82.4.tgz",
+      "integrity": "sha512-Ki3Wumr3hKHGDS7RrHsygmmRNc/PCJrvkLn0+BWWxmbOmOcMMJDSmSI+WRlT8jd5VPZFxIi4wg+sAt5yBXAK0g==",
       "license": "MIT",
       "dependencies": {
         "connect": "^3.6.5",
         "cosmiconfig": "^5.0.5",
         "flow-enums-runtime": "^0.0.6",
         "jest-validate": "^29.7.0",
-        "metro": "0.82.1",
-        "metro-cache": "0.82.1",
-        "metro-core": "0.82.1",
-        "metro-runtime": "0.82.1"
+        "metro": "0.82.4",
+        "metro-cache": "0.82.4",
+        "metro-core": "0.82.4",
+        "metro-runtime": "0.82.4"
       },
       "engines": {
         "node": ">=18.18"
@@ -9427,23 +9420,23 @@
       }
     },
     "node_modules/metro-core": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.82.1.tgz",
-      "integrity": "sha512-C1a8lPGJPs6axj9q+qLSdzK98TYjjXV6nsGnTvYuSwwXAm5sS03ewZCDimRfzu1s58oR0O28QddBgxNtYpDnJg==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.82.4.tgz",
+      "integrity": "sha512-Xo4ozbxPg2vfgJGCgXZ8sVhC2M0lhTqD+tsKO2q9aelq/dCjnnSb26xZKcQO80CQOQUL7e3QWB7pLFGPjZm31A==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6",
         "lodash.throttle": "^4.1.1",
-        "metro-resolver": "0.82.1"
+        "metro-resolver": "0.82.4"
       },
       "engines": {
         "node": ">=18.18"
       }
     },
     "node_modules/metro-file-map": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-file-map/-/metro-file-map-0.82.1.tgz",
-      "integrity": "sha512-6RgYYrkswBCH4GwbLiK6QGzTjNnlCdU7BwwZlf+14ApjUlbr1oBkwmAa6lMfmqfZuh2H/ET8X950kJ8uZavJNA==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-file-map/-/metro-file-map-0.82.4.tgz",
+      "integrity": "sha512-eO7HD1O3aeNsbEe6NBZvx1lLJUrxgyATjnDmb7bm4eyF6yWOQot9XVtxTDLNifECuvsZ4jzRiTInrbmIHkTdGA==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.4.0",
@@ -9461,9 +9454,9 @@
       }
     },
     "node_modules/metro-minify-terser": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-minify-terser/-/metro-minify-terser-0.82.1.tgz",
-      "integrity": "sha512-3P2PY+9L9sKrlxWWAOb1Bi6HXFCdnevym1R/6stkev/kl1+khkrDs1Z40139fLXFZbn8FrvXe89sTFRC3vB+Nw==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-minify-terser/-/metro-minify-terser-0.82.4.tgz",
+      "integrity": "sha512-W79Mi6BUwWVaM8Mc5XepcqkG+TSsCyyo//dmTsgYfJcsmReQorRFodil3bbJInETvjzdnS1mCsUo9pllNjT1Hg==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6",
@@ -9474,9 +9467,9 @@
       }
     },
     "node_modules/metro-resolver": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.82.1.tgz",
-      "integrity": "sha512-TnHK2FRTq/KMRZTqUKRXGJ4NGwJEHrPuo60UPGMUHzAS9diI22oCQ8y9888saGiXE+gi0Iplv/6AUTISxDgXqA==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.82.4.tgz",
+      "integrity": "sha512-uWoHzOBGQTPT5PjippB8rRT3iI9CTgFA9tRiLMzrseA5o7YAlgvfTdY9vFk2qyk3lW3aQfFKWkmqENryPRpu+Q==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6"
@@ -9486,9 +9479,9 @@
       }
     },
     "node_modules/metro-runtime": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.82.1.tgz",
-      "integrity": "sha512-Xg7FccIHlNtI63RX0vKmIzXlM5eSq4mjMo0ALbxXpds/P4JVT0JeJW/BqwpncKabrpbZyvPmPguhd32TiMWHXg==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.82.4.tgz",
+      "integrity": "sha512-vVyFO7H+eLXRV2E7YAUYA7aMGBECGagqxmFvC2hmErS7oq90BbPVENfAHbUWq1vWH+MRiivoRxdxlN8gBoF/dw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
@@ -9499,9 +9492,9 @@
       }
     },
     "node_modules/metro-source-map": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.82.1.tgz",
-      "integrity": "sha512-uCf60ybpmPvkkqQpVWtPZFCIMBS1D9uQ4r2isbqWvDQ1FFTi3xrhT1Z35Dyg30RQV6638XJ4wZY+Dwh8bU9W8A==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.82.4.tgz",
+      "integrity": "sha512-9jzDQJ0FPas1FuQFtwmBHsez2BfhFNufMowbOMeG3ZaFvzeziE8A0aJwILDS3U+V5039ssCQFiQeqDgENWvquA==",
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.3",
@@ -9509,9 +9502,9 @@
         "@babel/types": "^7.25.2",
         "flow-enums-runtime": "^0.0.6",
         "invariant": "^2.2.4",
-        "metro-symbolicate": "0.82.1",
+        "metro-symbolicate": "0.82.4",
         "nullthrows": "^1.1.1",
-        "ob1": "0.82.1",
+        "ob1": "0.82.4",
         "source-map": "^0.5.6",
         "vlq": "^1.0.0"
       },
@@ -9529,14 +9522,14 @@
       }
     },
     "node_modules/metro-symbolicate": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.82.1.tgz",
-      "integrity": "sha512-UFofSe+y0tz+nQ5XOkgXOYu5xlbX/8jEvd2eSrd8SjAX7eAjbGwN0Kjji+87jSaMJIvRHkArVMWqwF6fZVq55g==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.82.4.tgz",
+      "integrity": "sha512-LwEwAtdsx7z8rYjxjpLWxuFa2U0J6TS6ljlQM4WAATKa4uzV8unmnRuN2iNBWTmRqgNR77mzmI2vhwD4QSCo+w==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6",
         "invariant": "^2.2.4",
-        "metro-source-map": "0.82.1",
+        "metro-source-map": "0.82.4",
         "nullthrows": "^1.1.1",
         "source-map": "^0.5.6",
         "vlq": "^1.0.0"
@@ -9558,9 +9551,9 @@
       }
     },
     "node_modules/metro-transform-plugins": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.82.1.tgz",
-      "integrity": "sha512-AHFattUD9tUjG2MFV4RgZRgZZNfdRVQ7X6+ORK3cqwiItMcY2mK7psC6G2zI3WOtbydBcu/xWTilmjl7krC7FQ==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.82.4.tgz",
+      "integrity": "sha512-NoWQRPHupVpnDgYguiEcm7YwDhnqW02iWWQjO2O8NsNP09rEMSq99nPjARWfukN7+KDh6YjLvTIN20mj3dk9kw==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
@@ -9575,9 +9568,9 @@
       }
     },
     "node_modules/metro-transform-worker": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.82.1.tgz",
-      "integrity": "sha512-2vaadziCaYPfPMnl3tuYimjR7Gmj5CVOcQh/bJniOiXWZ0b1v4JGcw6jOAWzQKgNJdrOq8lMfzdT3xJ/cn/m7g==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.82.4.tgz",
+      "integrity": "sha512-kPI7Ad/tdAnI9PY4T+2H0cdgGeSWWdiPRKuytI806UcN4VhFL6OmYa19/4abYVYF+Cd2jo57CDuwbaxRfmXDhw==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
@@ -9585,13 +9578,13 @@
         "@babel/parser": "^7.25.3",
         "@babel/types": "^7.25.2",
         "flow-enums-runtime": "^0.0.6",
-        "metro": "0.82.1",
-        "metro-babel-transformer": "0.82.1",
-        "metro-cache": "0.82.1",
-        "metro-cache-key": "0.82.1",
-        "metro-minify-terser": "0.82.1",
-        "metro-source-map": "0.82.1",
-        "metro-transform-plugins": "0.82.1",
+        "metro": "0.82.4",
+        "metro-babel-transformer": "0.82.4",
+        "metro-cache": "0.82.4",
+        "metro-cache-key": "0.82.4",
+        "metro-minify-terser": "0.82.4",
+        "metro-source-map": "0.82.4",
+        "metro-transform-plugins": "0.82.4",
         "nullthrows": "^1.1.1"
       },
       "engines": {
@@ -9817,9 +9810,9 @@
       "license": "MIT"
     },
     "node_modules/ob1": {
-      "version": "0.82.1",
-      "resolved": "https://registry.npmjs.org/ob1/-/ob1-0.82.1.tgz",
-      "integrity": "sha512-J4m1GAoMC0673H8LmVolj7ZERYEwJWRR4/A/M8ZB5iK9BiFLeAkjvny/VGk3XOYiMtnvq7TV6oc3MfDJ8uKpFw==",
+      "version": "0.82.4",
+      "resolved": "https://registry.npmjs.org/ob1/-/ob1-0.82.4.tgz",
+      "integrity": "sha512-n9S8e4l5TvkrequEAMDidl4yXesruWTNTzVkeaHSGywoTOIwTzZzKw7Z670H3eaXDZui5MJXjWGNzYowVZIxCA==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6"
@@ -10525,9 +10518,9 @@
       }
     },
     "node_modules/react": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
-      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10572,42 +10565,41 @@
       "license": "MIT"
     },
     "node_modules/react-native": {
-      "version": "0.79.3",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.79.3.tgz",
-      "integrity": "sha512-EzH1+9gzdyEo9zdP6u7Sh3Jtf5EOMwzy+TK65JysdlgAzfEVfq4mNeXcAZ6SmD+CW6M7ARJbvXLyTD0l2S5rpg==",
+      "version": "0.80.0",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.80.0.tgz",
+      "integrity": "sha512-b9K1ygb2MWCBtKAodKmE3UsbUuC29Pt4CrJMR0ocTA8k+8HJQTPleBPDNKL4/p0P01QO9aL/gZUddoxHempLow==",
       "license": "MIT",
       "dependencies": {
         "@jest/create-cache-key-function": "^29.7.0",
-        "@react-native/assets-registry": "0.79.3",
-        "@react-native/codegen": "0.79.3",
-        "@react-native/community-cli-plugin": "0.79.3",
-        "@react-native/gradle-plugin": "0.79.3",
-        "@react-native/js-polyfills": "0.79.3",
-        "@react-native/normalize-colors": "0.79.3",
-        "@react-native/virtualized-lists": "0.79.3",
+        "@react-native/assets-registry": "0.80.0",
+        "@react-native/codegen": "0.80.0",
+        "@react-native/community-cli-plugin": "0.80.0",
+        "@react-native/gradle-plugin": "0.80.0",
+        "@react-native/js-polyfills": "0.80.0",
+        "@react-native/normalize-colors": "0.80.0",
+        "@react-native/virtualized-lists": "0.80.0",
         "abort-controller": "^3.0.0",
         "anser": "^1.4.9",
         "ansi-regex": "^5.0.0",
         "babel-jest": "^29.7.0",
-        "babel-plugin-syntax-hermes-parser": "0.25.1",
+        "babel-plugin-syntax-hermes-parser": "0.28.1",
         "base64-js": "^1.5.1",
         "chalk": "^4.0.0",
         "commander": "^12.0.0",
-        "event-target-shim": "^5.0.1",
         "flow-enums-runtime": "^0.0.6",
         "glob": "^7.1.1",
         "invariant": "^2.2.4",
         "jest-environment-node": "^29.7.0",
         "memoize-one": "^5.0.0",
-        "metro-runtime": "^0.82.0",
-        "metro-source-map": "^0.82.0",
+        "metro-runtime": "^0.82.2",
+        "metro-source-map": "^0.82.2",
         "nullthrows": "^1.1.1",
         "pretty-format": "^29.7.0",
         "promise": "^8.3.0",
         "react-devtools-core": "^6.1.1",
         "react-refresh": "^0.14.0",
         "regenerator-runtime": "^0.13.2",
-        "scheduler": "0.25.0",
+        "scheduler": "0.26.0",
         "semver": "^7.1.3",
         "stacktrace-parser": "^0.1.10",
         "whatwg-fetch": "^3.0.0",
@@ -10621,8 +10613,8 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "@types/react": "^19.0.0",
-        "react": "^19.0.0"
+        "@types/react": "^19.1.0",
+        "react": "^19.1.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -10631,9 +10623,9 @@
       }
     },
     "node_modules/react-native-gesture-handler": {
-      "version": "2.25.0",
-      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.25.0.tgz",
-      "integrity": "sha512-NPjJi6mislXxvjxQPU9IYwBjb1Uejp8GvAbE1Lhh+xMIMEvmgAvVIp5cz1P+xAbV6uYcRRArm278+tEInGOqWg==",
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.26.0.tgz",
+      "integrity": "sha512-pfE1j9Vzu0qpWj/Aq1IK+cYnougN69mCKvWuq1rdNjH2zs1WIszF0Mum9/oGQTemgjyc/JgiqOOTgwcleAMAGg==",
       "license": "MIT",
       "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
@@ -10656,9 +10648,9 @@
       }
     },
     "node_modules/react-native-reanimated": {
-      "version": "3.17.5",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.17.5.tgz",
-      "integrity": "sha512-SxBK7wQfJ4UoWoJqQnmIC7ZjuNgVb9rcY5Xc67upXAFKftWg0rnkknTw6vgwnjRcvYThrjzUVti66XoZdDJGtw==",
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.18.0.tgz",
+      "integrity": "sha512-eVcNcqeOkMW+BUWAHdtvN3FKgC8J8wiEJkX6bNGGQaLS7m7e4amTfjIcqf/Ta+lerZLurmDaQ0lICI1CKPrb1Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
@@ -10749,17 +10741,17 @@
       }
     },
     "node_modules/react-test-renderer": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-19.0.0.tgz",
-      "integrity": "sha512-oX5u9rOQlHzqrE/64CNr0HB0uWxkCQmZNSfozlYvwE71TLVgeZxVf0IjouGEr1v7r1kcDifdAJBeOhdhxsG/DA==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-19.1.0.tgz",
+      "integrity": "sha512-jXkSl3CpvPYEF+p/eGDLB4sPoDX8pKkYvRl9+rR8HxLY0X04vW7hCm1/0zHoUSjPZ3bDa+wXWNTDVIw/R8aDVw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "react-is": "^19.0.0",
-        "scheduler": "^0.25.0"
+        "react-is": "^19.1.0",
+        "scheduler": "^0.26.0"
       },
       "peerDependencies": {
-        "react": "^19.0.0"
+        "react": "^19.1.0"
       }
     },
     "node_modules/react-test-renderer/node_modules/react-is": {
@@ -11138,9 +11130,9 @@
       "license": "MIT"
     },
     "node_modules/scheduler": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
-      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -11857,13 +11849,13 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.39.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
-      "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.42.0.tgz",
+      "integrity": "sha512-UYCvU9YQW2f/Vwl+P0GfhxJxbUGLwd+5QrrGgLajzWAtC/23AX0vcise32kkP7Eu0Wu9VlzzHAXkLObgjQfFlQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
+        "acorn": "^8.14.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -11905,9 +11897,9 @@
       }
     },
     "node_modules/test-exclude/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -12541,16 +12533,16 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
-      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 14.6"
       }
     },
     "node_modules/yargs": {
diff --git a/ExampleLatest/package.json b/ExampleLatest/package.json
index 2c08e5a..d76da4a 100755
--- a/ExampleLatest/package.json
+++ b/ExampleLatest/package.json
@@ -10,31 +10,31 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "19.0.0",
-    "react-native": "0.79.3",
-    "react-native-gesture-handler": "^2.25.0",
-    "react-native-reanimated": "^3.17.5"
+    "react": "19.1.0",
+    "react-native": "0.80.0",
+    "react-native-gesture-handler": "^2.26.0",
+    "react-native-reanimated": "^3.18.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "18.0.0",
-    "@react-native-community/cli-platform-android": "18.0.0",
-    "@react-native-community/cli-platform-ios": "18.0.0",
-    "@react-native/babel-preset": "0.79.3",
-    "@react-native/eslint-config": "0.79.2",
-    "@react-native/metro-config": "0.79.3",
-    "@react-native/typescript-config": "0.79.2",
+    "@react-native-community/cli": "19.0.0",
+    "@react-native-community/cli-platform-android": "19.0.0",
+    "@react-native-community/cli-platform-ios": "19.0.0",
+    "@react-native/babel-preset": "0.80.0",
+    "@react-native/eslint-config": "0.80.0",
+    "@react-native/metro-config": "0.80.0",
+    "@react-native/typescript-config": "0.80.0",
     "@types/jest": "^29.5.13",
-    "@types/react": "^19.0.0",
-    "@types/react-test-renderer": "^19.0.0",
+    "@types/react": "^19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.6",
     "jest": "^29.6.3",
     "prettier": "3.5.3",
-    "react-test-renderer": "19.0.0",
+    "react-test-renderer": "19.1.0",
     "typescript": "5.0.4"
   },
   "codegenConfig": {
diff --git a/ExampleLatest/tsconfig.json b/ExampleLatest/tsconfig.json
index f23b1f0..9eaa362 100755
--- a/ExampleLatest/tsconfig.json
+++ b/ExampleLatest/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json",
+  "extends": "@react-native/typescript-config",
   "compilerOptions": {
     "paths": {
       "baseUrl": ["."],
diff --git a/ExamplesShared/components/colorPickerStyle.ts b/ExamplesShared/components/colorPickerStyle.ts
index b6bd0f4..37742fa 100644
--- a/ExamplesShared/components/colorPickerStyle.ts
+++ b/ExamplesShared/components/colorPickerStyle.ts
@@ -13,7 +13,7 @@ export const colorPickerStyle = StyleSheet.create({
   pickerContainer: {
     alignSelf: 'center',
     width: 300,
-    backgroundColor: '#fff',
+    backgroundColor: '#eee',
     padding: 20,
     borderRadius: 20,
     shadowColor: '#000',

From 95e6fe96ca68478d407f1e1c7452109c6d5b9ed3 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 24 Jul 2025 11:52:41 +0300
Subject: [PATCH 2/9] chore: update version to 4.1.0 in package-lock.json

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b625edc..4ebcf1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reanimated-color-picker",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reanimated-color-picker",
-      "version": "4.0.1",
+      "version": "4.1.0",
       "license": "MIT",
       "devDependencies": {
         "@babel/cli": "^7.23.4",

From d2427475fe102fcbc425ddd9cef04567e0b77a25 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 24 Jul 2025 12:30:17 +0300
Subject: [PATCH 3/9] chore: update `ExampleLatest` dependencies to latest
 versions

- bump react-native from 0.80.0 to 0.80.1
- update react-native-gesture-handler from 2.26.0 to 2.27.2
- upgrade react-native-reanimated from 3.18.0 to 4.0.0
- add react-native-worklets as a new dependency
---
 ExampleLatest/babel.config.js   |   2 +-
 ExampleLatest/package-lock.json | 731 +++++++++++++++++++++-----------
 ExampleLatest/package.json      |  17 +-
 3 files changed, 486 insertions(+), 264 deletions(-)

diff --git a/ExampleLatest/babel.config.js b/ExampleLatest/babel.config.js
index 7ecb98a..f3b7e43 100755
--- a/ExampleLatest/babel.config.js
+++ b/ExampleLatest/babel.config.js
@@ -18,6 +18,6 @@ module.exports = {
         },
       },
     ],
-    'react-native-reanimated/plugin',
+    'react-native-worklets/plugin',
   ],
 };
diff --git a/ExampleLatest/package-lock.json b/ExampleLatest/package-lock.json
index 10db774..2305d8f 100755
--- a/ExampleLatest/package-lock.json
+++ b/ExampleLatest/package-lock.json
@@ -9,21 +9,22 @@
       "version": "0.0.1",
       "dependencies": {
         "react": "19.1.0",
-        "react-native": "0.80.0",
-        "react-native-gesture-handler": "^2.26.0",
-        "react-native-reanimated": "^3.18.0"
+        "react-native": "0.80.1",
+        "react-native-gesture-handler": "^2.27.2",
+        "react-native-reanimated": "^4.0.0",
+        "react-native-worklets": "^0.4.0"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
         "@babel/preset-env": "^7.25.3",
         "@babel/runtime": "^7.25.0",
-        "@react-native-community/cli": "19.0.0",
+        "@react-native-community/cli": "19.1.0",
         "@react-native-community/cli-platform-android": "19.0.0",
         "@react-native-community/cli-platform-ios": "19.0.0",
-        "@react-native/babel-preset": "0.80.0",
-        "@react-native/eslint-config": "0.80.0",
-        "@react-native/metro-config": "0.80.0",
-        "@react-native/typescript-config": "0.80.0",
+        "@react-native/babel-preset": "0.80.1",
+        "@react-native/eslint-config": "0.80.1",
+        "@react-native/metro-config": "0.80.1",
+        "@react-native/typescript-config": "0.80.1",
         "@types/jest": "^29.5.13",
         "@types/react": "^19.1.0",
         "@types/react-test-renderer": "^19.1.0",
@@ -125,15 +126,15 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.27.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
-      "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.0.tgz",
+      "integrity": "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.27.5",
-        "@babel/types": "^7.27.3",
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25",
+        "@babel/parser": "^7.28.0",
+        "@babel/types": "^7.28.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
       },
       "engines": {
@@ -141,12 +142,12 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
-      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.9"
+        "@babel/types": "^7.27.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -169,17 +170,17 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.0.tgz",
-      "integrity": "sha512-vSGCvMecvFCd/BdpGlhpXYNhhC4ccxyvQWpbGL4CWbvfEoLFWUZuSuf7s9Aw70flgQF+6vptvgK2IfOnKlRmBg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz",
+      "integrity": "sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.25.9",
-        "@babel/helper-member-expression-to-functions": "^7.25.9",
-        "@babel/helper-optimise-call-expression": "^7.25.9",
-        "@babel/helper-replace-supers": "^7.26.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
-        "@babel/traverse": "^7.27.0",
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.27.1",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -223,41 +224,50 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
-      "integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
+      "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
-      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
+      "integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9",
-        "@babel/traverse": "^7.25.9"
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.27.3"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -267,21 +277,21 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz",
-      "integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.9"
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
-      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -306,14 +316,14 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz",
-      "integrity": "sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.25.9",
-        "@babel/helper-optimise-call-expression": "^7.25.9",
-        "@babel/traverse": "^7.26.5"
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -323,13 +333,13 @@
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
-      "integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -354,9 +364,9 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -391,12 +401,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
-      "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
+      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.3"
+        "@babel/types": "^7.28.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -670,12 +680,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
-      "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9"
+        "@babel/helper-plugin-utils": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -787,12 +797,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
-      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9"
+        "@babel/helper-plugin-utils": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1219,13 +1229,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz",
-      "integrity": "sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.27.1.tgz",
+      "integrity": "sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.26.0",
-        "@babel/helper-plugin-utils": "^7.25.9"
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1687,16 +1697,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.27.0.tgz",
-      "integrity": "sha512-fRGGjO2UEGPjvEcyAZXRXAS8AfdaQoq7HnxAbJoAoW10B9xOKesmmndJv+Sym2a+9FHWZ9KbyyLCe9s0Sn5jtg==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.0.tgz",
+      "integrity": "sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.25.9",
-        "@babel/helper-create-class-features-plugin": "^7.27.0",
-        "@babel/helper-plugin-utils": "^7.26.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
-        "@babel/plugin-syntax-typescript": "^7.25.9"
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1871,16 +1881,16 @@
       }
     },
     "node_modules/@babel/preset-typescript": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.0.tgz",
-      "integrity": "sha512-vxaPFfJtHhgeOVXRKuHpHPAOgymmy8V8I65T1q53R7GCZlefKeCaTyDs3zOPHTTbmquvNlQYC5klEvWsBAtrBQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.1.tgz",
+      "integrity": "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.26.5",
-        "@babel/helper-validator-option": "^7.25.9",
-        "@babel/plugin-syntax-jsx": "^7.25.9",
-        "@babel/plugin-transform-modules-commonjs": "^7.26.3",
-        "@babel/plugin-transform-typescript": "^7.27.0"
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+        "@babel/plugin-transform-typescript": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1916,18 +1926,18 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
-      "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.0.tgz",
+      "integrity": "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.27.0",
-        "@babel/parser": "^7.27.0",
-        "@babel/template": "^7.27.0",
-        "@babel/types": "^7.27.0",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.0",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.0",
+        "debug": "^4.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1953,9 +1963,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
-      "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
+      "version": "7.28.1",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
+      "integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -2670,17 +2680,13 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -2692,15 +2698,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/source-map": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
@@ -2718,9 +2715,9 @@
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "version": "0.3.29",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2789,18 +2786,18 @@
       }
     },
     "node_modules/@react-native-community/cli": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-19.0.0.tgz",
-      "integrity": "sha512-a7lAt0mACJ2jsCgDIFWpsCaqWxWoRTZwRMD5HOS3RYOYEUBzp4bfiQdjLUmrx5vF76KvcD0Q1YigrAVrEbSmbw==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-19.1.0.tgz",
+      "integrity": "sha512-L9GL4YtgvoaS7DXcBuHZ1WtH+D2wV6G33THpxVmBEaJQp/vgRQg9Z4bb+9Mj/rBcATgbUu4Sd7H3xJE2qCd93w==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-clean": "19.0.0",
-        "@react-native-community/cli-config": "19.0.0",
-        "@react-native-community/cli-doctor": "19.0.0",
-        "@react-native-community/cli-server-api": "19.0.0",
-        "@react-native-community/cli-tools": "19.0.0",
-        "@react-native-community/cli-types": "19.0.0",
+        "@react-native-community/cli-clean": "19.1.0",
+        "@react-native-community/cli-config": "19.1.0",
+        "@react-native-community/cli-doctor": "19.1.0",
+        "@react-native-community/cli-server-api": "19.1.0",
+        "@react-native-community/cli-tools": "19.1.0",
+        "@react-native-community/cli-types": "19.1.0",
         "chalk": "^4.1.2",
         "commander": "^9.4.1",
         "deepmerge": "^4.3.0",
@@ -2819,26 +2816,58 @@
       }
     },
     "node_modules/@react-native-community/cli-clean": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-19.0.0.tgz",
-      "integrity": "sha512-Br+bxxEKXpikzlBLeAv3Bh1DRGrveJmULEG6Q9XPHzPOtRZcRlcDcBidjVwu8XGJdYiplvFdK6cC2sxCM2Mbvw==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-19.1.0.tgz",
+      "integrity": "sha512-0X5/rscu0UjgQ3lc4sY5HmL/Z6FiaFANwsBZBnbaBIANzf/pnLIiry+YkhajMpstmnu8i+xZav+F3/uXqZNYIw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.0.0",
+        "@react-native-community/cli-tools": "19.1.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
         "fast-glob": "^3.3.2"
       }
     },
+    "node_modules/@react-native-community/cli-clean/node_modules/@react-native-community/cli-tools": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
+      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vscode/sudo-prompt": "^9.0.0",
+        "appdirsjs": "^1.2.4",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "find-up": "^5.0.0",
+        "launch-editor": "^2.9.1",
+        "mime": "^2.4.1",
+        "ora": "^5.4.1",
+        "prompts": "^2.4.2",
+        "semver": "^7.5.2"
+      }
+    },
+    "node_modules/@react-native-community/cli-clean/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@react-native-community/cli-config": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-19.0.0.tgz",
-      "integrity": "sha512-HyZOVqnUIs5WlsARqEG/um9cz+XJNIalCkrUeb5MLpxejnWFVLc3hiYoFZhb6KHKj8edg9TotOM0VbzURSYAfA==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-19.1.0.tgz",
+      "integrity": "sha512-OHcXRwjaN6a6MVc8Y/vn9sY2xMj1eXO86GogzV0fR3Pk3Fz1Kj5lerTjY9jKkskdRbpetfpAibeSgqxJ4I838g==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.0.0",
+        "@react-native-community/cli-tools": "19.1.0",
         "chalk": "^4.1.2",
         "cosmiconfig": "^9.0.0",
         "deepmerge": "^4.3.0",
@@ -2850,7 +2879,7 @@
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-android/-/cli-config-android-19.0.0.tgz",
       "integrity": "sha512-TDd6qdjVjGKuLUEJdPtBJIUOZAJ+oLLiejdrVsfJplJWlFnJVmUAv2M7yT69U+5kh/fGaaHGtsyDekK0B4Gtbg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@react-native-community/cli-tools": "19.0.0",
@@ -2863,7 +2892,7 @@
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-apple/-/cli-config-apple-19.0.0.tgz",
       "integrity": "sha512-apIOz46ZseD/eL4LjOTR3UH6UEXSj6bHK3SPA6JmcxY8q8brnAjUxzNC7FGeKBcUbeLbRyXplIuxuOrBpcX3QQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@react-native-community/cli-tools": "19.0.0",
@@ -2872,18 +2901,50 @@
         "fast-glob": "^3.3.2"
       }
     },
+    "node_modules/@react-native-community/cli-config/node_modules/@react-native-community/cli-tools": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
+      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vscode/sudo-prompt": "^9.0.0",
+        "appdirsjs": "^1.2.4",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "find-up": "^5.0.0",
+        "launch-editor": "^2.9.1",
+        "mime": "^2.4.1",
+        "ora": "^5.4.1",
+        "prompts": "^2.4.2",
+        "semver": "^7.5.2"
+      }
+    },
+    "node_modules/@react-native-community/cli-config/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@react-native-community/cli-doctor": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-19.0.0.tgz",
-      "integrity": "sha512-z+fhaQjS0zvWnJ8+gZStSZS2hsF1Lge3g8OthBrzoBPlkmpxeID/H2dEZOY7W9D7ngY/CaCmpQxLzaJVOjlrvw==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-19.1.0.tgz",
+      "integrity": "sha512-HtwFDTgJfw6md86O2a30OxodU6hoZTU8KGq8p1tMa55KD7DmHCM3F+MENOuxIjVjcmcFnY5WA5deHDBLHmH9uw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-config": "19.0.0",
-        "@react-native-community/cli-platform-android": "19.0.0",
-        "@react-native-community/cli-platform-apple": "19.0.0",
-        "@react-native-community/cli-platform-ios": "19.0.0",
-        "@react-native-community/cli-tools": "19.0.0",
+        "@react-native-community/cli-config": "19.1.0",
+        "@react-native-community/cli-platform-android": "19.1.0",
+        "@react-native-community/cli-platform-apple": "19.1.0",
+        "@react-native-community/cli-platform-ios": "19.1.0",
+        "@react-native-community/cli-tools": "19.1.0",
         "chalk": "^4.1.2",
         "command-exists": "^1.2.8",
         "deepmerge": "^4.3.0",
@@ -2896,6 +2957,89 @@
         "yaml": "^2.2.1"
       }
     },
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-config-android": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-android/-/cli-config-android-19.1.0.tgz",
+      "integrity": "sha512-IlIs9iawZvvzrXsKrHGS+iGt9ixfcwmtXRSdxygQMX3po+H2T1PJnnh+Shum5ja9hw3R+cqTb4kj3YsaFo4VTQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-community/cli-tools": "19.1.0",
+        "chalk": "^4.1.2",
+        "fast-glob": "^3.3.2",
+        "fast-xml-parser": "^4.4.1"
+      }
+    },
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-config-apple": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-apple/-/cli-config-apple-19.1.0.tgz",
+      "integrity": "sha512-2nJtMgWfW+YDhVcwspo3Pnnaqo/QMFUBFK1jUhI3pD5XLXnoY3jq1kb43o1Nvj1ADLewGqZnDqcSxG0Pd7P98Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-community/cli-tools": "19.1.0",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "fast-glob": "^3.3.2"
+      }
+    },
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-android": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-19.1.0.tgz",
+      "integrity": "sha512-8XSMoCDvjIOxyutSHOCdoYonfXWQUL+FtLu3Uqm6baXj5eInqDmc0ws4CbUgvg5sGTo484Lez8aTpQwThf3YTA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-community/cli-config-android": "19.1.0",
+        "@react-native-community/cli-tools": "19.1.0",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "logkitty": "^0.7.1"
+      }
+    },
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-apple": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-apple/-/cli-platform-apple-19.1.0.tgz",
+      "integrity": "sha512-7sEZbEfhJYRo2SSLC2qT+2x494/CoIm7h4/jmy9S+AJ5+ImZQBCkSqAkX9yO79eVtVH9FDJjdrso4rn1Ts4r1Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-community/cli-config-apple": "19.1.0",
+        "@react-native-community/cli-tools": "19.1.0",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "fast-xml-parser": "^4.4.1"
+      }
+    },
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-ios": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-19.1.0.tgz",
+      "integrity": "sha512-z85zYgFK62EX2HclMvLD3yaYWgW57SMT4Wv6O5wyFCWvv9LP97vm0aTORgmCdcqlov2RV7dxhLGQF6t2PTqGxA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-community/cli-platform-apple": "19.1.0"
+      }
+    },
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-tools": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
+      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vscode/sudo-prompt": "^9.0.0",
+        "appdirsjs": "^1.2.4",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "find-up": "^5.0.0",
+        "launch-editor": "^2.9.1",
+        "mime": "^2.4.1",
+        "ora": "^5.4.1",
+        "prompts": "^2.4.2",
+        "semver": "^7.5.2"
+      }
+    },
     "node_modules/@react-native-community/cli-doctor/node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -2913,7 +3057,7 @@
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-19.0.0.tgz",
       "integrity": "sha512-oY5ztWIZxa7EWiQHNG5RXhx/8DA7t4EPiu0qizuz+tV6sAiDcnPQv4hRYF3+wyeIXk/NJjxnYQe9xeQ0Yt1X4A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@react-native-community/cli-config-android": "19.0.0",
@@ -2927,7 +3071,7 @@
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-apple/-/cli-platform-apple-19.0.0.tgz",
       "integrity": "sha512-nSuPAaGSDxhsIUzr3JSa9AaQ3f5si6S2+J7FJxTLGuJ2hXrbDXtwOUmtmln09U8cg8Yewa9zh6rjTLVSsFvbAA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@react-native-community/cli-config-apple": "19.0.0",
@@ -2941,20 +3085,20 @@
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-19.0.0.tgz",
       "integrity": "sha512-oi8p8ccbnk9VYMAjqowB2zicUbCyl/DwD0mdTMivX/YQNIflAIFvzq6p76EP4J3E0/IPu9S0IpgVPCBdTyiSlg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@react-native-community/cli-platform-apple": "19.0.0"
       }
     },
     "node_modules/@react-native-community/cli-server-api": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-19.0.0.tgz",
-      "integrity": "sha512-udcSGC9hrWOGqB4S5L8cH8wgckbrZfc0iF6bH2b2/QalJ3vD016WDoZ6R6fyiyB/u8YsFJ3bnb6tk0tKInKWjg==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-19.1.0.tgz",
+      "integrity": "sha512-YvFS8aTHfs+vnxEBFnBThkwzDm60B6OyajiYAn4c+m10vsEnExrurMWdmANMyKG0dM2LjADqkFvqUARtO/+1jQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.0.0",
+        "@react-native-community/cli-tools": "19.1.0",
         "body-parser": "^1.20.3",
         "compression": "^1.7.1",
         "connect": "^3.6.5",
@@ -2966,11 +3110,43 @@
         "ws": "^6.2.3"
       }
     },
+    "node_modules/@react-native-community/cli-server-api/node_modules/@react-native-community/cli-tools": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
+      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vscode/sudo-prompt": "^9.0.0",
+        "appdirsjs": "^1.2.4",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "find-up": "^5.0.0",
+        "launch-editor": "^2.9.1",
+        "mime": "^2.4.1",
+        "ora": "^5.4.1",
+        "prompts": "^2.4.2",
+        "semver": "^7.5.2"
+      }
+    },
+    "node_modules/@react-native-community/cli-server-api/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@react-native-community/cli-tools": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.0.0.tgz",
       "integrity": "sha512-O6qGE+1xZOOJY43CcjL3E6xtVx5m6TDEVzysIJ0jHjjE1QqYijx6W8VuWebmA08MfX4JCE2jzUrwx2Ns2GguGg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vscode/sudo-prompt": "^9.0.0",
@@ -2989,7 +3165,7 @@
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
       "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -2999,15 +3175,34 @@
       }
     },
     "node_modules/@react-native-community/cli-types": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-19.0.0.tgz",
-      "integrity": "sha512-fpnpy6iLX9Uohh83vWRsfi3wMfFT8C8TiKrMiln2e9rnoyZwZqm3gnz8pDUnldmFkaOjKxW0FAiRXxwhJGebsw==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-19.1.0.tgz",
+      "integrity": "sha512-MEF7WBG17hQOusrphgEjbojqAoGkIwtYg0HhcJ+/MRLMQg6jty6K98gr6VYmjphXGkAPx1T/AN8/DmWmlw/atw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "joi": "^17.2.1"
       }
     },
+    "node_modules/@react-native-community/cli/node_modules/@react-native-community/cli-tools": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
+      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vscode/sudo-prompt": "^9.0.0",
+        "appdirsjs": "^1.2.4",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "find-up": "^5.0.0",
+        "launch-editor": "^2.9.1",
+        "mime": "^2.4.1",
+        "ora": "^5.4.1",
+        "prompts": "^2.4.2",
+        "semver": "^7.5.2"
+      }
+    },
     "node_modules/@react-native-community/cli/node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -3022,32 +3217,32 @@
       }
     },
     "node_modules/@react-native/assets-registry": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.80.0.tgz",
-      "integrity": "sha512-MlScsKAz99zoYghe5Rf5mUqsqz2rMB02640NxtPtBMSHNdGxxRlWu/pp1bFexDa1DYJwyIjnLgt3Z/Y90ikHfw==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.80.1.tgz",
+      "integrity": "sha512-T3C8OthBHfpFIjaGFa0q6rc58T2AsJ+jKAa+qPquMKBtYGJMc75WgNbk/ZbPBxeity6FxZsmg3bzoUaWQo4Mow==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/babel-plugin-codegen": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.80.0.tgz",
-      "integrity": "sha512-LXd766LHCR/79WmhIg4zUB9jRosgw8xGJ1QnYOoef1rA7vCdubC23nhUxF+PJdfTdAl1cqX4u1dhZcjg6yXjRg==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.80.1.tgz",
+      "integrity": "sha512-A0xTmTiHamvKL2AtkUQqT+5WcLMFLig/62STT5Aa/CyxfqpkmSyKbHwSUEiMZ744SARG8JEG+D++dgy6steqag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.3",
-        "@react-native/codegen": "0.80.0"
+        "@react-native/codegen": "0.80.1"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/babel-preset": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.80.0.tgz",
-      "integrity": "sha512-ZgwbSOUPNKpIsZ6E0y3bncahh2vBf5V1URNV0tr9PBtu/LbGJ12nBKSH7gqrFdRzfEwKlhc0vP8p1oJt+A5mpw==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.80.1.tgz",
+      "integrity": "sha512-SItN0D3ETd9mHahkyLDq3eOg2MydSN1Bod2WEhnVfVxmkK1YFmXtS2MvW+/ruce5kW6V5zwyGR3KIi4DjUMC4A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3092,7 +3287,7 @@
         "@babel/plugin-transform-typescript": "^7.25.2",
         "@babel/plugin-transform-unicode-regex": "^7.24.7",
         "@babel/template": "^7.25.0",
-        "@react-native/babel-plugin-codegen": "0.80.0",
+        "@react-native/babel-plugin-codegen": "0.80.1",
         "babel-plugin-syntax-hermes-parser": "0.28.1",
         "babel-plugin-transform-flow-enums": "^0.0.2",
         "react-refresh": "^0.14.0"
@@ -3105,9 +3300,9 @@
       }
     },
     "node_modules/@react-native/codegen": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.80.0.tgz",
-      "integrity": "sha512-X9TsPgytoUkNrQjzAZh4dXa4AuouvYT0NzYyvnjw1ry4LESCZtKba+eY4x3+M30WPR52zjgu+UFL//14BSdCCA==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.80.1.tgz",
+      "integrity": "sha512-CFhOYkXmExOeZDZnd0UJCK9A4AOSAyFBoVgmFZsf+fv8JqnwIx/SD6RxY1+Jzz9EWPQcH2v+WgwPP/4qVmjtKw==",
       "license": "MIT",
       "dependencies": {
         "glob": "^7.1.1",
@@ -3124,12 +3319,12 @@
       }
     },
     "node_modules/@react-native/community-cli-plugin": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/community-cli-plugin/-/community-cli-plugin-0.80.0.tgz",
-      "integrity": "sha512-uadfVvzZfz5tGpqwslL12i+rELK9m6cLhtqICX0JQvS7Bu12PJwrozhKzEzIYwN9i3wl2dWrKDUr08izt7S9Iw==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/community-cli-plugin/-/community-cli-plugin-0.80.1.tgz",
+      "integrity": "sha512-M1lzLvZUz6zb6rn4Oyc3HUY72wye8mtdm1bJSYIBoK96ejMvQGoM+Lih/6k3c1xL7LSruNHfsEXXePLjCbhE8Q==",
       "license": "MIT",
       "dependencies": {
-        "@react-native/dev-middleware": "0.80.0",
+        "@react-native/dev-middleware": "0.80.1",
         "chalk": "^4.0.0",
         "debug": "^4.4.0",
         "invariant": "^2.2.4",
@@ -3163,22 +3358,22 @@
       }
     },
     "node_modules/@react-native/debugger-frontend": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.80.0.tgz",
-      "integrity": "sha512-lpu9Z3xtKUaKFvEcm5HSgo1KGfkDa/W3oZHn22Zy0WQ9MiOu2/ar1txgd1wjkoNiK/NethKcRdCN7mqnc6y2mA==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.80.1.tgz",
+      "integrity": "sha512-5dQJdX1ZS4dINNw51KNsDIL+A06sZQd2hqN2Pldq5SavxAwEJh5NxAx7K+lutKhwp1By5gxd6/9ruVt+9NCvKA==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/dev-middleware": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/dev-middleware/-/dev-middleware-0.80.0.tgz",
-      "integrity": "sha512-lLyTnJ687A5jF3fn8yR/undlCis3FG+N/apQ+Q0Lcl+GV6FsZs0U5H28YmL6lZtjOj4TLek6uGPMPmZasHx7cQ==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/dev-middleware/-/dev-middleware-0.80.1.tgz",
+      "integrity": "sha512-EBnZ3s6+hGAlUggDvo9uI37Xh0vG55H2rr3A6l6ww7+sgNuUz+wEJ63mGINiU6DwzQSgr6av7rjrVERxKH6vxg==",
       "license": "MIT",
       "dependencies": {
         "@isaacs/ttlcache": "^1.4.1",
-        "@react-native/debugger-frontend": "0.80.0",
+        "@react-native/debugger-frontend": "0.80.1",
         "chrome-launcher": "^0.15.2",
         "chromium-edge-launcher": "^0.2.0",
         "connect": "^3.6.5",
@@ -3222,15 +3417,15 @@
       }
     },
     "node_modules/@react-native/eslint-config": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/eslint-config/-/eslint-config-0.80.0.tgz",
-      "integrity": "sha512-bd0GOcG++qIKzEngeyeNrGaDWWHtB8CpC5zbpYho2TTWpJDxBRcoPAzBdpPkxQtpBMdXyYRZMENRp6Khrg0YYQ==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/eslint-config/-/eslint-config-0.80.1.tgz",
+      "integrity": "sha512-bGtMGDfLDLZ5WWIo+OjfnDo4s1TaKfD0W4OoqeqmIcAkbVYBvTLGcjBW4MsMDO5JVebErUMGa+vE0z7p3B0Nsg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
-        "@react-native/eslint-plugin": "0.80.0",
+        "@react-native/eslint-plugin": "0.80.1",
         "@typescript-eslint/eslint-plugin": "^7.1.1",
         "@typescript-eslint/parser": "^7.1.1",
         "eslint-config-prettier": "^8.5.0",
@@ -3263,9 +3458,9 @@
       }
     },
     "node_modules/@react-native/eslint-plugin": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/eslint-plugin/-/eslint-plugin-0.80.0.tgz",
-      "integrity": "sha512-4kFD3M/zGqKdKyeevnTdhgAhNCj89VflDfv2wElo4jOb07xkR6VlEymv/6mZX3tdP/N5ukP2SZB+FDZH1GxBTg==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/eslint-plugin/-/eslint-plugin-0.80.1.tgz",
+      "integrity": "sha512-e3vLbjiRqJWGm5kVvVfboJwPHOE0ut5bSy/630PQSxpxN1BAZMR2E+pX+s1FasP2KmtOQ3qsIOB54jCA9/xfxA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3273,32 +3468,32 @@
       }
     },
     "node_modules/@react-native/gradle-plugin": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/gradle-plugin/-/gradle-plugin-0.80.0.tgz",
-      "integrity": "sha512-drmS68rabSMOuDD+YsAY2luNT8br82ycodSDORDqAg7yWQcieHMp4ZUOcdOi5iW+JCqobablT/b6qxcrBg+RaA==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/gradle-plugin/-/gradle-plugin-0.80.1.tgz",
+      "integrity": "sha512-6B7bWUk27ne/g/wCgFF4MZFi5iy6hWOcBffqETJoab6WURMyZ6nU+EAMn+Vjhl5ishhUvTVSrJ/1uqrxxYQO2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/js-polyfills": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.80.0.tgz",
-      "integrity": "sha512-dMX7IcBuwghySTgIeK8q03tYz/epg5ScGmJEfBQAciuhzMDMV1LBR/9wwdgD73EXM/133yC5A+TlHb3KQil4Ew==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.80.1.tgz",
+      "integrity": "sha512-cWd5Cd2kBMRM37dor8N9Ck4X0NzjYM3m8K6HtjodcOdOvzpXfrfhhM56jdseTl5Z4iB+pohzPJpSmFJctmuIpA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@react-native/metro-babel-transformer": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.80.0.tgz",
-      "integrity": "sha512-5TldnaJE15IUNnZhjAelRz4+6qATlSO9yuzLqN1Y47qfJrAl/2lrI4KdSjFfvUaWrhezi94Aly1OKSJm9fjrXg==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.80.1.tgz",
+      "integrity": "sha512-pHKwMfoSoScWHmYAd8xSa2wyMq0GESibP1/yeFjtkqaMQKNuEcfKdrXrTrrmMje6psaB17UizvHBevsnEUWWFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
-        "@react-native/babel-preset": "0.80.0",
+        "@react-native/babel-preset": "0.80.1",
         "hermes-parser": "0.28.1",
         "nullthrows": "^1.1.1"
       },
@@ -3310,14 +3505,14 @@
       }
     },
     "node_modules/@react-native/metro-config": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.80.0.tgz",
-      "integrity": "sha512-LJ1ZC9vs/B3wez6BsOIgJ3iw7N4QalMpiT/fb5b66L4vHUGqVucOWNUwpxbDb1m1/wlhTa8AljiAdjt401sFjA==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.80.1.tgz",
+      "integrity": "sha512-VLfHJ1G/lHvpE0YzxPal3sslfr5e5RNQVFeVebMwS3zSf57ZiZbfAevWJJT+7/gfGADMIoiX7AUteCVlbxMu/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native/js-polyfills": "0.80.0",
-        "@react-native/metro-babel-transformer": "0.80.0",
+        "@react-native/js-polyfills": "0.80.1",
+        "@react-native/metro-babel-transformer": "0.80.1",
         "metro-config": "^0.82.2",
         "metro-runtime": "^0.82.2"
       },
@@ -3326,22 +3521,22 @@
       }
     },
     "node_modules/@react-native/normalize-colors": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.80.0.tgz",
-      "integrity": "sha512-bJZDSopadjJxMDvysc634eTfLL4w7cAx5diPe14Ez5l+xcKjvpfofS/1Ja14DlgdMJhxGd03MTXlrxoWust3zg==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.80.1.tgz",
+      "integrity": "sha512-YP12bjz0bzo2lFxZDOPkRJSOkcqAzXCQQIV1wd7lzCTXE0NJNwoaeNBobJvcPhiODEWUYCXPANrZveFhtFu5vw==",
       "license": "MIT"
     },
     "node_modules/@react-native/typescript-config": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/typescript-config/-/typescript-config-0.80.0.tgz",
-      "integrity": "sha512-mlZhlXnVsDFvetx2vnOEwspJ5qWLiH2JY7dhxMiT/N90uJZjgFFvRMAWWNeJ1zgZPQylEuHHUUlDoaDZ7tQbTA==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/typescript-config/-/typescript-config-0.80.1.tgz",
+      "integrity": "sha512-rcDV6BMh+rjsYIh/f0pd6mWOKN4eTS9nov7CyeU2cAfuIEslScEJ7Kv6YZtlLZ5PgC9teUf5L9pqzx9GwmzY/w==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@react-native/virtualized-lists": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.80.0.tgz",
-      "integrity": "sha512-d9zZdPS/ZRexVAkxo1eRp85U7XnnEpXA1ZpSomRKxBuStYKky1YohfEX5YD5MhphemKK24tT7JR4UhaLlmeX8Q==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.80.1.tgz",
+      "integrity": "sha512-nqQAeHheSNZBV+syhLVMgKBZv+FhCANfxAWVvfEXZa4rm5jGHsj3yA9vqrh2lcJL3pjd7PW5nMX7TcuJThEAgQ==",
       "license": "MIT",
       "dependencies": {
         "invariant": "^2.2.4",
@@ -4910,9 +5105,9 @@
       }
     },
     "node_modules/compression": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.0.tgz",
-      "integrity": "sha512-k6WLKfunuqCYD3t6AsuPGvQWaKwuLLh2/xHNcX4qE+vIfDNXpSqnrhwA7O53R7WVQUnt8dVAIW+YHr7xTgOgGA==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
+      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -4920,7 +5115,7 @@
         "compressible": "~2.0.18",
         "debug": "2.6.9",
         "negotiator": "~0.6.4",
-        "on-headers": "~1.0.2",
+        "on-headers": "~1.1.0",
         "safe-buffer": "5.2.1",
         "vary": "~1.1.2"
       },
@@ -9942,9 +10137,9 @@
       }
     },
     "node_modules/on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
       "devOptional": true,
       "license": "MIT",
       "engines": {
@@ -10565,19 +10760,19 @@
       "license": "MIT"
     },
     "node_modules/react-native": {
-      "version": "0.80.0",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.80.0.tgz",
-      "integrity": "sha512-b9K1ygb2MWCBtKAodKmE3UsbUuC29Pt4CrJMR0ocTA8k+8HJQTPleBPDNKL4/p0P01QO9aL/gZUddoxHempLow==",
+      "version": "0.80.1",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.80.1.tgz",
+      "integrity": "sha512-cIiJiPItdC2+Z9n30FmE2ef1y4522kgmOjMIoDtlD16jrOMNTUdB2u+CylLTy3REkWkWTS6w8Ub7skUthkeo5w==",
       "license": "MIT",
       "dependencies": {
         "@jest/create-cache-key-function": "^29.7.0",
-        "@react-native/assets-registry": "0.80.0",
-        "@react-native/codegen": "0.80.0",
-        "@react-native/community-cli-plugin": "0.80.0",
-        "@react-native/gradle-plugin": "0.80.0",
-        "@react-native/js-polyfills": "0.80.0",
-        "@react-native/normalize-colors": "0.80.0",
-        "@react-native/virtualized-lists": "0.80.0",
+        "@react-native/assets-registry": "0.80.1",
+        "@react-native/codegen": "0.80.1",
+        "@react-native/community-cli-plugin": "0.80.1",
+        "@react-native/gradle-plugin": "0.80.1",
+        "@react-native/js-polyfills": "0.80.1",
+        "@react-native/normalize-colors": "0.80.1",
+        "@react-native/virtualized-lists": "0.80.1",
         "abort-controller": "^3.0.0",
         "anser": "^1.4.9",
         "ansi-regex": "^5.0.0",
@@ -10623,9 +10818,9 @@
       }
     },
     "node_modules/react-native-gesture-handler": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.26.0.tgz",
-      "integrity": "sha512-pfE1j9Vzu0qpWj/Aq1IK+cYnougN69mCKvWuq1rdNjH2zs1WIszF0Mum9/oGQTemgjyc/JgiqOOTgwcleAMAGg==",
+      "version": "2.27.2",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.27.2.tgz",
+      "integrity": "sha512-+kNaY2m7uQu5+5ls8os6z92DTk9expsEAYsaPv30n08mrqX2r64G8iVGDwNWzZcId54+P7RlDnhyszTql0sQ0w==",
       "license": "MIT",
       "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
@@ -10638,9 +10833,9 @@
       }
     },
     "node_modules/react-native-is-edge-to-edge": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.1.7.tgz",
-      "integrity": "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",
+      "integrity": "sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*",
@@ -10648,9 +10843,37 @@
       }
     },
     "node_modules/react-native-reanimated": {
-      "version": "3.18.0",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.18.0.tgz",
-      "integrity": "sha512-eVcNcqeOkMW+BUWAHdtvN3FKgC8J8wiEJkX6bNGGQaLS7m7e4amTfjIcqf/Ta+lerZLurmDaQ0lICI1CKPrb1Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.0.0.tgz",
+      "integrity": "sha512-gcLvbfJBQSmSHnPjlURWN/EJjWDhVpWqe+ilshcEmK/gS46AY42oVGYA0FFoLBiQj2BH+I24Tox/7GrBCBFbwg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-native-is-edge-to-edge": "^1.2.1",
+        "semver": "7.7.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-worklets": ">=0.3.0"
+      }
+    },
+    "node_modules/react-native-reanimated/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-worklets": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.4.0.tgz",
+      "integrity": "sha512-q4AKd9RH6JSX17dSbXw1ppr7WbGYleQT2GqlpE9LLKLRAi2UeSHD3Q3br4MBGobQfQDyfDyfkiO5DvhXSa/8Xg==",
       "license": "MIT",
       "dependencies": {
         "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
@@ -10662,9 +10885,7 @@
         "@babel/plugin-transform-template-literals": "^7.0.0-0",
         "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
         "@babel/preset-typescript": "^7.16.7",
-        "convert-source-map": "^2.0.0",
-        "invariant": "^2.2.4",
-        "react-native-is-edge-to-edge": "1.1.7"
+        "convert-source-map": "^2.0.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0",
diff --git a/ExampleLatest/package.json b/ExampleLatest/package.json
index d76da4a..033bc57 100755
--- a/ExampleLatest/package.json
+++ b/ExampleLatest/package.json
@@ -11,21 +11,22 @@
   },
   "dependencies": {
     "react": "19.1.0",
-    "react-native": "0.80.0",
-    "react-native-gesture-handler": "^2.26.0",
-    "react-native-reanimated": "^3.18.0"
+    "react-native": "0.80.1",
+    "react-native-gesture-handler": "^2.27.2",
+    "react-native-reanimated": "^4.0.0",
+    "react-native-worklets": "^0.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "19.0.0",
+    "@react-native-community/cli": "19.1.0",
     "@react-native-community/cli-platform-android": "19.0.0",
     "@react-native-community/cli-platform-ios": "19.0.0",
-    "@react-native/babel-preset": "0.80.0",
-    "@react-native/eslint-config": "0.80.0",
-    "@react-native/metro-config": "0.80.0",
-    "@react-native/typescript-config": "0.80.0",
+    "@react-native/babel-preset": "0.80.1",
+    "@react-native/eslint-config": "0.80.1",
+    "@react-native/metro-config": "0.80.1",
+    "@react-native/typescript-config": "0.80.1",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.1.0",
     "@types/react-test-renderer": "^19.1.0",

From c5d9508abd67f6cdf0a7a089fc817abe6d1a17c9 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 24 Jul 2025 12:32:05 +0300
Subject: [PATCH 4/9] fix: update installation links for
 react-native-gesture-handler in README and Installation documentation

---
 README.md                  | 13 ++++++-------
 docs/docs/Installation.mdx |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index cf8daac..8c26545 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# ![icon](https://github.com/user-attachments/assets/dd3dbb1f-25c3-463d-9413-ca963c17862c) Reanimated Color Picker 
+# ![icon](https://github.com/user-attachments/assets/dd3dbb1f-25c3-463d-9413-ca963c17862c) Reanimated Color Picker
 
 [![npm](https://img.shields.io/npm/v/reanimated-color-picker?style=for-the-badge)](https://www.npmjs.com/package/reanimated-color-picker)
 [![GitHub](https://img.shields.io/github/license/alabsi91/reanimated-color-picker?style=for-the-badge)](https://github.com/alabsi91/reanimated-color-picker/blob/main/LICENSE)
@@ -34,16 +34,15 @@
 
 ## Examples
 
-- [Interactive Demo on Expo Snack](https://snack.expo.dev/@alabsi91/reanimated-color-picker)  
-- [TypeScript Example Code](https://github.com/alabsi91/reanimated-color-picker/tree/main/ExamplesShared)  
-- [Download APK for Demo Examples (Android)](https://github.com/alabsi91/reanimated-color-picker/releases/latest)  
-
+- [Interactive Demo on Expo Snack](https://snack.expo.dev/@alabsi91/reanimated-color-picker)
+- [TypeScript Example Code](https://github.com/alabsi91/reanimated-color-picker/tree/main/ExamplesShared)
+- [Download APK for Demo Examples (Android)](https://github.com/alabsi91/reanimated-color-picker/releases/latest)
 
 ## Prerequisites
 
 - Follow the installation instructions by using the links provided below.
 
-- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) version `2.0.0` or higher.
+- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) version `2.0.0` or higher.
 
 - [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation) version `2.0.0` or higher.
 
@@ -52,7 +51,7 @@
 ## Installation
 
 > **Note**
-> First we need to install [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)(>=2.0.0) and [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)(>=2.0.0),
+> First we need to install [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)(>=2.0.0) and [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)(>=2.0.0),
 
 - Open a Terminal in the project root and run:
 
diff --git a/docs/docs/Installation.mdx b/docs/docs/Installation.mdx
index 2ccb2dd..5bcda9b 100644
--- a/docs/docs/Installation.mdx
+++ b/docs/docs/Installation.mdx
@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';
 ## Prerequisites
 
 - ### [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation) version `2.0.0` or higher.
-- ### [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) version `2.0.0` or higher.
+- ### [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) version `2.0.0` or higher.
 
 :::info For Expo users
 

From bbfcd685639eacb7b6f7ff4b9298447a05ef93c0 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 24 Jul 2025 12:35:29 +0300
Subject: [PATCH 5/9] chore: build docs

---
 docs/build/404.html                           |   134 +-
 docs/build/assets/css/styles.1fc1ae05.css     |  2994 +++
 docs/build/assets/css/styles.72fd27f4.css     |     1 -
 docs/build/assets/js/0489dd59.8ae8e7ae.js     |     1 -
 docs/build/assets/js/126391be.301971e7.js     |     1 -
 docs/build/assets/js/126391be.ea648361.js     |   146 +
 docs/build/assets/js/140a8099.6ce55756.js     |     1 -
 docs/build/assets/js/140a8099.f3bff30f.js     |   623 +
 docs/build/assets/js/14eb3368.4bda261b.js     |   385 +
 docs/build/assets/js/14eb3368.dea5486b.js     |     1 -
 docs/build/assets/js/17896441.6bb8ff9c.js     |     1 -
 docs/build/assets/js/17896441.d60327e5.js     |    46 +
 docs/build/assets/js/1e2bc623.2a975454.js     |     1 -
 docs/build/assets/js/237.f6a779dd.js          |     1 -
 docs/build/assets/js/246.02bf6ef0.js          |     1 -
 docs/build/assets/js/2487527e.8180fe4e.js     |     1 -
 docs/build/assets/js/2b9ac54a.57f0e62e.js     |     1 -
 docs/build/assets/js/2b9ac54a.e4b8602a.js     |   324 +
 docs/build/assets/js/2de8a64b.0aeb7b31.js     |     1 -
 docs/build/assets/js/2de8a64b.b97d2da5.js     |   711 +
 docs/build/assets/js/2fc6c5ee.64a63f09.js     |  1247 ++
 docs/build/assets/js/2fc6c5ee.7800c1e6.js     |     1 -
 docs/build/assets/js/349.4d780a60.js          |  1580 ++
 docs/build/assets/js/359ca393.e03a07f3.js     |     9 +
 docs/build/assets/js/39eaec8f.4f480351.js     |   415 +
 docs/build/assets/js/39eaec8f.fa4a8b07.js     |     1 -
 docs/build/assets/js/42602a95.2fa4cfe2.js     |     1 -
 docs/build/assets/js/4bdabec4.40ea22e5.js     |    11 +
 docs/build/assets/js/56316f3f.075f3cb7.js     |     1 -
 docs/build/assets/js/56316f3f.45150f4e.js     |   248 +
 docs/build/assets/js/58a57edf.072ec09f.js     |     1 -
 docs/build/assets/js/58a57edf.66c25246.js     |   610 +
 docs/build/assets/js/5de8bf0b.62db067d.js     |    11 +
 docs/build/assets/js/5e95c892.1cff72b0.js     |    22 +
 docs/build/assets/js/5e95c892.72fff1a5.js     |     1 -
 docs/build/assets/js/63def8f5.84f1a65b.js     |     1 -
 docs/build/assets/js/63def8f5.b163646c.js     |   710 +
 docs/build/assets/js/702bc698.050574b1.js     |    11 +
 docs/build/assets/js/7166dec0.29cabd74.js     |     1 -
 docs/build/assets/js/7166dec0.40c52d8e.js     |   169 +
 docs/build/assets/js/739c95ba.9edf9d13.js     |    11 +
 docs/build/assets/js/772.c9c858f4.js          |    67 +
 docs/build/assets/js/79d873be.14b90328.js     |     1 -
 docs/build/assets/js/79d873be.d3b401d6.js     |   637 +
 docs/build/assets/js/84f4edb4.3674461d.js     |     1 -
 docs/build/assets/js/8771582a.504eedc5.js     |   183 +
 docs/build/assets/js/8771582a.73eb78a1.js     |     1 -
 docs/build/assets/js/8bf99691.1b4d3a70.js     |     1 -
 docs/build/assets/js/8bf99691.f30381ff.js     |   173 +
 docs/build/assets/js/8d402cb0.2d42b477.js     |   639 +
 docs/build/assets/js/8d402cb0.4ccae590.js     |     1 -
 docs/build/assets/js/90e27583.36e02f53.js     |     1 -
 docs/build/assets/js/90e27583.4a3037b6.js     |   770 +
 docs/build/assets/js/9180b37b.28ec37b5.js     |     1 -
 docs/build/assets/js/9180b37b.d8341b90.js     |   551 +
 docs/build/assets/js/932438b4.2530e524.js     |   614 +
 docs/build/assets/js/932438b4.f4616486.js     |     1 -
 docs/build/assets/js/935f2afb.5d5bf7e1.js     |    11 +
 docs/build/assets/js/94e8e772.1dc5c6b9.js     |     1 -
 docs/build/assets/js/94e8e772.5fa20434.js     |   627 +
 docs/build/assets/js/9edb15d8.7157147b.js     |   618 +
 docs/build/assets/js/9edb15d8.b6ea81c2.js     |     1 -
 docs/build/assets/js/a44a6861.9fbac2d7.js     |   572 +
 docs/build/assets/js/a44a6861.eaf8176c.js     |     1 -
 docs/build/assets/js/a7456010.2f7a7300.js     |     1 -
 docs/build/assets/js/a7bd4aaa.a2f791de.js     |    35 +
 docs/build/assets/js/a7bd4aaa.e5e02b8a.js     |     1 -
 docs/build/assets/js/a94703ab.12f8560b.js     |     1 -
 docs/build/assets/js/a94703ab.ddd5d0fe.js     |   521 +
 docs/build/assets/js/aba21aa0.d09a9927.js     |     1 -
 docs/build/assets/js/ba30bb47.a96cda2c.js     |     1 -
 docs/build/assets/js/ba30bb47.c09e211f.js     |   640 +
 docs/build/assets/js/be41ce4f.be45697c.js     |    11 +
 docs/build/assets/js/bf417703.bb817925.js     |   161 +
 docs/build/assets/js/bf417703.ee6ddaa7.js     |     1 -
 docs/build/assets/js/c098eb0d.7d5059b8.js     |    11 +
 docs/build/assets/js/c23bd39a.0cdec3d1.js     |     1 -
 docs/build/assets/js/c23bd39a.bf7f31af.js     |   572 +
 docs/build/assets/js/c4f5d8e4.255fcf4f.js     |    41 +
 docs/build/assets/js/c4f5d8e4.3582c315.js     |     1 -
 docs/build/assets/js/c7c5d45f.85ccb7c9.js     |    11 +
 docs/build/assets/js/c9dca19d.c9998678.js     |     1 -
 docs/build/assets/js/d779562e.c9406fac.js     |    11 +
 docs/build/assets/js/da90494d.e34f8aa9.js     |     1 -
 docs/build/assets/js/dabf05c1.5edf4374.js     |     1 -
 docs/build/assets/js/e0d6e6dc.14c0f3a7.js     |     1 -
 docs/build/assets/js/e0d6e6dc.bfc78ff8.js     |   637 +
 docs/build/assets/js/e73706c6.c748fb3d.js     |   559 +
 docs/build/assets/js/e73706c6.e20c27e9.js     |     1 -
 docs/build/assets/js/ef3214ef.2a11b714.js     |     9 +
 docs/build/assets/js/efeb2804.a37ff4d9.js     |     1 -
 docs/build/assets/js/efeb2804.b279341f.js     |   949 +
 docs/build/assets/js/f299953f.8356c462.js     |     1 -
 docs/build/assets/js/f8409a7e.0aa7ddad.js     |   492 +
 docs/build/assets/js/f8409a7e.6f2e90a9.js     |     1 -
 docs/build/assets/js/main.a2c80363.js         | 17651 ++++++++++++++++
 ...CENSE.txt => main.a2c80363.js.LICENSE.txt} |    37 +-
 docs/build/assets/js/main.f7645bf4.js         |     2 -
 docs/build/assets/js/runtime~main.0577ba40.js |     1 -
 docs/build/assets/js/runtime~main.0a48d42a.js |   306 +
 docs/build/docs/API/ColorPicker/index.html    |  1168 +-
 docs/build/docs/API/Panels/Panel1/index.html  |   854 +-
 docs/build/docs/API/Panels/Panel2/index.html  |   990 +-
 docs/build/docs/API/Panels/Panel3/index.html  |   990 +-
 docs/build/docs/API/Panels/Panel4/index.html  |   890 +-
 docs/build/docs/API/Panels/Panel5/index.html  |   499 +-
 .../docs/API/Preview/ExtraThumb/index.html    |   928 +-
 .../docs/API/Preview/InputWidget/index.html   |   643 +-
 .../docs/API/Preview/PreviewText/index.html   |   433 +-
 .../docs/API/Preview/Swatches/index.html      |   471 +-
 docs/build/docs/API/Preview/index.html        |   580 +-
 .../Sliders/HSB/BrightnessSlider/index.html   |   981 +-
 .../Sliders/HSB/SaturationSlider/index.html   |   981 +-
 .../HSL/HSLSaturationSlider/index.html        |   989 +-
 .../Sliders/HSL/LuminanceCircular/index.html  |   978 +-
 .../Sliders/HSL/LuminanceSlider/index.html    |   989 +-
 .../API/Sliders/Hue/HueCircular/index.html    |   543 +-
 .../docs/API/Sliders/Hue/HueSlider/index.html |   968 +-
 .../docs/API/Sliders/OpacitySlider/index.html |   945 +-
 .../API/Sliders/RGB/BlueSlider/index.html     |   946 +-
 .../API/Sliders/RGB/GreenSlider/index.html    |   946 +-
 .../docs/API/Sliders/RGB/RedSlider/index.html |   946 +-
 docs/build/docs/ColorKit/index.html           |  3029 ++-
 docs/build/docs/Examples/index.html           |   347 +-
 docs/build/docs/Installation/index.html       |   449 +-
 docs/build/docs/Usage/index.html              |   350 +-
 docs/build/docs/category/api/index.html       |   337 +-
 docs/build/docs/category/hsb/index.html       |   442 +-
 docs/build/docs/category/hsl/index.html       |   466 +-
 docs/build/docs/category/hue/index.html       |   436 +-
 docs/build/docs/category/panels/index.html    |   408 +-
 docs/build/docs/category/preview/index.html   |   405 +-
 docs/build/docs/category/rgb/index.html       |   463 +-
 docs/build/docs/category/sliders/index.html   |   433 +-
 docs/build/docs/intro/index.html              |   608 +-
 docs/build/index.html                         |   147 +-
 136 files changed, 62515 insertions(+), 3046 deletions(-)
 create mode 100644 docs/build/assets/css/styles.1fc1ae05.css
 delete mode 100644 docs/build/assets/css/styles.72fd27f4.css
 delete mode 100644 docs/build/assets/js/0489dd59.8ae8e7ae.js
 delete mode 100644 docs/build/assets/js/126391be.301971e7.js
 create mode 100644 docs/build/assets/js/126391be.ea648361.js
 delete mode 100644 docs/build/assets/js/140a8099.6ce55756.js
 create mode 100644 docs/build/assets/js/140a8099.f3bff30f.js
 create mode 100644 docs/build/assets/js/14eb3368.4bda261b.js
 delete mode 100644 docs/build/assets/js/14eb3368.dea5486b.js
 delete mode 100644 docs/build/assets/js/17896441.6bb8ff9c.js
 create mode 100644 docs/build/assets/js/17896441.d60327e5.js
 delete mode 100644 docs/build/assets/js/1e2bc623.2a975454.js
 delete mode 100644 docs/build/assets/js/237.f6a779dd.js
 delete mode 100644 docs/build/assets/js/246.02bf6ef0.js
 delete mode 100644 docs/build/assets/js/2487527e.8180fe4e.js
 delete mode 100644 docs/build/assets/js/2b9ac54a.57f0e62e.js
 create mode 100644 docs/build/assets/js/2b9ac54a.e4b8602a.js
 delete mode 100644 docs/build/assets/js/2de8a64b.0aeb7b31.js
 create mode 100644 docs/build/assets/js/2de8a64b.b97d2da5.js
 create mode 100644 docs/build/assets/js/2fc6c5ee.64a63f09.js
 delete mode 100644 docs/build/assets/js/2fc6c5ee.7800c1e6.js
 create mode 100644 docs/build/assets/js/349.4d780a60.js
 create mode 100644 docs/build/assets/js/359ca393.e03a07f3.js
 create mode 100644 docs/build/assets/js/39eaec8f.4f480351.js
 delete mode 100644 docs/build/assets/js/39eaec8f.fa4a8b07.js
 delete mode 100644 docs/build/assets/js/42602a95.2fa4cfe2.js
 create mode 100644 docs/build/assets/js/4bdabec4.40ea22e5.js
 delete mode 100644 docs/build/assets/js/56316f3f.075f3cb7.js
 create mode 100644 docs/build/assets/js/56316f3f.45150f4e.js
 delete mode 100644 docs/build/assets/js/58a57edf.072ec09f.js
 create mode 100644 docs/build/assets/js/58a57edf.66c25246.js
 create mode 100644 docs/build/assets/js/5de8bf0b.62db067d.js
 create mode 100644 docs/build/assets/js/5e95c892.1cff72b0.js
 delete mode 100644 docs/build/assets/js/5e95c892.72fff1a5.js
 delete mode 100644 docs/build/assets/js/63def8f5.84f1a65b.js
 create mode 100644 docs/build/assets/js/63def8f5.b163646c.js
 create mode 100644 docs/build/assets/js/702bc698.050574b1.js
 delete mode 100644 docs/build/assets/js/7166dec0.29cabd74.js
 create mode 100644 docs/build/assets/js/7166dec0.40c52d8e.js
 create mode 100644 docs/build/assets/js/739c95ba.9edf9d13.js
 create mode 100644 docs/build/assets/js/772.c9c858f4.js
 delete mode 100644 docs/build/assets/js/79d873be.14b90328.js
 create mode 100644 docs/build/assets/js/79d873be.d3b401d6.js
 delete mode 100644 docs/build/assets/js/84f4edb4.3674461d.js
 create mode 100644 docs/build/assets/js/8771582a.504eedc5.js
 delete mode 100644 docs/build/assets/js/8771582a.73eb78a1.js
 delete mode 100644 docs/build/assets/js/8bf99691.1b4d3a70.js
 create mode 100644 docs/build/assets/js/8bf99691.f30381ff.js
 create mode 100644 docs/build/assets/js/8d402cb0.2d42b477.js
 delete mode 100644 docs/build/assets/js/8d402cb0.4ccae590.js
 delete mode 100644 docs/build/assets/js/90e27583.36e02f53.js
 create mode 100644 docs/build/assets/js/90e27583.4a3037b6.js
 delete mode 100644 docs/build/assets/js/9180b37b.28ec37b5.js
 create mode 100644 docs/build/assets/js/9180b37b.d8341b90.js
 create mode 100644 docs/build/assets/js/932438b4.2530e524.js
 delete mode 100644 docs/build/assets/js/932438b4.f4616486.js
 create mode 100644 docs/build/assets/js/935f2afb.5d5bf7e1.js
 delete mode 100644 docs/build/assets/js/94e8e772.1dc5c6b9.js
 create mode 100644 docs/build/assets/js/94e8e772.5fa20434.js
 create mode 100644 docs/build/assets/js/9edb15d8.7157147b.js
 delete mode 100644 docs/build/assets/js/9edb15d8.b6ea81c2.js
 create mode 100644 docs/build/assets/js/a44a6861.9fbac2d7.js
 delete mode 100644 docs/build/assets/js/a44a6861.eaf8176c.js
 delete mode 100644 docs/build/assets/js/a7456010.2f7a7300.js
 create mode 100644 docs/build/assets/js/a7bd4aaa.a2f791de.js
 delete mode 100644 docs/build/assets/js/a7bd4aaa.e5e02b8a.js
 delete mode 100644 docs/build/assets/js/a94703ab.12f8560b.js
 create mode 100644 docs/build/assets/js/a94703ab.ddd5d0fe.js
 delete mode 100644 docs/build/assets/js/aba21aa0.d09a9927.js
 delete mode 100644 docs/build/assets/js/ba30bb47.a96cda2c.js
 create mode 100644 docs/build/assets/js/ba30bb47.c09e211f.js
 create mode 100644 docs/build/assets/js/be41ce4f.be45697c.js
 create mode 100644 docs/build/assets/js/bf417703.bb817925.js
 delete mode 100644 docs/build/assets/js/bf417703.ee6ddaa7.js
 create mode 100644 docs/build/assets/js/c098eb0d.7d5059b8.js
 delete mode 100644 docs/build/assets/js/c23bd39a.0cdec3d1.js
 create mode 100644 docs/build/assets/js/c23bd39a.bf7f31af.js
 create mode 100644 docs/build/assets/js/c4f5d8e4.255fcf4f.js
 delete mode 100644 docs/build/assets/js/c4f5d8e4.3582c315.js
 create mode 100644 docs/build/assets/js/c7c5d45f.85ccb7c9.js
 delete mode 100644 docs/build/assets/js/c9dca19d.c9998678.js
 create mode 100644 docs/build/assets/js/d779562e.c9406fac.js
 delete mode 100644 docs/build/assets/js/da90494d.e34f8aa9.js
 delete mode 100644 docs/build/assets/js/dabf05c1.5edf4374.js
 delete mode 100644 docs/build/assets/js/e0d6e6dc.14c0f3a7.js
 create mode 100644 docs/build/assets/js/e0d6e6dc.bfc78ff8.js
 create mode 100644 docs/build/assets/js/e73706c6.c748fb3d.js
 delete mode 100644 docs/build/assets/js/e73706c6.e20c27e9.js
 create mode 100644 docs/build/assets/js/ef3214ef.2a11b714.js
 delete mode 100644 docs/build/assets/js/efeb2804.a37ff4d9.js
 create mode 100644 docs/build/assets/js/efeb2804.b279341f.js
 delete mode 100644 docs/build/assets/js/f299953f.8356c462.js
 create mode 100644 docs/build/assets/js/f8409a7e.0aa7ddad.js
 delete mode 100644 docs/build/assets/js/f8409a7e.6f2e90a9.js
 create mode 100644 docs/build/assets/js/main.a2c80363.js
 rename docs/build/assets/js/{main.f7645bf4.js.LICENSE.txt => main.a2c80363.js.LICENSE.txt} (62%)
 delete mode 100644 docs/build/assets/js/main.f7645bf4.js
 delete mode 100644 docs/build/assets/js/runtime~main.0577ba40.js
 create mode 100644 docs/build/assets/js/runtime~main.0a48d42a.js

diff --git a/docs/build/404.html b/docs/build/404.html
index f6cf4f3..efecf8e 100644
--- a/docs/build/404.html
+++ b/docs/build/404.html
@@ -1,16 +1,122 @@
 <!doctype html>
 <html lang="en" dir="ltr" class="plugin-native plugin-id-default" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Page Not Found | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/404.html"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" property="og:title" content="Page Not Found | Reanimated Color Picker"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/404.html"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/404.html" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/404.html" hreflang="x-default"><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a class="navbar__item navbar__link" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><main class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></main></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Page Not Found | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/404.html" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docusaurus_tag" content="default" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="default" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" property="og:title" content="Page Not Found | Reanimated Color Picker" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/404.html" />
+    <link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/404.html" hreflang="en" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/404.html"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a class="navbar__item navbar__link" href="/reanimated-color-picker/docs/intro">Docs</a>
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <main class="container margin-vert--xl">
+          <div class="row">
+            <div class="col col--6 col--offset-3">
+              <h1 class="hero__title">Page Not Found</h1>
+              <p>We could not find what you were looking for.</p>
+              <p>
+                Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
+              </p>
+            </div>
+          </div>
+        </main>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/assets/css/styles.1fc1ae05.css b/docs/build/assets/css/styles.1fc1ae05.css
new file mode 100644
index 0000000..3867c3e
--- /dev/null
+++ b/docs/build/assets/css/styles.1fc1ae05.css
@@ -0,0 +1,2994 @@
+.col,
+.container {
+  padding: 0 var(--ifm-spacing-horizontal);
+  width: 100%;
+}
+.markdown > h2,
+.markdown > h3,
+.markdown > h4,
+.markdown > h5,
+.markdown > h6 {
+  margin-bottom: calc(var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading));
+}
+.markdown li,
+body {
+  word-wrap: break-word;
+}
+body,
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin: 0;
+}
+pre,
+table {
+  overflow: auto;
+}
+blockquote,
+pre {
+  margin: 0 0 var(--ifm-spacing-vertical);
+}
+.breadcrumbs__link,
+.button {
+  transition-timing-function: var(--ifm-transition-timing-default);
+}
+.button,
+code {
+  vertical-align: middle;
+}
+.button--outline.button--active,
+.button--outline:active,
+.button--outline:hover,
+:root {
+  --ifm-button-color: var(--ifm-font-color-base-inverse);
+}
+.menu__link:hover,
+a {
+  transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.navbar--dark,
+:root {
+  --ifm-navbar-link-hover-color: var(--ifm-color-primary);
+}
+.menu,
+.navbar-sidebar {
+  overflow-x: hidden;
+}
+:root,
+html[data-theme='dark'] {
+  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
+}
+.toggleButton_gllP,
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+.clean-list,
+.containsTaskList_mC6p,
+.details_lb9f > summary,
+.dropdown__menu,
+.menu__list {
+  list-style: none;
+}
+:root {
+  --ifm-color-scheme: light;
+  --ifm-dark-value: 10%;
+  --ifm-darker-value: 15%;
+  --ifm-darkest-value: 30%;
+  --ifm-light-value: 15%;
+  --ifm-lighter-value: 30%;
+  --ifm-lightest-value: 50%;
+  --ifm-contrast-background-value: 90%;
+  --ifm-contrast-foreground-value: 70%;
+  --ifm-contrast-background-dark-value: 70%;
+  --ifm-contrast-foreground-dark-value: 90%;
+  --ifm-color-primary: #3578e5;
+  --ifm-color-secondary: #ebedf0;
+  --ifm-color-success: #00a400;
+  --ifm-color-info: #54c7ec;
+  --ifm-color-warning: #ffba00;
+  --ifm-color-danger: #fa383e;
+  --ifm-color-primary-dark: #306cce;
+  --ifm-color-primary-darker: #2d66c3;
+  --ifm-color-primary-darkest: #2554a0;
+  --ifm-color-primary-light: #538ce9;
+  --ifm-color-primary-lighter: #72a1ed;
+  --ifm-color-primary-lightest: #9abcf2;
+  --ifm-color-primary-contrast-background: #ebf2fc;
+  --ifm-color-primary-contrast-foreground: #102445;
+  --ifm-color-secondary-dark: #d4d5d8;
+  --ifm-color-secondary-darker: #c8c9cc;
+  --ifm-color-secondary-darkest: #a4a6a8;
+  --ifm-color-secondary-light: #eef0f2;
+  --ifm-color-secondary-lighter: #f1f2f5;
+  --ifm-color-secondary-lightest: #f5f6f8;
+  --ifm-color-secondary-contrast-background: #fdfdfe;
+  --ifm-color-secondary-contrast-foreground: #474748;
+  --ifm-color-success-dark: #009400;
+  --ifm-color-success-darker: #008b00;
+  --ifm-color-success-darkest: #007300;
+  --ifm-color-success-light: #26b226;
+  --ifm-color-success-lighter: #4dbf4d;
+  --ifm-color-success-lightest: #80d280;
+  --ifm-color-success-contrast-background: #e6f6e6;
+  --ifm-color-success-contrast-foreground: #003100;
+  --ifm-color-info-dark: #4cb3d4;
+  --ifm-color-info-darker: #47a9c9;
+  --ifm-color-info-darkest: #3b8ba5;
+  --ifm-color-info-light: #6ecfef;
+  --ifm-color-info-lighter: #87d8f2;
+  --ifm-color-info-lightest: #aae3f6;
+  --ifm-color-info-contrast-background: #eef9fd;
+  --ifm-color-info-contrast-foreground: #193c47;
+  --ifm-color-warning-dark: #e6a700;
+  --ifm-color-warning-darker: #d99e00;
+  --ifm-color-warning-darkest: #b38200;
+  --ifm-color-warning-light: #ffc426;
+  --ifm-color-warning-lighter: #ffcf4d;
+  --ifm-color-warning-lightest: #ffdd80;
+  --ifm-color-warning-contrast-background: #fff8e6;
+  --ifm-color-warning-contrast-foreground: #4d3800;
+  --ifm-color-danger-dark: #e13238;
+  --ifm-color-danger-darker: #d53035;
+  --ifm-color-danger-darkest: #af272b;
+  --ifm-color-danger-light: #fb565b;
+  --ifm-color-danger-lighter: #fb7478;
+  --ifm-color-danger-lightest: #fd9c9f;
+  --ifm-color-danger-contrast-background: #ffebec;
+  --ifm-color-danger-contrast-foreground: #4b1113;
+  --ifm-color-white: #fff;
+  --ifm-color-black: #000;
+  --ifm-color-gray-0: var(--ifm-color-white);
+  --ifm-color-gray-100: #f5f6f7;
+  --ifm-color-gray-200: #ebedf0;
+  --ifm-color-gray-300: #dadde1;
+  --ifm-color-gray-400: #ccd0d5;
+  --ifm-color-gray-500: #bec3c9;
+  --ifm-color-gray-600: #8d949e;
+  --ifm-color-gray-700: #606770;
+  --ifm-color-gray-800: #444950;
+  --ifm-color-gray-900: #1c1e21;
+  --ifm-color-gray-1000: var(--ifm-color-black);
+  --ifm-color-emphasis-0: var(--ifm-color-gray-0);
+  --ifm-color-emphasis-100: var(--ifm-color-gray-100);
+  --ifm-color-emphasis-200: var(--ifm-color-gray-200);
+  --ifm-color-emphasis-300: var(--ifm-color-gray-300);
+  --ifm-color-emphasis-400: var(--ifm-color-gray-400);
+  --ifm-color-emphasis-600: var(--ifm-color-gray-600);
+  --ifm-color-emphasis-700: var(--ifm-color-gray-700);
+  --ifm-color-emphasis-800: var(--ifm-color-gray-800);
+  --ifm-color-emphasis-900: var(--ifm-color-gray-900);
+  --ifm-color-emphasis-1000: var(--ifm-color-gray-1000);
+  --ifm-color-content: var(--ifm-color-emphasis-900);
+  --ifm-color-content-inverse: var(--ifm-color-emphasis-0);
+  --ifm-color-content-secondary: #525860;
+  --ifm-background-color: #0000;
+  --ifm-background-surface-color: var(--ifm-color-content-inverse);
+  --ifm-global-border-width: 1px;
+  --ifm-global-radius: 0.4rem;
+  --ifm-hover-overlay: #0000000d;
+  --ifm-font-color-base: var(--ifm-color-content);
+  --ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
+  --ifm-font-color-secondary: var(--ifm-color-content-secondary);
+  --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --ifm-font-size-base: 100%;
+  --ifm-font-weight-light: 300;
+  --ifm-font-weight-normal: 400;
+  --ifm-font-weight-semibold: 500;
+  --ifm-font-weight-bold: 700;
+  --ifm-font-weight-base: var(--ifm-font-weight-normal);
+  --ifm-line-height-base: 1.65;
+  --ifm-global-spacing: 1rem;
+  --ifm-spacing-vertical: var(--ifm-global-spacing);
+  --ifm-spacing-horizontal: var(--ifm-global-spacing);
+  --ifm-transition-fast: 200ms;
+  --ifm-transition-slow: 400ms;
+  --ifm-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);
+  --ifm-global-shadow-lw: 0 1px 2px 0 #0000001a;
+  --ifm-global-shadow-md: 0 5px 40px #0003;
+  --ifm-global-shadow-tl: 0 12px 28px 0 #0003, 0 2px 4px 0 #0000001a;
+  --ifm-z-index-dropdown: 100;
+  --ifm-z-index-fixed: 200;
+  --ifm-z-index-overlay: 400;
+  --ifm-container-width: 1140px;
+  --ifm-container-width-xl: 1320px;
+  --ifm-code-background: #f6f7f8;
+  --ifm-code-border-radius: var(--ifm-global-radius);
+  --ifm-code-font-size: 90%;
+  --ifm-code-padding-horizontal: 0.1rem;
+  --ifm-code-padding-vertical: 0.1rem;
+  --ifm-pre-background: var(--ifm-code-background);
+  --ifm-pre-border-radius: var(--ifm-code-border-radius);
+  --ifm-pre-color: inherit;
+  --ifm-pre-line-height: 1.45;
+  --ifm-pre-padding: 1rem;
+  --ifm-heading-color: inherit;
+  --ifm-heading-margin-top: 0;
+  --ifm-heading-margin-bottom: var(--ifm-spacing-vertical);
+  --ifm-heading-font-family: var(--ifm-font-family-base);
+  --ifm-heading-font-weight: var(--ifm-font-weight-bold);
+  --ifm-heading-line-height: 1.25;
+  --ifm-h1-font-size: 2rem;
+  --ifm-h2-font-size: 1.5rem;
+  --ifm-h3-font-size: 1.25rem;
+  --ifm-h4-font-size: 1rem;
+  --ifm-h5-font-size: 0.875rem;
+  --ifm-h6-font-size: 0.85rem;
+  --ifm-image-alignment-padding: 1.25rem;
+  --ifm-leading-desktop: 1.25;
+  --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem);
+  --ifm-list-left-padding: 2rem;
+  --ifm-list-margin: 1rem;
+  --ifm-list-item-margin: 0.25rem;
+  --ifm-list-paragraph-margin: 1rem;
+  --ifm-table-cell-padding: 0.75rem;
+  --ifm-table-background: #0000;
+  --ifm-table-stripe-background: #00000008;
+  --ifm-table-border-width: 1px;
+  --ifm-table-border-color: var(--ifm-color-emphasis-300);
+  --ifm-table-head-background: inherit;
+  --ifm-table-head-color: inherit;
+  --ifm-table-head-font-weight: var(--ifm-font-weight-bold);
+  --ifm-table-cell-color: inherit;
+  --ifm-link-color: var(--ifm-color-primary);
+  --ifm-link-decoration: none;
+  --ifm-link-hover-color: var(--ifm-link-color);
+  --ifm-link-hover-decoration: underline;
+  --ifm-paragraph-margin-bottom: var(--ifm-leading);
+  --ifm-blockquote-font-size: var(--ifm-font-size-base);
+  --ifm-blockquote-border-left-width: 2px;
+  --ifm-blockquote-padding-horizontal: var(--ifm-spacing-horizontal);
+  --ifm-blockquote-padding-vertical: 0;
+  --ifm-blockquote-shadow: none;
+  --ifm-blockquote-color: var(--ifm-color-emphasis-800);
+  --ifm-blockquote-border-color: var(--ifm-color-emphasis-300);
+  --ifm-hr-background-color: var(--ifm-color-emphasis-500);
+  --ifm-hr-height: 1px;
+  --ifm-hr-margin-vertical: 1.5rem;
+  --ifm-scrollbar-size: 7px;
+  --ifm-scrollbar-track-background-color: #f1f1f1;
+  --ifm-scrollbar-thumb-background-color: silver;
+  --ifm-scrollbar-thumb-hover-background-color: #a7a7a7;
+  --ifm-alert-background-color: inherit;
+  --ifm-alert-border-color: inherit;
+  --ifm-alert-border-radius: var(--ifm-global-radius);
+  --ifm-alert-border-width: 0px;
+  --ifm-alert-border-left-width: 5px;
+  --ifm-alert-color: var(--ifm-font-color-base);
+  --ifm-alert-padding-horizontal: var(--ifm-spacing-horizontal);
+  --ifm-alert-padding-vertical: var(--ifm-spacing-vertical);
+  --ifm-alert-shadow: var(--ifm-global-shadow-lw);
+  --ifm-avatar-intro-margin: 1rem;
+  --ifm-avatar-intro-alignment: inherit;
+  --ifm-avatar-photo-size: 3rem;
+  --ifm-badge-background-color: inherit;
+  --ifm-badge-border-color: inherit;
+  --ifm-badge-border-radius: var(--ifm-global-radius);
+  --ifm-badge-border-width: var(--ifm-global-border-width);
+  --ifm-badge-color: var(--ifm-color-white);
+  --ifm-badge-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 0.5);
+  --ifm-badge-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
+  --ifm-breadcrumb-border-radius: 1.5rem;
+  --ifm-breadcrumb-spacing: 0.5rem;
+  --ifm-breadcrumb-color-active: var(--ifm-color-primary);
+  --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay);
+  --ifm-breadcrumb-padding-horizontal: 0.8rem;
+  --ifm-breadcrumb-padding-vertical: 0.4rem;
+  --ifm-breadcrumb-size-multiplier: 1;
+  --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
+  --ifm-breadcrumb-separator-filter: none;
+  --ifm-breadcrumb-separator-size: 0.5rem;
+  --ifm-breadcrumb-separator-size-multiplier: 1.25;
+  --ifm-button-background-color: inherit;
+  --ifm-button-border-color: var(--ifm-button-background-color);
+  --ifm-button-border-width: var(--ifm-global-border-width);
+  --ifm-button-font-weight: var(--ifm-font-weight-bold);
+  --ifm-button-padding-horizontal: 1.5rem;
+  --ifm-button-padding-vertical: 0.375rem;
+  --ifm-button-size-multiplier: 1;
+  --ifm-button-transition-duration: var(--ifm-transition-fast);
+  --ifm-button-border-radius: calc(var(--ifm-global-radius) * var(--ifm-button-size-multiplier));
+  --ifm-button-group-spacing: 2px;
+  --ifm-card-background-color: var(--ifm-background-surface-color);
+  --ifm-card-border-radius: calc(var(--ifm-global-radius) * 2);
+  --ifm-card-horizontal-spacing: var(--ifm-global-spacing);
+  --ifm-card-vertical-spacing: var(--ifm-global-spacing);
+  --ifm-toc-border-color: var(--ifm-color-emphasis-300);
+  --ifm-toc-link-color: var(--ifm-color-content-secondary);
+  --ifm-toc-padding-vertical: 0.5rem;
+  --ifm-toc-padding-horizontal: 0.5rem;
+  --ifm-dropdown-background-color: var(--ifm-background-surface-color);
+  --ifm-dropdown-font-weight: var(--ifm-font-weight-semibold);
+  --ifm-dropdown-link-color: var(--ifm-font-color-base);
+  --ifm-dropdown-hover-background-color: var(--ifm-hover-overlay);
+  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
+  --ifm-footer-color: inherit;
+  --ifm-footer-link-color: var(--ifm-color-emphasis-700);
+  --ifm-footer-link-hover-color: var(--ifm-color-primary);
+  --ifm-footer-link-horizontal-spacing: 0.5rem;
+  --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
+  --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
+  --ifm-footer-title-color: inherit;
+  --ifm-footer-logo-max-width: min(30rem, 90vw);
+  --ifm-hero-background-color: var(--ifm-background-surface-color);
+  --ifm-hero-text-color: var(--ifm-color-emphasis-800);
+  --ifm-menu-color: var(--ifm-color-emphasis-700);
+  --ifm-menu-color-active: var(--ifm-color-primary);
+  --ifm-menu-color-background-active: var(--ifm-hover-overlay);
+  --ifm-menu-color-background-hover: var(--ifm-hover-overlay);
+  --ifm-menu-link-padding-horizontal: 0.75rem;
+  --ifm-menu-link-padding-vertical: 0.375rem;
+  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
+  --ifm-menu-link-sublist-icon-filter: none;
+  --ifm-navbar-background-color: var(--ifm-background-surface-color);
+  --ifm-navbar-height: 3.75rem;
+  --ifm-navbar-item-padding-horizontal: 0.75rem;
+  --ifm-navbar-item-padding-vertical: 0.25rem;
+  --ifm-navbar-link-color: var(--ifm-font-color-base);
+  --ifm-navbar-link-active-color: var(--ifm-link-color);
+  --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal);
+  --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
+  --ifm-navbar-shadow: var(--ifm-global-shadow-lw);
+  --ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200);
+  --ifm-navbar-search-input-color: var(--ifm-color-emphasis-800);
+  --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-500);
+  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
+  --ifm-navbar-sidebar-width: 83vw;
+  --ifm-pagination-border-radius: var(--ifm-global-radius);
+  --ifm-pagination-color-active: var(--ifm-color-primary);
+  --ifm-pagination-font-size: 1rem;
+  --ifm-pagination-item-active-background: var(--ifm-hover-overlay);
+  --ifm-pagination-page-spacing: 0.2em;
+  --ifm-pagination-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1);
+  --ifm-pagination-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25);
+  --ifm-pagination-nav-border-radius: var(--ifm-global-radius);
+  --ifm-pagination-nav-color-hover: var(--ifm-color-primary);
+  --ifm-pills-color-active: var(--ifm-color-primary);
+  --ifm-pills-color-background-active: var(--ifm-hover-overlay);
+  --ifm-pills-spacing: 0.125rem;
+  --ifm-tabs-color: var(--ifm-font-color-secondary);
+  --ifm-tabs-color-active: var(--ifm-color-primary);
+  --ifm-tabs-color-active-border: var(--ifm-tabs-color-active);
+  --ifm-tabs-padding-horizontal: 1rem;
+  --ifm-tabs-padding-vertical: 1rem;
+  --docusaurus-progress-bar-color: var(--ifm-color-primary);
+  --ifm-color-primary: #05992a;
+  --ifm-color-primary-dark: #058a26;
+  --ifm-color-primary-darker: #048224;
+  --ifm-color-primary-darkest: #046b1d;
+  --ifm-color-primary-light: #06a82e;
+  --ifm-color-primary-lighter: #06b030;
+  --ifm-color-primary-lightest: #07c737;
+  --ifm-background-color: #fdfdfd !important;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: #0000001a;
+  --docusaurus-announcement-bar-height: auto;
+  --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
+  --docusaurus-collapse-button-bg: #0000;
+  --docusaurus-collapse-button-bg-hover: #0000001a;
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+.badge--danger,
+.badge--info,
+.badge--primary,
+.badge--secondary,
+.badge--success,
+.badge--warning {
+  --ifm-badge-border-color: var(--ifm-badge-background-color);
+}
+.button--link,
+.button--outline {
+  --ifm-button-background-color: #0000;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  background-color: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  color-scheme: var(--ifm-color-scheme);
+  font: var(--ifm-font-size-base) / var(--ifm-line-height-base) var(--ifm-font-family-base);
+  text-rendering: optimizelegibility;
+}
+iframe {
+  border: 0;
+  color-scheme: auto;
+}
+.container {
+  margin: 0 auto;
+  max-width: var(--ifm-container-width);
+}
+.container--fluid {
+  max-width: inherit;
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 calc(var(--ifm-spacing-horizontal) * -1);
+}
+.list_eTzJ article:last-child,
+.margin-bottom--none,
+.margin-vert--none,
+.markdown > :last-child {
+  margin-bottom: 0 !important;
+}
+.margin-top--none,
+.margin-vert--none,
+.tabItem_LNqP {
+  margin-top: 0 !important;
+}
+.row--no-gutters {
+  margin-left: 0;
+  margin-right: 0;
+}
+.margin-horiz--none,
+.margin-right--none {
+  margin-right: 0 !important;
+}
+.row--no-gutters > .col {
+  padding-left: 0;
+  padding-right: 0;
+}
+.row--align-top {
+  align-items: flex-start;
+}
+.row--align-bottom {
+  align-items: flex-end;
+}
+.menuExternalLink_NmtK,
+.row--align-center {
+  align-items: center;
+}
+.row--align-stretch {
+  align-items: stretch;
+}
+.row--align-baseline {
+  align-items: baseline;
+}
+.col {
+  --ifm-col-width: 100%;
+  flex: 1 0;
+  margin-left: 0;
+  max-width: var(--ifm-col-width);
+}
+.padding-bottom--none,
+.padding-vert--none {
+  padding-bottom: 0 !important;
+}
+.padding-top--none,
+.padding-vert--none {
+  padding-top: 0 !important;
+}
+.padding-horiz--none,
+.padding-left--none {
+  padding-left: 0 !important;
+}
+.padding-horiz--none,
+.padding-right--none {
+  padding-right: 0 !important;
+}
+.col[class*='col--'] {
+  flex: 0 0 var(--ifm-col-width);
+}
+.col--1 {
+  --ifm-col-width: 8.33333%;
+}
+.col--offset-1 {
+  margin-left: 8.33333%;
+}
+.col--2 {
+  --ifm-col-width: 16.66667%;
+}
+.col--offset-2 {
+  margin-left: 16.66667%;
+}
+.col--3 {
+  --ifm-col-width: 25%;
+}
+.col--offset-3 {
+  margin-left: 25%;
+}
+.col--4 {
+  --ifm-col-width: 33.33333%;
+}
+.col--offset-4 {
+  margin-left: 33.33333%;
+}
+.col--5 {
+  --ifm-col-width: 41.66667%;
+}
+.col--offset-5 {
+  margin-left: 41.66667%;
+}
+.col--6 {
+  --ifm-col-width: 50%;
+}
+.col--offset-6 {
+  margin-left: 50%;
+}
+.col--7 {
+  --ifm-col-width: 58.33333%;
+}
+.col--offset-7 {
+  margin-left: 58.33333%;
+}
+.col--8 {
+  --ifm-col-width: 66.66667%;
+}
+.col--offset-8 {
+  margin-left: 66.66667%;
+}
+.col--9 {
+  --ifm-col-width: 75%;
+}
+.col--offset-9 {
+  margin-left: 75%;
+}
+.col--10 {
+  --ifm-col-width: 83.33333%;
+}
+.col--offset-10 {
+  margin-left: 83.33333%;
+}
+.col--11 {
+  --ifm-col-width: 91.66667%;
+}
+.col--offset-11 {
+  margin-left: 91.66667%;
+}
+.col--12 {
+  --ifm-col-width: 100%;
+}
+.col--offset-12 {
+  margin-left: 100%;
+}
+.margin-horiz--none,
+.margin-left--none {
+  margin-left: 0 !important;
+}
+.margin--none {
+  margin: 0 !important;
+}
+.margin-bottom--xs,
+.margin-vert--xs {
+  margin-bottom: 0.25rem !important;
+}
+.margin-top--xs,
+.margin-vert--xs {
+  margin-top: 0.25rem !important;
+}
+.margin-horiz--xs,
+.margin-left--xs {
+  margin-left: 0.25rem !important;
+}
+.margin-horiz--xs,
+.margin-right--xs {
+  margin-right: 0.25rem !important;
+}
+.margin--xs {
+  margin: 0.25rem !important;
+}
+.margin-bottom--sm,
+.margin-vert--sm {
+  margin-bottom: 0.5rem !important;
+}
+.margin-top--sm,
+.margin-vert--sm {
+  margin-top: 0.5rem !important;
+}
+.margin-horiz--sm,
+.margin-left--sm {
+  margin-left: 0.5rem !important;
+}
+.margin-horiz--sm,
+.margin-right--sm {
+  margin-right: 0.5rem !important;
+}
+.margin--sm {
+  margin: 0.5rem !important;
+}
+.margin-bottom--md,
+.margin-vert--md {
+  margin-bottom: 1rem !important;
+}
+.margin-top--md,
+.margin-vert--md {
+  margin-top: 1rem !important;
+}
+.margin-horiz--md,
+.margin-left--md {
+  margin-left: 1rem !important;
+}
+.margin-horiz--md,
+.margin-right--md {
+  margin-right: 1rem !important;
+}
+.margin--md {
+  margin: 1rem !important;
+}
+.margin-bottom--lg,
+.margin-vert--lg {
+  margin-bottom: 2rem !important;
+}
+.margin-top--lg,
+.margin-vert--lg {
+  margin-top: 2rem !important;
+}
+.margin-horiz--lg,
+.margin-left--lg {
+  margin-left: 2rem !important;
+}
+.margin-horiz--lg,
+.margin-right--lg {
+  margin-right: 2rem !important;
+}
+.margin--lg {
+  margin: 2rem !important;
+}
+.margin-bottom--xl,
+.margin-vert--xl {
+  margin-bottom: 5rem !important;
+}
+.margin-top--xl,
+.margin-vert--xl {
+  margin-top: 5rem !important;
+}
+.margin-horiz--xl,
+.margin-left--xl {
+  margin-left: 5rem !important;
+}
+.margin-horiz--xl,
+.margin-right--xl {
+  margin-right: 5rem !important;
+}
+.margin--xl {
+  margin: 5rem !important;
+}
+.padding--none {
+  padding: 0 !important;
+}
+.padding-bottom--xs,
+.padding-vert--xs {
+  padding-bottom: 0.25rem !important;
+}
+.padding-top--xs,
+.padding-vert--xs {
+  padding-top: 0.25rem !important;
+}
+.padding-horiz--xs,
+.padding-left--xs {
+  padding-left: 0.25rem !important;
+}
+.padding-horiz--xs,
+.padding-right--xs {
+  padding-right: 0.25rem !important;
+}
+.padding--xs {
+  padding: 0.25rem !important;
+}
+.padding-bottom--sm,
+.padding-vert--sm {
+  padding-bottom: 0.5rem !important;
+}
+.padding-top--sm,
+.padding-vert--sm {
+  padding-top: 0.5rem !important;
+}
+.padding-horiz--sm,
+.padding-left--sm {
+  padding-left: 0.5rem !important;
+}
+.padding-horiz--sm,
+.padding-right--sm {
+  padding-right: 0.5rem !important;
+}
+.padding--sm {
+  padding: 0.5rem !important;
+}
+.padding-bottom--md,
+.padding-vert--md {
+  padding-bottom: 1rem !important;
+}
+.padding-top--md,
+.padding-vert--md {
+  padding-top: 1rem !important;
+}
+.padding-horiz--md,
+.padding-left--md {
+  padding-left: 1rem !important;
+}
+.padding-horiz--md,
+.padding-right--md {
+  padding-right: 1rem !important;
+}
+.padding--md {
+  padding: 1rem !important;
+}
+.padding-bottom--lg,
+.padding-vert--lg {
+  padding-bottom: 2rem !important;
+}
+.padding-top--lg,
+.padding-vert--lg {
+  padding-top: 2rem !important;
+}
+.padding-horiz--lg,
+.padding-left--lg {
+  padding-left: 2rem !important;
+}
+.padding-horiz--lg,
+.padding-right--lg {
+  padding-right: 2rem !important;
+}
+.padding--lg {
+  padding: 2rem !important;
+}
+.padding-bottom--xl,
+.padding-vert--xl {
+  padding-bottom: 5rem !important;
+}
+.padding-top--xl,
+.padding-vert--xl {
+  padding-top: 5rem !important;
+}
+.padding-horiz--xl,
+.padding-left--xl {
+  padding-left: 5rem !important;
+}
+.padding-horiz--xl,
+.padding-right--xl {
+  padding-right: 5rem !important;
+}
+.padding--xl {
+  padding: 5rem !important;
+}
+code {
+  background-color: var(--ifm-code-background);
+  border: 0.1rem solid #0000001a;
+  border-radius: var(--ifm-code-border-radius);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: var(--ifm-code-font-size);
+  padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
+}
+a code {
+  color: inherit;
+}
+pre {
+  background-color: var(--ifm-pre-background);
+  border-radius: var(--ifm-pre-border-radius);
+  color: var(--ifm-pre-color);
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace);
+  padding: var(--ifm-pre-padding);
+}
+pre code {
+  background-color: initial;
+  border: none;
+  font-size: 100%;
+  line-height: inherit;
+  padding: 0;
+}
+kbd {
+  background-color: var(--ifm-color-emphasis-0);
+  border: 1px solid var(--ifm-color-emphasis-400);
+  border-radius: 0.2rem;
+  box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-400);
+  color: var(--ifm-color-emphasis-800);
+  font: 80% var(--ifm-font-family-monospace);
+  padding: 0.15rem 0.3rem;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--ifm-heading-color);
+  font-family: var(--ifm-heading-font-family);
+  font-weight: var(--ifm-heading-font-weight);
+  line-height: var(--ifm-heading-line-height);
+  margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0;
+}
+h1 {
+  font-size: var(--ifm-h1-font-size);
+}
+h2 {
+  font-size: var(--ifm-h2-font-size);
+}
+h3 {
+  font-size: var(--ifm-h3-font-size);
+}
+h4 {
+  font-size: var(--ifm-h4-font-size);
+}
+h5 {
+  font-size: var(--ifm-h5-font-size);
+}
+h6 {
+  font-size: var(--ifm-h6-font-size);
+}
+img[align='right'] {
+  padding-left: var(--image-alignment-padding);
+}
+img[align='left'] {
+  padding-right: var(--image-alignment-padding);
+}
+.markdown {
+  --ifm-h1-vertical-rhythm-top: 3;
+  --ifm-h2-vertical-rhythm-top: 2;
+  --ifm-h3-vertical-rhythm-top: 1.5;
+  --ifm-heading-vertical-rhythm-top: 1.25;
+  --ifm-h1-vertical-rhythm-bottom: 1.25;
+  --ifm-heading-vertical-rhythm-bottom: 1;
+}
+.markdown:after,
+.markdown:before {
+  content: '';
+  display: table;
+}
+.markdown:after {
+  clear: both;
+}
+.markdown h1:first-child {
+  --ifm-h1-font-size: 3rem;
+  margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
+}
+.markdown > h2 {
+  --ifm-h2-font-size: 2rem;
+  margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading));
+}
+.markdown > h3 {
+  --ifm-h3-font-size: 1.5rem;
+  margin-top: calc(var(--ifm-h3-vertical-rhythm-top) * var(--ifm-leading));
+}
+.markdown > h4,
+.markdown > h5,
+.markdown > h6 {
+  margin-top: calc(var(--ifm-heading-vertical-rhythm-top) * var(--ifm-leading));
+}
+.markdown > p,
+.markdown > pre,
+.markdown > ul,
+.tabList__CuJ {
+  margin-bottom: var(--ifm-leading);
+}
+.markdown li > p {
+  margin-top: var(--ifm-list-paragraph-margin);
+}
+.markdown li + li {
+  margin-top: var(--ifm-list-item-margin);
+}
+ol,
+ul {
+  margin: 0 0 var(--ifm-list-margin);
+  padding-left: var(--ifm-list-left-padding);
+}
+ol ol,
+ul ol {
+  list-style-type: lower-roman;
+}
+ol ol ol,
+ol ul ol,
+ul ol ol,
+ul ul ol {
+  list-style-type: lower-alpha;
+}
+table {
+  border-collapse: collapse;
+  display: block;
+  margin-bottom: var(--ifm-spacing-vertical);
+}
+table thead tr {
+  border-bottom: 2px solid var(--ifm-table-border-color);
+}
+table thead,
+table tr:nth-child(2n) {
+  background-color: var(--ifm-table-stripe-background);
+}
+table tr {
+  background-color: var(--ifm-table-background);
+  border-top: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
+}
+table td,
+table th {
+  border: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
+  padding: var(--ifm-table-cell-padding);
+}
+table th {
+  background-color: var(--ifm-table-head-background);
+  color: var(--ifm-table-head-color);
+  font-weight: var(--ifm-table-head-font-weight);
+}
+table td {
+  color: var(--ifm-table-cell-color);
+}
+strong {
+  font-weight: var(--ifm-font-weight-bold);
+}
+a {
+  color: var(--ifm-link-color);
+  text-decoration: var(--ifm-link-decoration);
+}
+a:hover {
+  color: var(--ifm-link-hover-color);
+  text-decoration: var(--ifm-link-hover-decoration);
+}
+.button:hover,
+.text--no-decoration,
+.text--no-decoration:hover,
+a:not([href]) {
+  text-decoration: none;
+}
+p {
+  margin: 0 0 var(--ifm-paragraph-margin-bottom);
+}
+blockquote {
+  border-left: var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);
+  box-shadow: var(--ifm-blockquote-shadow);
+  color: var(--ifm-blockquote-color);
+  font-size: var(--ifm-blockquote-font-size);
+  padding: var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal);
+}
+blockquote > :first-child {
+  margin-top: 0;
+}
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+hr {
+  background-color: var(--ifm-hr-background-color);
+  border: 0;
+  height: var(--ifm-hr-height);
+  margin: var(--ifm-hr-margin-vertical) 0;
+}
+.shadow--lw {
+  box-shadow: var(--ifm-global-shadow-lw) !important;
+}
+.shadow--md {
+  box-shadow: var(--ifm-global-shadow-md) !important;
+}
+.shadow--tl {
+  box-shadow: var(--ifm-global-shadow-tl) !important;
+}
+.text--primary,
+.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma {
+  color: var(--ifm-color-primary);
+}
+.text--secondary {
+  color: var(--ifm-color-secondary);
+}
+.text--success {
+  color: var(--ifm-color-success);
+}
+.text--info {
+  color: var(--ifm-color-info);
+}
+.text--warning {
+  color: var(--ifm-color-warning);
+}
+.text--danger {
+  color: var(--ifm-color-danger);
+}
+.text--center {
+  text-align: center;
+}
+.text--left {
+  text-align: left;
+}
+.text--justify {
+  text-align: justify;
+}
+.text--right {
+  text-align: right;
+}
+.text--capitalize {
+  text-transform: capitalize;
+}
+.text--lowercase {
+  text-transform: lowercase;
+}
+.admonitionHeading_Gvgb,
+.alert__heading,
+.text--uppercase {
+  text-transform: uppercase;
+}
+.text--light {
+  font-weight: var(--ifm-font-weight-light);
+}
+.text--normal {
+  font-weight: var(--ifm-font-weight-normal);
+}
+.text--semibold {
+  font-weight: var(--ifm-font-weight-semibold);
+}
+.text--bold {
+  font-weight: var(--ifm-font-weight-bold);
+}
+.text--italic {
+  font-style: italic;
+}
+.text--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text--break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+.clean-btn {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+}
+.alert,
+.alert .close {
+  color: var(--ifm-alert-foreground-color);
+}
+.clean-list {
+  padding-left: 0;
+}
+.alert--primary {
+  --ifm-alert-background-color: var(--ifm-color-primary-contrast-background);
+  --ifm-alert-background-color-highlight: #3578e526;
+  --ifm-alert-foreground-color: var(--ifm-color-primary-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-primary-dark);
+}
+.alert--secondary {
+  --ifm-alert-background-color: var(--ifm-color-secondary-contrast-background);
+  --ifm-alert-background-color-highlight: #ebedf026;
+  --ifm-alert-foreground-color: var(--ifm-color-secondary-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-secondary-dark);
+}
+.alert--success {
+  --ifm-alert-background-color: var(--ifm-color-success-contrast-background);
+  --ifm-alert-background-color-highlight: #00a40026;
+  --ifm-alert-foreground-color: var(--ifm-color-success-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-success-dark);
+}
+.alert--info {
+  --ifm-alert-background-color: var(--ifm-color-info-contrast-background);
+  --ifm-alert-background-color-highlight: #54c7ec26;
+  --ifm-alert-foreground-color: var(--ifm-color-info-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-info-dark);
+}
+.alert--warning {
+  --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
+  --ifm-alert-background-color-highlight: #ffba0026;
+  --ifm-alert-foreground-color: var(--ifm-color-warning-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-warning-dark);
+}
+.alert--danger {
+  --ifm-alert-background-color: var(--ifm-color-danger-contrast-background);
+  --ifm-alert-background-color-highlight: #fa383e26;
+  --ifm-alert-foreground-color: var(--ifm-color-danger-contrast-foreground);
+  --ifm-alert-border-color: var(--ifm-color-danger-dark);
+}
+.alert {
+  --ifm-code-background: var(--ifm-alert-background-color-highlight);
+  --ifm-link-color: var(--ifm-alert-foreground-color);
+  --ifm-link-hover-color: var(--ifm-alert-foreground-color);
+  --ifm-link-decoration: underline;
+  --ifm-tabs-color: var(--ifm-alert-foreground-color);
+  --ifm-tabs-color-active: var(--ifm-alert-foreground-color);
+  --ifm-tabs-color-active-border: var(--ifm-alert-border-color);
+  background-color: var(--ifm-alert-background-color);
+  border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
+  border-left-width: var(--ifm-alert-border-left-width);
+  border-radius: var(--ifm-alert-border-radius);
+  box-shadow: var(--ifm-alert-shadow);
+  padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
+}
+.alert__heading {
+  align-items: center;
+  display: flex;
+  font: 700 var(--ifm-h5-font-size) / var(--ifm-heading-line-height) var(--ifm-heading-font-family);
+  margin-bottom: 0.5rem;
+}
+.alert__icon {
+  display: inline-flex;
+  margin-right: 0.4em;
+}
+.alert__icon svg {
+  fill: var(--ifm-alert-foreground-color);
+  stroke: var(--ifm-alert-foreground-color);
+  stroke-width: 0;
+}
+.alert .close {
+  margin: calc(var(--ifm-alert-padding-vertical) * -1) calc(var(--ifm-alert-padding-horizontal) * -1) 0 0;
+  opacity: 0.75;
+}
+.alert .close:focus,
+.alert .close:hover {
+  opacity: 1;
+}
+.alert a {
+  text-decoration-color: var(--ifm-alert-border-color);
+}
+.alert a:hover {
+  text-decoration-thickness: 2px;
+}
+.avatar {
+  column-gap: var(--ifm-avatar-intro-margin);
+  display: flex;
+}
+.avatar__photo {
+  border-radius: 50%;
+  display: block;
+  height: var(--ifm-avatar-photo-size);
+  overflow: hidden;
+  width: var(--ifm-avatar-photo-size);
+}
+.card--full-height,
+.navbar__logo img,
+body,
+html {
+  height: 100%;
+}
+.avatar__photo--sm {
+  --ifm-avatar-photo-size: 2rem;
+}
+.avatar__photo--lg {
+  --ifm-avatar-photo-size: 4rem;
+}
+.avatar__photo--xl {
+  --ifm-avatar-photo-size: 6rem;
+}
+.avatar__intro {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  justify-content: center;
+  text-align: var(--ifm-avatar-intro-alignment);
+}
+.badge,
+.breadcrumbs__item,
+.breadcrumbs__link,
+.button,
+.dropdown > .navbar__link:after {
+  display: inline-block;
+}
+.avatar__name {
+  font: 700 var(--ifm-h4-font-size) / var(--ifm-heading-line-height) var(--ifm-font-family-base);
+}
+.avatar__subtitle {
+  margin-top: 0.25rem;
+}
+.avatar--vertical {
+  --ifm-avatar-intro-alignment: center;
+  --ifm-avatar-intro-margin: 0.5rem;
+  align-items: center;
+  flex-direction: column;
+}
+.badge {
+  background-color: var(--ifm-badge-background-color);
+  border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
+  border-radius: var(--ifm-badge-border-radius);
+  color: var(--ifm-badge-color);
+  font-size: 75%;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 1;
+  padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
+}
+.badge--primary {
+  --ifm-badge-background-color: var(--ifm-color-primary);
+}
+.badge--secondary {
+  --ifm-badge-background-color: var(--ifm-color-secondary);
+  color: var(--ifm-color-black);
+}
+.breadcrumbs__link,
+.button.button--secondary.button--outline:not(.button--active):not(:hover) {
+  color: var(--ifm-font-color-base);
+}
+.badge--success {
+  --ifm-badge-background-color: var(--ifm-color-success);
+}
+.badge--info {
+  --ifm-badge-background-color: var(--ifm-color-info);
+}
+.badge--warning {
+  --ifm-badge-background-color: var(--ifm-color-warning);
+}
+.badge--danger {
+  --ifm-badge-background-color: var(--ifm-color-danger);
+}
+.breadcrumbs {
+  margin-bottom: 0;
+  padding-left: 0;
+}
+.breadcrumbs__item:not(:last-child):after {
+  background: var(--ifm-breadcrumb-separator) center;
+  content: ' ';
+  display: inline-block;
+  filter: var(--ifm-breadcrumb-separator-filter);
+  height: calc(
+    var(--ifm-breadcrumb-separator-size) * var(--ifm-breadcrumb-size-multiplier) * var(--ifm-breadcrumb-separator-size-multiplier)
+  );
+  margin: 0 var(--ifm-breadcrumb-spacing);
+  opacity: 0.5;
+  width: calc(
+    var(--ifm-breadcrumb-separator-size) * var(--ifm-breadcrumb-size-multiplier) * var(--ifm-breadcrumb-separator-size-multiplier)
+  );
+}
+.breadcrumbs__item--active .breadcrumbs__link {
+  background: var(--ifm-breadcrumb-item-background-active);
+  color: var(--ifm-breadcrumb-color-active);
+}
+.breadcrumbs__link {
+  border-radius: var(--ifm-breadcrumb-border-radius);
+  font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier));
+  padding: calc(var(--ifm-breadcrumb-padding-vertical) * var(--ifm-breadcrumb-size-multiplier))
+    calc(var(--ifm-breadcrumb-padding-horizontal) * var(--ifm-breadcrumb-size-multiplier));
+  transition-duration: var(--ifm-transition-fast);
+  transition-property: background, color;
+}
+.breadcrumbs__link:any-link:hover,
+.breadcrumbs__link:link:hover,
+.breadcrumbs__link:visited:hover,
+area[href].breadcrumbs__link:hover {
+  background: var(--ifm-breadcrumb-item-background-active);
+  text-decoration: none;
+}
+.breadcrumbs--sm {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+}
+.breadcrumbs--lg {
+  --ifm-breadcrumb-size-multiplier: 1.2;
+}
+.button {
+  background-color: var(--ifm-button-background-color);
+  border: var(--ifm-button-border-width) solid var(--ifm-button-border-color);
+  border-radius: var(--ifm-button-border-radius);
+  cursor: pointer;
+  font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
+  font-weight: var(--ifm-button-font-weight);
+  line-height: 1.5;
+  padding: calc(var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier))
+    calc(var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier));
+  text-align: center;
+  transition-duration: var(--ifm-button-transition-duration);
+  transition-property: color, background, border-color;
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+}
+.button,
+.button:hover {
+  color: var(--ifm-button-color);
+}
+.button--outline {
+  --ifm-button-color: var(--ifm-button-border-color);
+}
+.button--outline:hover {
+  --ifm-button-background-color: var(--ifm-button-border-color);
+}
+.button--link {
+  --ifm-button-border-color: #0000;
+  color: var(--ifm-link-color);
+  text-decoration: var(--ifm-link-decoration);
+}
+.button--link.button--active,
+.button--link:active,
+.button--link:hover {
+  color: var(--ifm-link-hover-color);
+  text-decoration: var(--ifm-link-hover-decoration);
+}
+.button.disabled,
+.button:disabled,
+.button[disabled] {
+  opacity: 0.65;
+  pointer-events: none;
+}
+.button--sm {
+  --ifm-button-size-multiplier: 0.8;
+}
+.button--lg {
+  --ifm-button-size-multiplier: 1.35;
+}
+.button--block {
+  display: block;
+  width: 100%;
+}
+.button.button--secondary {
+  color: var(--ifm-color-gray-900);
+}
+:where(.button--primary) {
+  --ifm-button-background-color: var(--ifm-color-primary);
+  --ifm-button-border-color: var(--ifm-color-primary);
+}
+:where(.button--primary):not(.button--outline):hover {
+  --ifm-button-background-color: var(--ifm-color-primary-dark);
+  --ifm-button-border-color: var(--ifm-color-primary-dark);
+}
+.button--primary.button--active,
+.button--primary:active {
+  --ifm-button-background-color: var(--ifm-color-primary-darker);
+  --ifm-button-border-color: var(--ifm-color-primary-darker);
+}
+:where(.button--secondary) {
+  --ifm-button-background-color: var(--ifm-color-secondary);
+  --ifm-button-border-color: var(--ifm-color-secondary);
+}
+:where(.button--secondary):not(.button--outline):hover {
+  --ifm-button-background-color: var(--ifm-color-secondary-dark);
+  --ifm-button-border-color: var(--ifm-color-secondary-dark);
+}
+.button--secondary.button--active,
+.button--secondary:active {
+  --ifm-button-background-color: var(--ifm-color-secondary-darker);
+  --ifm-button-border-color: var(--ifm-color-secondary-darker);
+}
+:where(.button--success) {
+  --ifm-button-background-color: var(--ifm-color-success);
+  --ifm-button-border-color: var(--ifm-color-success);
+}
+:where(.button--success):not(.button--outline):hover {
+  --ifm-button-background-color: var(--ifm-color-success-dark);
+  --ifm-button-border-color: var(--ifm-color-success-dark);
+}
+.button--success.button--active,
+.button--success:active {
+  --ifm-button-background-color: var(--ifm-color-success-darker);
+  --ifm-button-border-color: var(--ifm-color-success-darker);
+}
+:where(.button--info) {
+  --ifm-button-background-color: var(--ifm-color-info);
+  --ifm-button-border-color: var(--ifm-color-info);
+}
+:where(.button--info):not(.button--outline):hover {
+  --ifm-button-background-color: var(--ifm-color-info-dark);
+  --ifm-button-border-color: var(--ifm-color-info-dark);
+}
+.button--info.button--active,
+.button--info:active {
+  --ifm-button-background-color: var(--ifm-color-info-darker);
+  --ifm-button-border-color: var(--ifm-color-info-darker);
+}
+:where(.button--warning) {
+  --ifm-button-background-color: var(--ifm-color-warning);
+  --ifm-button-border-color: var(--ifm-color-warning);
+}
+:where(.button--warning):not(.button--outline):hover {
+  --ifm-button-background-color: var(--ifm-color-warning-dark);
+  --ifm-button-border-color: var(--ifm-color-warning-dark);
+}
+.button--warning.button--active,
+.button--warning:active {
+  --ifm-button-background-color: var(--ifm-color-warning-darker);
+  --ifm-button-border-color: var(--ifm-color-warning-darker);
+}
+:where(.button--danger) {
+  --ifm-button-background-color: var(--ifm-color-danger);
+  --ifm-button-border-color: var(--ifm-color-danger);
+}
+:where(.button--danger):not(.button--outline):hover {
+  --ifm-button-background-color: var(--ifm-color-danger-dark);
+  --ifm-button-border-color: var(--ifm-color-danger-dark);
+}
+.button--danger.button--active,
+.button--danger:active {
+  --ifm-button-background-color: var(--ifm-color-danger-darker);
+  --ifm-button-border-color: var(--ifm-color-danger-darker);
+}
+.button-group {
+  display: inline-flex;
+  gap: var(--ifm-button-group-spacing);
+}
+.button-group > .button:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.button-group > .button:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.button-group--block {
+  display: flex;
+  justify-content: stretch;
+}
+.button-group--block > .button {
+  flex-grow: 1;
+}
+.card {
+  background-color: var(--ifm-card-background-color);
+  border-radius: var(--ifm-card-border-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.card__image {
+  padding-top: var(--ifm-card-vertical-spacing);
+}
+.card__image:first-child {
+  padding-top: 0;
+}
+.card__body,
+.card__footer,
+.card__header {
+  padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing);
+}
+.card__body:not(:last-child),
+.card__footer:not(:last-child),
+.card__header:not(:last-child) {
+  padding-bottom: 0;
+}
+.card__body > :last-child,
+.card__footer > :last-child,
+.card__header > :last-child {
+  margin-bottom: 0;
+}
+.card__footer {
+  margin-top: auto;
+}
+.table-of-contents {
+  font-size: 0.8rem;
+  margin-bottom: 0;
+  padding: var(--ifm-toc-padding-vertical) 0;
+}
+.table-of-contents,
+.table-of-contents ul {
+  list-style: none;
+  padding-left: var(--ifm-toc-padding-horizontal);
+}
+.table-of-contents li {
+  margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.table-of-contents__left-border {
+  border-left: 1px solid var(--ifm-toc-border-color);
+}
+.table-of-contents__link {
+  color: var(--ifm-toc-link-color);
+  display: block;
+}
+.table-of-contents__link--active,
+.table-of-contents__link--active code,
+.table-of-contents__link:hover,
+.table-of-contents__link:hover code {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+.close {
+  color: var(--ifm-color-black);
+  float: right;
+  font-size: 1.5rem;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 1;
+  opacity: 0.5;
+  padding: 1rem;
+  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.close:hover {
+  opacity: 0.7;
+}
+.close:focus,
+.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before {
+  opacity: 0.8;
+}
+.dropdown {
+  display: inline-flex;
+  font-weight: var(--ifm-dropdown-font-weight);
+  position: relative;
+  vertical-align: top;
+}
+.dropdown--hoverable:hover .dropdown__menu,
+.dropdown--show .dropdown__menu {
+  opacity: 1;
+  pointer-events: all;
+  transform: translateY(-1px);
+  visibility: visible;
+}
+#nprogress,
+.dropdown__menu,
+.navbar__item.dropdown .navbar__link:not([href]) {
+  pointer-events: none;
+}
+.dropdown--right .dropdown__menu {
+  left: inherit;
+  right: 0;
+}
+.dropdown--nocaret .navbar__link:after {
+  content: none !important;
+}
+.dropdown__menu {
+  background-color: var(--ifm-dropdown-background-color);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-md);
+  left: 0;
+  max-height: 80vh;
+  min-width: 10rem;
+  opacity: 0;
+  overflow-y: auto;
+  padding: 0.5rem;
+  position: absolute;
+  top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.3rem);
+  transform: translateY(-0.625rem);
+  transition-duration: var(--ifm-transition-fast);
+  transition-property: opacity, transform, visibility;
+  transition-timing-function: var(--ifm-transition-timing-default);
+  visibility: hidden;
+  z-index: var(--ifm-z-index-dropdown);
+}
+.menu__caret,
+.menu__link,
+.menu__list-item-collapsible {
+  border-radius: 0.25rem;
+  transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.dropdown__link {
+  border-radius: 0.25rem;
+  color: var(--ifm-dropdown-link-color);
+  display: block;
+  font-size: 0.875rem;
+  margin-top: 0.2rem;
+  padding: 0.25rem 0.5rem;
+  white-space: nowrap;
+}
+.dropdown__link--active,
+.dropdown__link:hover {
+  background-color: var(--ifm-dropdown-hover-background-color);
+  color: var(--ifm-dropdown-link-color);
+  text-decoration: none;
+}
+.dropdown__link--active,
+.dropdown__link--active:hover {
+  --ifm-dropdown-link-color: var(--ifm-link-color);
+}
+.dropdown > .navbar__link:after {
+  border-color: currentcolor #0000;
+  border-style: solid;
+  border-width: 0.4em 0.4em 0;
+  content: '';
+  margin-left: 0.3em;
+  position: relative;
+  top: 2px;
+  transform: translateY(-50%);
+}
+.footer {
+  background-color: var(--ifm-footer-background-color);
+  color: var(--ifm-footer-color);
+  padding: var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal);
+}
+.footer--dark {
+  --ifm-footer-background-color: #303846;
+  --ifm-footer-color: var(--ifm-footer-link-color);
+  --ifm-footer-link-color: var(--ifm-color-secondary);
+  --ifm-footer-title-color: var(--ifm-color-white);
+  --ifm-footer-background-color: #1b1f22;
+}
+.footer__links {
+  margin-bottom: 1rem;
+}
+.footer__link-item {
+  color: var(--ifm-footer-link-color);
+  line-height: 2;
+}
+.footer__link-item:hover {
+  color: var(--ifm-footer-link-hover-color);
+}
+.footer__link-separator {
+  margin: 0 var(--ifm-footer-link-horizontal-spacing);
+}
+.footer__logo {
+  margin-top: 1rem;
+  max-width: var(--ifm-footer-logo-max-width);
+}
+.footer__title {
+  color: var(--ifm-footer-title-color);
+  font: 700 var(--ifm-h4-font-size) / var(--ifm-heading-line-height) var(--ifm-font-family-base);
+  margin-bottom: var(--ifm-heading-margin-bottom);
+}
+.menu,
+.navbar__link {
+  font-weight: var(--ifm-font-weight-semibold);
+}
+.docItemContainer_Djhp article > :first-child,
+.docItemContainer_Djhp header + *,
+.footer__item {
+  margin-top: 0;
+}
+.admonitionContent_BuS1 > :last-child,
+.cardContainer_fWXF :last-child,
+.collapsibleContent_i85q p:last-child,
+.details_lb9f > summary > p:last-child,
+.footer__items,
+.tabItem_Ymn6 > :last-child {
+  margin-bottom: 0;
+}
+.codeBlockStandalone_MEMb,
+[type='checkbox'] {
+  padding: 0;
+}
+.hero {
+  align-items: center;
+  background-color: var(--ifm-hero-background-color);
+  color: var(--ifm-hero-text-color);
+  display: flex;
+  padding: 4rem 2rem;
+}
+.hero--primary {
+  --ifm-hero-background-color: var(--ifm-color-primary);
+  --ifm-hero-text-color: var(--ifm-font-color-base-inverse);
+}
+.hero--dark {
+  --ifm-hero-background-color: #303846;
+  --ifm-hero-text-color: var(--ifm-color-white);
+}
+.hero__title {
+  font-size: 3rem;
+}
+.hero__subtitle {
+  font-size: 1.5rem;
+}
+.menu__list {
+  margin: 0;
+  padding-left: 0;
+}
+.menu__caret,
+.menu__link {
+  padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+}
+.menu__list .menu__list {
+  flex: 0 0 100%;
+  margin-top: 0.25rem;
+  padding-left: var(--ifm-menu-link-padding-horizontal);
+}
+.menu__list-item:not(:first-child) {
+  margin-top: 0.25rem;
+}
+.menu__list-item--collapsed .menu__list {
+  height: 0;
+  overflow: hidden;
+}
+.details_lb9f[data-collapsed='false'].isBrowser_bmU9 > summary:before,
+.details_lb9f[open]:not(.isBrowser_bmU9) > summary:before,
+.menu__list-item--collapsed .menu__caret:before,
+.menu__list-item--collapsed .menu__link--sublist:after {
+  transform: rotate(90deg);
+}
+.menu__list-item-collapsible {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+.menu__caret:hover,
+.menu__link:hover,
+.menu__list-item-collapsible--active,
+.menu__list-item-collapsible:hover {
+  background: var(--ifm-menu-color-background-hover);
+}
+.menu__list-item-collapsible .menu__link--active,
+.menu__list-item-collapsible .menu__link:hover {
+  background: none !important;
+}
+.menu__caret,
+.menu__link {
+  align-items: center;
+  display: flex;
+}
+.menu__link {
+  color: var(--ifm-menu-color);
+  flex: 1;
+  line-height: 1.25;
+}
+.menu__link:hover {
+  color: var(--ifm-menu-color);
+  text-decoration: none;
+}
+.menu__caret:before,
+.menu__link--sublist-caret:after {
+  content: '';
+  height: 1.25rem;
+  transform: rotate(180deg);
+  transition: transform var(--ifm-transition-fast) linear;
+  width: 1.25rem;
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+}
+.menu__link--sublist-caret:after {
+  background: var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;
+  margin-left: auto;
+  min-width: 1.25rem;
+}
+.menu__link--active,
+.menu__link--active:hover {
+  color: var(--ifm-menu-color-active);
+}
+.navbar__brand,
+.navbar__link {
+  color: var(--ifm-navbar-link-color);
+}
+.menu__link--active:not(.menu__link--sublist) {
+  background-color: var(--ifm-menu-color-background-active);
+}
+.menu__caret:before {
+  background: var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;
+}
+.navbar--dark,
+html[data-theme='dark'] {
+  --ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%);
+}
+.navbar {
+  background-color: var(--ifm-navbar-background-color);
+  box-shadow: var(--ifm-navbar-shadow);
+  height: var(--ifm-navbar-height);
+  padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal);
+}
+.main-wrapper,
+.navbar,
+.navbar > .container,
+.navbar > .container-fluid {
+  display: flex;
+}
+.navbar--fixed-top {
+  position: sticky;
+  top: 0;
+  z-index: var(--ifm-z-index-fixed);
+}
+.navbar-sidebar,
+.navbar-sidebar__backdrop {
+  bottom: 0;
+  opacity: 0;
+  position: fixed;
+  transition-duration: var(--ifm-transition-fast);
+  transition-timing-function: ease-in-out;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+}
+.navbar__inner {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+}
+.navbar__brand {
+  align-items: center;
+  display: flex;
+  margin-right: 1rem;
+  min-width: 0;
+}
+.navbar__brand:hover {
+  color: var(--ifm-navbar-link-hover-color);
+  text-decoration: none;
+}
+.announcementBarContent_xLdY,
+.navbar__title {
+  flex: 1 1 auto;
+}
+.navbar__toggle {
+  display: none;
+  margin-right: 0.5rem;
+}
+.navbar__logo {
+  flex: 0 0 auto;
+  height: 2rem;
+  margin-right: 0.5rem;
+}
+.navbar__items {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.navbar__items--center {
+  flex: 0 0 auto;
+}
+.navbar__items--center .navbar__brand {
+  margin: 0;
+}
+.navbar__items--center + .navbar__items--right {
+  flex: 1;
+}
+.navbar__items--right {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+}
+.navbar__items--right > :last-child {
+  padding-right: 0;
+}
+.navbar__item {
+  display: inline-block;
+  padding: var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal);
+}
+.navbar__link--active,
+.navbar__link:hover {
+  color: var(--ifm-navbar-link-hover-color);
+  text-decoration: none;
+}
+.navbar--dark,
+.navbar--primary {
+  --ifm-menu-color: var(--ifm-color-gray-300);
+  --ifm-navbar-link-color: var(--ifm-color-gray-100);
+  --ifm-navbar-search-input-background-color: #ffffff1a;
+  --ifm-navbar-search-input-placeholder-color: #ffffff80;
+  color: var(--ifm-color-white);
+}
+.navbar--dark {
+  --ifm-navbar-background-color: #242526;
+  --ifm-menu-color-background-active: #ffffff0d;
+  --ifm-navbar-search-input-color: var(--ifm-color-white);
+}
+.navbar--primary {
+  --ifm-navbar-background-color: var(--ifm-color-primary);
+  --ifm-navbar-link-hover-color: var(--ifm-color-white);
+  --ifm-menu-color-active: var(--ifm-color-white);
+  --ifm-navbar-search-input-color: var(--ifm-color-emphasis-500);
+}
+.navbar__search-input {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center/1rem
+    1rem;
+  border: none;
+  border-radius: 2rem;
+  color: var(--ifm-navbar-search-input-color);
+  cursor: text;
+  display: inline-block;
+  font-size: 0.9rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 2.25rem;
+  width: 12.5rem;
+}
+.navbar__search-input::placeholder {
+  color: var(--ifm-navbar-search-input-placeholder-color);
+}
+.navbar-sidebar {
+  background-color: var(--ifm-navbar-background-color);
+  box-shadow: var(--ifm-global-shadow-md);
+  transform: translate3d(-100%, 0, 0);
+  transition-property: opacity, visibility, transform;
+  width: var(--ifm-navbar-sidebar-width);
+}
+.navbar-sidebar--show .navbar-sidebar,
+.navbar-sidebar__items {
+  transform: translateZ(0);
+}
+.navbar-sidebar--show .navbar-sidebar,
+.navbar-sidebar--show .navbar-sidebar__backdrop {
+  opacity: 1;
+  visibility: visible;
+}
+.navbar-sidebar__backdrop {
+  background-color: #0009;
+  right: 0;
+  transition-property: opacity, visibility;
+}
+.navbar-sidebar__brand {
+  align-items: center;
+  box-shadow: var(--ifm-navbar-shadow);
+  display: flex;
+  flex: 1;
+  height: var(--ifm-navbar-height);
+  padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal);
+}
+.navbar-sidebar__items {
+  display: flex;
+  height: calc(100% - var(--ifm-navbar-height));
+  transition: transform var(--ifm-transition-fast) ease-in-out;
+}
+.navbar-sidebar__items--show-secondary {
+  transform: translate3d(calc((var(--ifm-navbar-sidebar-width)) * -1), 0, 0);
+}
+.navbar-sidebar__item {
+  flex-shrink: 0;
+  padding: 0.5rem;
+  width: calc(var(--ifm-navbar-sidebar-width));
+}
+.navbar-sidebar__back {
+  background: var(--ifm-menu-color-background-active);
+  font-size: 15px;
+  font-weight: var(--ifm-button-font-weight);
+  margin: 0 0 0.2rem -0.5rem;
+  padding: 0.6rem 1.5rem;
+  position: relative;
+  text-align: left;
+  top: -0.5rem;
+  width: calc(100% + 1rem);
+}
+.navbar-sidebar__close {
+  display: flex;
+  margin-left: auto;
+}
+.pagination {
+  column-gap: var(--ifm-pagination-page-spacing);
+  display: flex;
+  font-size: var(--ifm-pagination-font-size);
+  padding-left: 0;
+}
+.pagination--sm {
+  --ifm-pagination-font-size: 0.8rem;
+  --ifm-pagination-padding-horizontal: 0.8rem;
+  --ifm-pagination-padding-vertical: 0.2rem;
+}
+.pagination--lg {
+  --ifm-pagination-font-size: 1.2rem;
+  --ifm-pagination-padding-horizontal: 1.2rem;
+  --ifm-pagination-padding-vertical: 0.3rem;
+}
+.pagination__item {
+  display: inline-flex;
+}
+.pagination__item > span {
+  padding: var(--ifm-pagination-padding-vertical);
+}
+.pagination__item--active .pagination__link {
+  color: var(--ifm-pagination-color-active);
+}
+.pagination__item--active .pagination__link,
+.pagination__item:not(.pagination__item--active):hover .pagination__link {
+  background: var(--ifm-pagination-item-active-background);
+}
+.pagination__item--disabled,
+.pagination__item[disabled] {
+  opacity: 0.25;
+  pointer-events: none;
+}
+.pagination__link {
+  border-radius: var(--ifm-pagination-border-radius);
+  color: var(--ifm-font-color-base);
+  display: inline-block;
+  padding: var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal);
+  transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.pagination__link:hover {
+  text-decoration: none;
+}
+.pagination-nav {
+  grid-gap: var(--ifm-spacing-horizontal);
+  display: grid;
+  gap: var(--ifm-spacing-horizontal);
+  grid-template-columns: repeat(2, 1fr);
+}
+.pagination-nav__link {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-pagination-nav-border-radius);
+  display: block;
+  height: 100%;
+  line-height: var(--ifm-heading-line-height);
+  padding: var(--ifm-global-spacing);
+  transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.pagination-nav__link:hover {
+  border-color: var(--ifm-pagination-nav-color-hover);
+  text-decoration: none;
+}
+.pagination-nav__link--next {
+  grid-column: 2/3;
+  text-align: right;
+}
+.pagination-nav__label {
+  font-size: var(--ifm-h4-font-size);
+  font-weight: var(--ifm-heading-font-weight);
+  word-break: break-word;
+}
+.pagination-nav__link--prev .pagination-nav__label:before {
+  content: '« ';
+}
+.pagination-nav__link--next .pagination-nav__label:after {
+  content: ' »';
+}
+.pagination-nav__sublabel {
+  color: var(--ifm-color-content-secondary);
+  font-size: var(--ifm-h5-font-size);
+  font-weight: var(--ifm-font-weight-semibold);
+  margin-bottom: 0.25rem;
+}
+.pills__item,
+.tabs {
+  font-weight: var(--ifm-font-weight-bold);
+}
+.pills {
+  display: flex;
+  gap: var(--ifm-pills-spacing);
+  padding-left: 0;
+}
+.pills__item {
+  border-radius: 0.5rem;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0.25rem 1rem;
+  transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.tabs,
+:not(.containsTaskList_mC6p > li) > .containsTaskList_mC6p {
+  padding-left: 0;
+}
+.pills__item--active {
+  color: var(--ifm-pills-color-active);
+}
+.pills__item--active,
+.pills__item:not(.pills__item--active):hover {
+  background: var(--ifm-pills-color-background-active);
+}
+.pills--block {
+  justify-content: stretch;
+}
+.pills--block .pills__item {
+  flex-grow: 1;
+  text-align: center;
+}
+.tabs {
+  color: var(--ifm-tabs-color);
+  display: flex;
+  margin-bottom: 0;
+  overflow-x: auto;
+}
+.tabs__item {
+  border-bottom: 3px solid #0000;
+  border-radius: var(--ifm-global-radius);
+  cursor: pointer;
+  display: inline-flex;
+  padding: var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);
+  transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.tabs__item--active {
+  border-bottom-color: var(--ifm-tabs-color-active-border);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  color: var(--ifm-tabs-color-active);
+}
+.tabs__item:hover {
+  background-color: var(--ifm-hover-overlay);
+}
+.tabs--block {
+  justify-content: stretch;
+}
+.tabs--block .tabs__item {
+  flex-grow: 1;
+  justify-content: center;
+}
+html[data-theme='dark'] {
+  --ifm-color-scheme: dark;
+  --ifm-color-emphasis-0: var(--ifm-color-gray-1000);
+  --ifm-color-emphasis-100: var(--ifm-color-gray-900);
+  --ifm-color-emphasis-200: var(--ifm-color-gray-800);
+  --ifm-color-emphasis-300: var(--ifm-color-gray-700);
+  --ifm-color-emphasis-400: var(--ifm-color-gray-600);
+  --ifm-color-emphasis-600: var(--ifm-color-gray-400);
+  --ifm-color-emphasis-700: var(--ifm-color-gray-300);
+  --ifm-color-emphasis-800: var(--ifm-color-gray-200);
+  --ifm-color-emphasis-900: var(--ifm-color-gray-100);
+  --ifm-color-emphasis-1000: var(--ifm-color-gray-0);
+  --ifm-background-color: #1b1b1d;
+  --ifm-background-surface-color: #242526;
+  --ifm-hover-overlay: #ffffff0d;
+  --ifm-color-content: #e3e3e3;
+  --ifm-color-content-secondary: #fff;
+  --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);
+  --ifm-code-background: #ffffff1a;
+  --ifm-scrollbar-track-background-color: #444;
+  --ifm-scrollbar-thumb-background-color: #686868;
+  --ifm-scrollbar-thumb-hover-background-color: #7a7a7a;
+  --ifm-table-stripe-background: #ffffff12;
+  --ifm-toc-border-color: var(--ifm-color-emphasis-200);
+  --ifm-color-primary-contrast-background: #102445;
+  --ifm-color-primary-contrast-foreground: #ebf2fc;
+  --ifm-color-secondary-contrast-background: #474748;
+  --ifm-color-secondary-contrast-foreground: #fdfdfe;
+  --ifm-color-success-contrast-background: #003100;
+  --ifm-color-success-contrast-foreground: #e6f6e6;
+  --ifm-color-info-contrast-background: #193c47;
+  --ifm-color-info-contrast-foreground: #eef9fd;
+  --ifm-color-warning-contrast-background: #4d3800;
+  --ifm-color-warning-contrast-foreground: #fff8e6;
+  --ifm-color-danger-contrast-background: #4b1113;
+  --ifm-color-danger-contrast-foreground: #ffebec;
+}
+#nprogress .bar {
+  background: var(--docusaurus-progress-bar-color);
+  height: 2px;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1031;
+}
+#nprogress .peg {
+  box-shadow:
+    0 0 10px var(--docusaurus-progress-bar-color),
+    0 0 5px var(--docusaurus-progress-bar-color);
+  height: 100%;
+  opacity: 1;
+  position: absolute;
+  right: 0;
+  transform: rotate(3deg) translateY(-4px);
+  width: 100px;
+}
+[data-theme='dark'] {
+  --ifm-color-primary: #00ff6e;
+  --ifm-color-primary-dark: #00e663;
+  --ifm-color-primary-darker: #00d95e;
+  --ifm-color-primary-darkest: #00b34d;
+  --ifm-color-primary-light: #1aff7d;
+  --ifm-color-primary-lighter: #26ff84;
+  --ifm-color-primary-lightest: #4dff9a;
+  --ifm-navbar-background-color: #000;
+  --ifm-background-color: #0c1418 !important;
+  --docusaurus-highlighted-code-line-bg: #0000004d;
+}
+img {
+  max-width: 100%;
+  border-radius: 10px;
+}
+.example-images p {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: flex-start;
+}
+body:not(.navigation-with-keyboard) :not(input):focus {
+  outline: 0;
+}
+#__docusaurus-base-url-issue-banner-container,
+.themedComponent_mlkZ,
+[data-theme='dark'] .lightToggleIcon_pyhR,
+[data-theme='light'] .darkToggleIcon_wfgR,
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar_mb4j {
+  display: none;
+}
+.skipToContent_fXgn {
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-color-emphasis-900);
+  left: 100%;
+  padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
+  position: fixed;
+  top: 1rem;
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+}
+.skipToContent_fXgn:focus {
+  box-shadow: var(--ifm-global-shadow-md);
+  left: 1rem;
+}
+.closeButton_CVFx {
+  line-height: 0;
+  padding: 0;
+}
+.content_knG7 {
+  font-size: 85%;
+  padding: 5px 0;
+  text-align: center;
+}
+.content_knG7 a {
+  color: inherit;
+  text-decoration: underline;
+}
+.announcementBar_mb4j {
+  align-items: center;
+  background-color: var(--ifm-color-white);
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-black);
+  display: flex;
+  height: var(--docusaurus-announcement-bar-height);
+}
+.announcementBarPlaceholder_vyr4 {
+  flex: 0 0 10px;
+}
+.announcementBarClose_gvF7 {
+  align-self: stretch;
+  flex: 0 0 30px;
+}
+.toggle_vylO {
+  height: 2rem;
+  width: 2rem;
+}
+.toggleButton_gllP {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  transition: background var(--ifm-transition-fast);
+  width: 100%;
+}
+.toggleButton_gllP:hover {
+  background: var(--ifm-color-emphasis-200);
+}
+.toggleButtonDisabled_aARS {
+  cursor: not-allowed;
+}
+.darkNavbarColorModeToggle_X3D1:hover {
+  background: var(--ifm-color-gray-800);
+}
+[data-theme='dark'] .themedComponent--dark_xIcU,
+[data-theme='light'] .themedComponent--light_NVdE,
+html:not([data-theme]) .themedComponent--light_NVdE {
+  display: initial;
+}
+.iconExternalLink_nPIU {
+  margin-left: 0.3rem;
+}
+.dropdownNavbarItemMobile_S0Fm {
+  cursor: pointer;
+}
+.iconLanguage_nlXk {
+  margin-right: 5px;
+  vertical-align: text-bottom;
+}
+@supports selector(:has(*)) {
+  .navbarSearchContainer_Bca1:not(:has(> *)) {
+    display: none;
+  }
+}
+.navbarHideable_m1mJ {
+  transition: transform var(--ifm-transition-fast) ease;
+}
+.navbarHidden_jGov {
+  transform: translate3d(0, calc(-100% - 2px), 0);
+}
+.errorBoundaryError_a6uf {
+  color: red;
+  white-space: pre-wrap;
+}
+.errorBoundaryFallback_VBag {
+  color: red;
+  padding: 0.55rem;
+}
+.footerLogoLink_BH7S {
+  opacity: 0.5;
+  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.footerLogoLink_BH7S:hover,
+.hash-link:focus,
+:hover > .hash-link {
+  opacity: 1;
+}
+.anchorWithStickyNavbar_LWe7 {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
+}
+.anchorWithHideOnScrollNavbar_WYt5 {
+  scroll-margin-top: 0.5rem;
+}
+.hash-link {
+  opacity: 0;
+  padding-left: 0.5rem;
+  transition: opacity var(--ifm-transition-fast);
+  -webkit-user-select: none;
+  user-select: none;
+}
+.hash-link:before {
+  content: '#';
+}
+.mainWrapper_z2l0 {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+.docusaurus-mt-lg {
+  margin-top: 3rem;
+}
+#__docusaurus {
+  min-height: 100vh !important;
+  display: flex;
+  flex-direction: column;
+}
+.cardContainer_fWXF {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: 0 1.5px 3px 0 #00000026;
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+}
+.cardContainer_fWXF:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 #0003;
+}
+.cardTitle_rnsV {
+  font-size: 1.2rem;
+}
+.cardDescription_PWke {
+  font-size: 0.8rem;
+}
+.iconEdit_Z9Sw {
+  margin-right: 0.3em;
+  vertical-align: sub;
+}
+.tag_zVej {
+  border: 1px solid var(--docusaurus-tag-list-border);
+  transition: border var(--ifm-transition-fast);
+}
+.tag_zVej:hover {
+  --docusaurus-tag-list-border: var(--ifm-link-color);
+  text-decoration: none;
+}
+.tagRegular_sFm0 {
+  border-radius: var(--ifm-global-radius);
+  font-size: 90%;
+  padding: 0.2rem 0.5rem 0.3rem;
+}
+.tagWithCount_h2kH {
+  align-items: center;
+  border-left: 0;
+  display: flex;
+  padding: 0 0.5rem 0 1rem;
+  position: relative;
+}
+.tagWithCount_h2kH:after,
+.tagWithCount_h2kH:before {
+  border: 1px solid var(--docusaurus-tag-list-border);
+  content: '';
+  position: absolute;
+  top: 50%;
+  transition: inherit;
+}
+.tagWithCount_h2kH:before {
+  border-bottom: 0;
+  border-right: 0;
+  height: 1.18rem;
+  right: 100%;
+  transform: translate(50%, -50%) rotate(-45deg);
+  width: 1.18rem;
+}
+.tagWithCount_h2kH:after {
+  border-radius: 50%;
+  height: 0.5rem;
+  left: 0;
+  transform: translateY(-50%);
+  width: 0.5rem;
+}
+.tagWithCount_h2kH span {
+  background: var(--ifm-color-secondary);
+  border-radius: var(--ifm-global-radius);
+  color: var(--ifm-color-black);
+  font-size: 0.7rem;
+  line-height: 1.2;
+  margin-left: 0.3rem;
+  padding: 0.1rem 0.4rem;
+}
+.tags_jXut {
+  display: inline;
+}
+.tag_QGVx {
+  display: inline-block;
+  margin: 0 0.4rem 0.5rem 0;
+}
+.lastUpdated_vwxv {
+  font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
+}
+.tocCollapsibleButton_TO0P {
+  align-items: center;
+  display: flex;
+  font-size: inherit;
+  justify-content: space-between;
+  padding: 0.4rem 0.8rem;
+  width: 100%;
+}
+.tocCollapsibleButton_TO0P:after {
+  background: var(--ifm-menu-link-sublist-icon) 50% 50%/2rem 2rem no-repeat;
+  content: '';
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+  height: 1.25rem;
+  transform: rotate(180deg);
+  transition: transform var(--ifm-transition-fast);
+  width: 1.25rem;
+}
+.tocCollapsibleButtonExpanded_MG3E:after,
+.tocCollapsibleExpanded_sAul {
+  transform: none;
+}
+.tocCollapsible_ETCw {
+  background-color: var(--ifm-menu-color-background-active);
+  border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
+}
+.buttonGroup__atx button,
+.codeBlockContainer_Ckt0 {
+  background: var(--prism-background-color);
+  color: var(--prism-color);
+}
+.tocCollapsibleContent_vkbj > ul {
+  border-left: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  font-size: 15px;
+  padding: 0.2rem 0;
+}
+.tocCollapsibleContent_vkbj ul li {
+  margin: 0.4rem 0.8rem;
+}
+.tocCollapsibleContent_vkbj a {
+  display: block;
+}
+.tableOfContents_bqdL {
+  max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+.codeBlockContainer_Ckt0 {
+  border-radius: var(--ifm-code-border-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  margin-bottom: var(--ifm-leading);
+}
+.codeBlockContent_biex {
+  border-radius: inherit;
+  direction: ltr;
+  position: relative;
+}
+.codeBlockTitle_Ktv7 {
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  font-size: var(--ifm-code-font-size);
+  font-weight: 500;
+  padding: 0.75rem var(--ifm-pre-padding);
+}
+.codeBlock_bY9V {
+  --ifm-pre-background: var(--prism-background-color);
+  margin: 0;
+  padding: 0;
+}
+.codeBlockTitle_Ktv7 + .codeBlockContent_biex .codeBlock_bY9V {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.codeBlockLines_e6Vv {
+  float: left;
+  font: inherit;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}
+.codeBlockLinesWithNumbering_o6Pm {
+  display: table;
+  padding: var(--ifm-pre-padding) 0;
+}
+.buttonGroup__atx {
+  column-gap: 0.2rem;
+  display: flex;
+  position: absolute;
+  right: calc(var(--ifm-pre-padding) / 2);
+  top: calc(var(--ifm-pre-padding) / 2);
+}
+.buttonGroup__atx button {
+  align-items: center;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  display: flex;
+  line-height: 0;
+  opacity: 0;
+  padding: 0.4rem;
+  transition: opacity var(--ifm-transition-fast) ease-in-out;
+}
+.buttonGroup__atx button:focus-visible,
+.buttonGroup__atx button:hover {
+  opacity: 1 !important;
+}
+.theme-code-block:hover .buttonGroup__atx button {
+  opacity: 0.4;
+}
+:where(:root) {
+  --docusaurus-highlighted-code-line-bg: #484d5b;
+}
+:where([data-theme='dark']) {
+  --docusaurus-highlighted-code-line-bg: #646464;
+}
+.theme-code-block-highlighted-line {
+  background-color: var(--docusaurus-highlighted-code-line-bg);
+  display: block;
+  margin: 0 calc(var(--ifm-pre-padding) * -1);
+  padding: 0 var(--ifm-pre-padding);
+}
+.codeLine_lJS_ {
+  counter-increment: a;
+  display: table-row;
+}
+.codeLineNumber_Tfdd {
+  background: var(--ifm-pre-background);
+  display: table-cell;
+  left: 0;
+  overflow-wrap: normal;
+  padding: 0 var(--ifm-pre-padding);
+  position: sticky;
+  text-align: right;
+  width: 1%;
+}
+.codeLineNumber_Tfdd:before {
+  content: counter(a);
+  opacity: 0.4;
+}
+.codeLineContent_feaV {
+  padding-right: var(--ifm-pre-padding);
+}
+.theme-code-block:hover .copyButtonCopied_obH4 {
+  opacity: 1 !important;
+}
+.copyButtonIcons_eSgA {
+  height: 1.125rem;
+  position: relative;
+  width: 1.125rem;
+}
+.copyButtonIcon_y97N,
+.copyButtonSuccessIcon_LjdS {
+  fill: currentColor;
+  height: inherit;
+  left: 0;
+  opacity: inherit;
+  position: absolute;
+  top: 0;
+  transition: all var(--ifm-transition-fast) ease;
+  width: inherit;
+}
+.copyButtonSuccessIcon_LjdS {
+  color: #00d600;
+  left: 50%;
+  opacity: 0;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0.33);
+}
+.copyButtonCopied_obH4 .copyButtonIcon_y97N {
+  opacity: 0;
+  transform: scale(0.33);
+}
+.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+  transition-delay: 75ms;
+}
+.wordWrapButtonIcon_Bwma {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+.details_lb9f {
+  --docusaurus-details-summary-arrow-size: 0.38rem;
+  --docusaurus-details-transition: transform 200ms ease;
+  --docusaurus-details-decoration-color: grey;
+}
+.details_lb9f > summary {
+  cursor: pointer;
+  padding-left: 1rem;
+  position: relative;
+}
+.details_lb9f > summary::-webkit-details-marker {
+  display: none;
+}
+.details_lb9f > summary:before {
+  border-color: #0000 #0000 #0000 var(--docusaurus-details-decoration-color);
+  border-style: solid;
+  border-width: var(--docusaurus-details-summary-arrow-size);
+  content: '';
+  left: 0;
+  position: absolute;
+  top: 0.45rem;
+  transform: rotate(0);
+  transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%;
+  transition: var(--docusaurus-details-transition);
+}
+.collapsibleContent_i85q {
+  border-top: 1px solid var(--docusaurus-details-decoration-color);
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+.details_b_Ee {
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  border: 1px solid var(--ifm-alert-border-color);
+  margin: 0 0 var(--ifm-spacing-vertical);
+}
+.img_ev3q {
+  height: auto;
+}
+.admonition_xJq3 {
+  margin-bottom: 1em;
+}
+.admonitionHeading_Gvgb {
+  font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) / var(--ifm-heading-line-height) var(--ifm-heading-font-family);
+}
+.admonitionHeading_Gvgb:not(:last-child) {
+  margin-bottom: 0.3rem;
+}
+.admonitionHeading_Gvgb code {
+  text-transform: none;
+}
+.admonitionIcon_Rf37 {
+  display: inline-block;
+  margin-right: 0.4em;
+  vertical-align: middle;
+}
+.admonitionIcon_Rf37 svg {
+  fill: var(--ifm-alert-foreground-color);
+  display: inline-block;
+  height: 1.6em;
+  width: 1.6em;
+}
+.breadcrumbHomeIcon_YNFT {
+  height: 1.1rem;
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  width: 1.1rem;
+}
+.breadcrumbsContainer_Z_bl {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
+}
+.title_kItE {
+  --ifm-h1-font-size: 3rem;
+  margin-bottom: calc(var(--ifm-leading) * 1.25);
+}
+.backToTopButton_sjWU {
+  background-color: var(--ifm-color-emphasis-200);
+  border-radius: 50%;
+  bottom: 1.3rem;
+  box-shadow: var(--ifm-global-shadow-lw);
+  height: 3rem;
+  opacity: 0;
+  position: fixed;
+  right: 1.3rem;
+  transform: scale(0);
+  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  visibility: hidden;
+  width: 3rem;
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+}
+.backToTopButton_sjWU:after {
+  background-color: var(--ifm-color-emphasis-1000);
+  content: ' ';
+  display: inline-block;
+  height: 100%;
+  -webkit-mask: var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;
+  mask: var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;
+  width: 100%;
+}
+.backToTopButtonShow_xfvO {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
+}
+[data-theme='dark']:root {
+  --docusaurus-collapse-button-bg: #ffffff0d;
+  --docusaurus-collapse-button-bg-hover: #ffffff1a;
+}
+.collapseSidebarButton_PEFL {
+  display: none;
+  margin: 0;
+}
+.docSidebarContainer_YfHR,
+.sidebarLogo_isFc {
+  display: none;
+}
+.docMainContainer_TBSr,
+.docRoot_UBD9 {
+  display: flex;
+  width: 100%;
+}
+.docsWrapper_hBAB {
+  display: flex;
+  flex: 1 0 auto;
+}
+.heroBanner_qdFl {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+}
+.heroBanner_qdFl:after {
+  animation: 10s linear infinite a;
+  aspect-ratio: 1;
+  background: radial-gradient(circle closest-side, #fff, #000 50%), conic-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red);
+  background-blend-mode: screen;
+  border-radius: 50%;
+  content: '';
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform-origin: center;
+  width: 200%;
+  z-index: -1;
+}
+@keyframes a {
+  0% {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+.button_JGCe {
+  --width: 150px;
+  background: #40c057;
+  border: 0;
+  border-radius: 3px;
+  color: #fff;
+  display: inline-block;
+  font-size: 1.2em;
+  font-weight: 700;
+  padding-block: 1em;
+  transition: 0.2s;
+  width: 200px;
+}
+.button_JGCe:hover {
+  animation: 2s linear infinite b;
+  background-image: linear-gradient(
+    90deg,
+    #fa5252,
+    #fa5252 16.65%,
+    #be4bdb 0,
+    #be4bdb 33.3%,
+    #4c6ef5 0,
+    #4c6ef5 49.95%,
+    #40c057 0,
+    #40c057 66.6%,
+    #fab005 0,
+    #fab005 83.25%,
+    #fd7e14 0,
+    #fd7e14 100%,
+    #fa5252 0
+  );
+  color: #000 !important;
+  text-decoration: none !important;
+  transform: scale(1.1) translateY(-1px);
+}
+@keyframes b {
+  to {
+    background-position: var(--width);
+  }
+}
+@media (min-width: 997px) {
+  .collapseSidebarButton_PEFL,
+  .expandButton_TmdG {
+    background-color: var(--docusaurus-collapse-button-bg);
+  }
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+  .announcementBarClose_gvF7,
+  .announcementBarPlaceholder_vyr4 {
+    flex-basis: 50px;
+  }
+  .navbarSearchContainer_Bca1 {
+    padding: var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal);
+  }
+  .lastUpdated_vwxv {
+    text-align: right;
+  }
+  .tocMobile_ITEo {
+    display: none;
+  }
+  .docItemCol_VOVn,
+  .generatedIndexPage_vN6x {
+    max-width: 75% !important;
+  }
+  .list_eTzJ article:nth-last-child(-n + 2) {
+    margin-bottom: 0 !important;
+  }
+  .collapseSidebarButton_PEFL {
+    border: 1px solid var(--ifm-toc-border-color);
+    border-radius: 0;
+    bottom: 0;
+    display: block !important;
+    height: 40px;
+    position: sticky;
+  }
+  .collapseSidebarButtonIcon_kv0_ {
+    margin-top: 4px;
+    transform: rotate(180deg);
+  }
+  .expandButtonIcon_i1dp,
+  [dir='rtl'] .collapseSidebarButtonIcon_kv0_ {
+    transform: rotate(0);
+  }
+  .collapseSidebarButton_PEFL:focus,
+  .collapseSidebarButton_PEFL:hover,
+  .expandButton_TmdG:focus,
+  .expandButton_TmdG:hover {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  }
+  .menuHtmlItem_M9Kj {
+    padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+  }
+  .menu_SIkG {
+    flex-grow: 1;
+    padding: 0.5rem;
+  }
+  @supports (scrollbar-gutter: stable) {
+    .menu_SIkG {
+      padding: 0.5rem 0 0.5rem 0.5rem;
+      scrollbar-gutter: stable;
+    }
+  }
+  .menuWithAnnouncementBar_GW3s {
+    margin-bottom: var(--docusaurus-announcement-bar-height);
+  }
+  .sidebar_njMd {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-top: var(--ifm-navbar-height);
+    width: var(--doc-sidebar-width);
+  }
+  .sidebarWithHideableNavbar_wUlq {
+    padding-top: 0;
+  }
+  .sidebarHidden_VK0M {
+    opacity: 0;
+    visibility: hidden;
+  }
+  .sidebarLogo_isFc {
+    align-items: center;
+    color: inherit !important;
+    display: flex !important;
+    margin: 0 var(--ifm-navbar-padding-horizontal);
+    max-height: var(--ifm-navbar-height);
+    min-height: var(--ifm-navbar-height);
+    text-decoration: none !important;
+  }
+  .sidebarLogo_isFc img {
+    height: 2rem;
+    margin-right: 0.5rem;
+  }
+  .expandButton_TmdG {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: background-color var(--ifm-transition-fast) ease;
+    width: 100%;
+  }
+  [dir='rtl'] .expandButtonIcon_i1dp {
+    transform: rotate(180deg);
+  }
+  .docSidebarContainer_YfHR {
+    border-right: 1px solid var(--ifm-toc-border-color);
+    -webkit-clip-path: inset(0);
+    clip-path: inset(0);
+    display: block;
+    margin-top: calc(var(--ifm-navbar-height) * -1);
+    transition: width var(--ifm-transition-fast) ease;
+    width: var(--doc-sidebar-width);
+    will-change: width;
+  }
+  .docSidebarContainerHidden_DPk8 {
+    cursor: pointer;
+    width: var(--doc-sidebar-hidden-width);
+  }
+  .sidebarViewport_aRkj {
+    height: 100%;
+    max-height: 100vh;
+    position: sticky;
+    top: 0;
+  }
+  .docMainContainer_TBSr {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+  .docMainContainerEnhanced_lQrH {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+  .docItemWrapperEnhanced_JWYK {
+    max-width: calc(var(--ifm-container-width) + var(--doc-sidebar-width)) !important;
+  }
+}
+@media (min-width: 1440px) {
+  .container {
+    max-width: var(--ifm-container-width-xl);
+  }
+}
+@media (max-width: 996px) {
+  .col {
+    --ifm-col-width: 100%;
+    flex-basis: var(--ifm-col-width);
+    margin-left: 0;
+  }
+  .footer {
+    --ifm-footer-padding-horizontal: 0;
+  }
+  .colorModeToggle_DEke,
+  .footer__link-separator,
+  .navbar__item,
+  .tableOfContents_bqdL {
+    display: none;
+  }
+  .footer__col {
+    margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
+  }
+  .footer__link-item {
+    display: block;
+  }
+  .hero {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .navbar > .container,
+  .navbar > .container-fluid {
+    padding: 0;
+  }
+  .navbar__toggle {
+    display: inherit;
+  }
+  .navbar__search-input {
+    width: 9rem;
+  }
+  .pills--block,
+  .tabs--block {
+    flex-direction: column;
+  }
+  .navbarSearchContainer_Bca1 {
+    position: absolute;
+    right: var(--ifm-navbar-padding-horizontal);
+  }
+  .docItemContainer_F8PC {
+    padding: 0 0.3rem;
+  }
+}
+@media screen and (max-width: 996px) {
+  .heroBanner_qdFl {
+    padding: 2rem;
+  }
+}
+@media (max-width: 576px) {
+  .markdown h1:first-child {
+    --ifm-h1-font-size: 2rem;
+  }
+  .markdown > h2 {
+    --ifm-h2-font-size: 1.5rem;
+  }
+  .markdown > h3 {
+    --ifm-h3-font-size: 1.25rem;
+  }
+}
+@media (hover: hover) {
+  .backToTopButton_sjWU:hover {
+    background-color: var(--ifm-color-emphasis-300);
+  }
+}
+@media (pointer: fine) {
+  .thin-scrollbar {
+    scrollbar-width: thin;
+  }
+  .thin-scrollbar::-webkit-scrollbar {
+    height: var(--ifm-scrollbar-size);
+    width: var(--ifm-scrollbar-size);
+  }
+  .thin-scrollbar::-webkit-scrollbar-track {
+    background: var(--ifm-scrollbar-track-background-color);
+    border-radius: 10px;
+  }
+  .thin-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--ifm-scrollbar-thumb-background-color);
+    border-radius: 10px;
+  }
+  .thin-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--ifm-scrollbar-thumb-hover-background-color);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ifm-transition-fast: 0ms;
+    --ifm-transition-slow: 0ms;
+  }
+}
+@media print {
+  .announcementBar_mb4j,
+  .footer,
+  .menu,
+  .navbar,
+  .pagination-nav,
+  .table-of-contents,
+  .tocMobile_ITEo {
+    display: none;
+  }
+  .tabs {
+    page-break-inside: avoid;
+  }
+  .codeBlockLines_e6Vv {
+    white-space: pre-wrap;
+  }
+}
diff --git a/docs/build/assets/css/styles.72fd27f4.css b/docs/build/assets/css/styles.72fd27f4.css
deleted file mode 100644
index d0b4842..0000000
--- a/docs/build/assets/css/styles.72fd27f4.css
+++ /dev/null
@@ -1 +0,0 @@
-.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown li,body{word-wrap:break-word}body,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow:auto}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.toggleButton_gllP,html{-webkit-tap-highlight-color:transparent}.clean-list,.containsTaskList_mC6p,.details_lb9f>summary,.dropdown__menu,.menu__list{list-style:none}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:#0000;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:#0000000d;--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:200ms;--ifm-transition-slow:400ms;--ifm-transition-timing-default:cubic-bezier(0.08,0.52,0.52,1);--ifm-global-shadow-lw:0 1px 2px 0 #0000001a;--ifm-global-shadow-md:0 5px 40px #0003;--ifm-global-shadow-tl:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a;--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:0.1rem;--ifm-code-padding-vertical:0.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:0.875rem;--ifm-h6-font-size:0.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:0.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:0.75rem;--ifm-table-background:#0000;--ifm-table-stripe-background:#00000008;--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*0.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:0.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:0.8rem;--ifm-breadcrumb-padding-vertical:0.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:0.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:0.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:0.5rem;--ifm-toc-padding-horizontal:0.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:0.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:0.75rem;--ifm-menu-link-padding-vertical:0.375rem;--ifm-menu-link-sublist-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:0.75rem;--ifm-navbar-item-padding-vertical:0.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*0.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:0.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:0.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem;--docusaurus-progress-bar-color:var(--ifm-color-primary);--ifm-color-primary:#05992a;--ifm-color-primary-dark:#058a26;--ifm-color-primary-darker:#048224;--ifm-color-primary-darkest:#046b1d;--ifm-color-primary-light:#06a82e;--ifm-color-primary-lighter:#06b030;--ifm-color-primary-lightest:#07c737;--ifm-background-color:#fdfdfd!important;--ifm-code-font-size:95%;--docusaurus-highlighted-code-line-bg:#0000001a;--docusaurus-tag-list-border:var(--ifm-color-emphasis-300);--docusaurus-announcement-bar-height:auto;--docusaurus-collapse-button-bg:#0000;--docusaurus-collapse-button-bg-hover:#0000001a;--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px}.badge--danger,.badge--info,.badge--primary,.badge--secondary,.badge--success,.badge--warning{--ifm-badge-border-color:var(--ifm-badge-background-color)}.button--link,.button--outline{--ifm-button-background-color:#0000}*{box-sizing:border-box}html{background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}iframe{border:0;color-scheme:auto}.container{margin:0 auto;max-width:var(--ifm-container-width)}.container--fluid{max-width:inherit}.row{display:flex;flex-wrap:wrap;margin:0 calc(var(--ifm-spacing-horizontal)*-1)}.margin-bottom--none,.margin-vert--none,.markdown>:last-child{margin-bottom:0!important}.margin-top--none,.margin-vert--none,.tabItem_LNqP{margin-top:0!important}.row--no-gutters{margin-left:0;margin-right:0}.margin-horiz--none,.margin-right--none{margin-right:0!important}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.menuExternalLink_NmtK,.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;flex:1 0;margin-left:0;max-width:var(--ifm-col-width)}.padding-bottom--none,.padding-vert--none{padding-bottom:0!important}.padding-top--none,.padding-vert--none{padding-top:0!important}.padding-horiz--none,.padding-left--none{padding-left:0!important}.padding-horiz--none,.padding-right--none{padding-right:0!important}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:8.33333%}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:16.66667%}.col--offset-2{margin-left:16.66667%}.col--3{--ifm-col-width:25%}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:33.33333%}.col--offset-4{margin-left:33.33333%}.col--5{--ifm-col-width:41.66667%}.col--offset-5{margin-left:41.66667%}.col--6{--ifm-col-width:50%}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:58.33333%}.col--offset-7{margin-left:58.33333%}.col--8{--ifm-col-width:66.66667%}.col--offset-8{margin-left:66.66667%}.col--9{--ifm-col-width:75%}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:83.33333%}.col--offset-10{margin-left:83.33333%}.col--11{--ifm-col-width:91.66667%}.col--offset-11{margin-left:91.66667%}.col--12{--ifm-col-width:100%}.col--offset-12{margin-left:100%}.margin-horiz--none,.margin-left--none{margin-left:0!important}.margin--none{margin:0!important}.margin-bottom--xs,.margin-vert--xs{margin-bottom:.25rem!important}.margin-top--xs,.margin-vert--xs{margin-top:.25rem!important}.margin-horiz--xs,.margin-left--xs{margin-left:.25rem!important}.margin-horiz--xs,.margin-right--xs{margin-right:.25rem!important}.margin--xs{margin:.25rem!important}.margin-bottom--sm,.margin-vert--sm{margin-bottom:.5rem!important}.margin-top--sm,.margin-vert--sm{margin-top:.5rem!important}.margin-horiz--sm,.margin-left--sm{margin-left:.5rem!important}.margin-horiz--sm,.margin-right--sm{margin-right:.5rem!important}.margin--sm{margin:.5rem!important}.margin-bottom--md,.margin-vert--md{margin-bottom:1rem!important}.margin-top--md,.margin-vert--md{margin-top:1rem!important}.margin-horiz--md,.margin-left--md{margin-left:1rem!important}.margin-horiz--md,.margin-right--md{margin-right:1rem!important}.margin--md{margin:1rem!important}.margin-bottom--lg,.margin-vert--lg{margin-bottom:2rem!important}.margin-top--lg,.margin-vert--lg{margin-top:2rem!important}.margin-horiz--lg,.margin-left--lg{margin-left:2rem!important}.margin-horiz--lg,.margin-right--lg{margin-right:2rem!important}.margin--lg{margin:2rem!important}.margin-bottom--xl,.margin-vert--xl{margin-bottom:5rem!important}.margin-top--xl,.margin-vert--xl{margin-top:5rem!important}.margin-horiz--xl,.margin-left--xl{margin-left:5rem!important}.margin-horiz--xl,.margin-right--xl{margin-right:5rem!important}.margin--xl{margin:5rem!important}.padding--none{padding:0!important}.padding-bottom--xs,.padding-vert--xs{padding-bottom:.25rem!important}.padding-top--xs,.padding-vert--xs{padding-top:.25rem!important}.padding-horiz--xs,.padding-left--xs{padding-left:.25rem!important}.padding-horiz--xs,.padding-right--xs{padding-right:.25rem!important}.padding--xs{padding:.25rem!important}.padding-bottom--sm,.padding-vert--sm{padding-bottom:.5rem!important}.padding-top--sm,.padding-vert--sm{padding-top:.5rem!important}.padding-horiz--sm,.padding-left--sm{padding-left:.5rem!important}.padding-horiz--sm,.padding-right--sm{padding-right:.5rem!important}.padding--sm{padding:.5rem!important}.padding-bottom--md,.padding-vert--md{padding-bottom:1rem!important}.padding-top--md,.padding-vert--md{padding-top:1rem!important}.padding-horiz--md,.padding-left--md{padding-left:1rem!important}.padding-horiz--md,.padding-right--md{padding-right:1rem!important}.padding--md{padding:1rem!important}.padding-bottom--lg,.padding-vert--lg{padding-bottom:2rem!important}.padding-top--lg,.padding-vert--lg{padding-top:2rem!important}.padding-horiz--lg,.padding-left--lg{padding-left:2rem!important}.padding-horiz--lg,.padding-right--lg{padding-right:2rem!important}.padding--lg{padding:2rem!important}.padding-bottom--xl,.padding-vert--xl{padding-bottom:5rem!important}.padding-top--xl,.padding-vert--xl{padding-top:5rem!important}.padding-horiz--xl,.padding-left--xl{padding-left:5rem!important}.padding-horiz--xl,.padding-right--xl{padding-right:5rem!important}.padding--xl{padding:5rem!important}code{background-color:var(--ifm-code-background);border:.1rem solid #0000001a;border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal)}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height) var(--ifm-font-family-monospace);padding:var(--ifm-pre-padding)}pre code{background-color:initial;border:none;font-size:100%;line-height:inherit;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);border-radius:.2rem;box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:after,.markdown:before{content:"";display:table}.markdown:after{clear:both}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>p,.markdown>pre,.markdown>ul,.tabList__CuJ{margin-bottom:var(--ifm-leading)}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ol,ul{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}table{border-collapse:collapse;display:block;margin-bottom:var(--ifm-spacing-vertical)}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead,table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width) solid var(--ifm-table-border-color)}table td,table th{border:var(--ifm-table-border-width) solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}a:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button:hover,.text--no-decoration,.text--no-decoration:hover,a:not([href]){-webkit-text-decoration:none;text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);padding:var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);border:0;height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical) 0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary,.wordWrapButtonEnabled_uzNF .wordWrapButtonIcon_b1P5{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.admonitionHeading_Gvgb,.alert__heading,.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--break{word-wrap:break-word!important;word-break:break-word!important}.clean-btn{background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;padding:0}.alert,.alert .close{color:var(--ifm-alert-foreground-color)}.clean-list{padding-left:0}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:#3578e526;--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:#ebedf026;--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:#00a40026;--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:#54c7ec26;--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:#ffba0026;--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:#fa383e26;--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);padding:var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal)}.alert__heading{align-items:center;display:flex;font:700 var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family);margin-bottom:.5rem}.alert__icon{display:inline-flex;margin-right:.4em}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{margin:calc(var(--ifm-alert-padding-vertical)*-1) calc(var(--ifm-alert-padding-horizontal)*-1) 0 0;opacity:.75}.alert .close:focus,.alert .close:hover{opacity:1}.alert a{text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{border-radius:50%;display:block;height:var(--ifm-avatar-photo-size);overflow:hidden;width:var(--ifm-avatar-photo-size)}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{display:flex;flex:1 1;flex-direction:column;justify-content:center;text-align:var(--ifm-avatar-intro-alignment)}.badge,.breadcrumbs__item,.breadcrumbs__link,.button,.dropdown>.navbar__link:after{display:inline-block}.avatar__name{font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:0.5rem;align-items:center;flex-direction:column}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);line-height:1;padding:var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal)}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);color:var(--ifm-color-black)}.breadcrumbs__link,.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator) center;content:" ";display:inline-block;filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier))}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier)) calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-duration:var(--ifm-transition-fast);transition-property:background,color}.breadcrumbs__link:any-link:hover,.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:0.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width) solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);line-height:1.5;padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;transition-duration:var(--ifm-button-transition-duration);transition-property:color,background,border-color;-webkit-user-select:none;user-select:none;white-space:nowrap}.button,.button:hover{color:var(--ifm-button-color)}.button--outline{--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--link{--ifm-button-border-color:#0000;color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}.button--link.button--active,.button--link:active,.button--link:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.dropdown__link--active,.dropdown__link:hover,.menu__link:hover,.navbar__brand:hover,.navbar__link--active,.navbar__link:hover,.pagination-nav__link:hover,.pagination__link:hover,.tag_zVej:hover{-webkit-text-decoration:none;text-decoration:none}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:0.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{display:block;width:100%}.button.button--secondary{color:var(--ifm-color-gray-900)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary.button--active,.button--primary:active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary.button--active,.button--secondary:active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success.button--active,.button--success:active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info.button--active,.button--info:active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning.button--active,.button--warning:active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger.button--active,.button--danger:active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{display:inline-flex;gap:var(--ifm-button-group-spacing)}.button-group>.button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.button-group>.button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.button-group--block{display:flex;justify-content:stretch}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);display:flex;flex-direction:column;overflow:hidden}.card--full-height{height:100%}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__body,.card__footer,.card__header{padding:var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing)}.card__body:not(:last-child),.card__footer:not(:last-child),.card__header:not(:last-child){padding-bottom:0}.card__body>:last-child,.card__footer>:last-child,.card__header>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{font-size:.8rem;margin-bottom:0;padding:var(--ifm-toc-padding-vertical) 0}.table-of-contents,.table-of-contents ul{list-style:none;padding-left:var(--ifm-toc-padding-horizontal)}.table-of-contents li{margin:var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link--active,.table-of-contents__link--active code,.table-of-contents__link:hover,.table-of-contents__link:hover code{color:var(--ifm-color-primary);-webkit-text-decoration:none;text-decoration:none}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);line-height:1;opacity:.5;padding:1rem;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.close:hover{opacity:.7}.close:focus,.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before{opacity:.8}.dropdown{display:inline-flex;font-weight:var(--ifm-dropdown-font-weight);position:relative;vertical-align:top}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;transform:translateY(-1px);visibility:visible}#nprogress,.dropdown__menu,.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);left:0;max-height:80vh;min-width:10rem;opacity:0;overflow-y:auto;padding:.5rem;position:absolute;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);transform:translateY(-.625rem);transition-duration:var(--ifm-transition-fast);transition-property:opacity,transform,visibility;transition-timing-function:var(--ifm-transition-timing-default);visibility:hidden;z-index:var(--ifm-z-index-dropdown)}.menu__caret,.menu__link,.menu__list-item-collapsible{border-radius:.25rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.dropdown__link{border-radius:.25rem;color:var(--ifm-dropdown-link-color);display:block;font-size:.875rem;margin-top:.2rem;padding:.25rem .5rem;white-space:nowrap}.dropdown__link--active,.dropdown__link:hover{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color)}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{border-color:currentcolor #0000;border-style:solid;border-width:.4em .4em 0;content:"";margin-left:.3em;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white);--ifm-footer-background-color:#1b1f22}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{margin-top:1rem;max-width:var(--ifm-footer-logo-max-width)}.footer__title{color:var(--ifm-footer-title-color);font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.menu,.navbar__link{font-weight:var(--ifm-font-weight-semibold)}.docItemContainer_Djhp article>:first-child,.docItemContainer_Djhp header+*,.footer__item{margin-top:0}.admonitionContent_BuS1>:last-child,.cardContainer_fWXF :last-child,.collapsibleContent_i85q p:last-child,.details_lb9f>summary>p:last-child,.footer__items,.tabItem_Ymn6>:last-child{margin-bottom:0}.codeBlockStandalone_MEMb,[type=checkbox]{padding:0}.hero{align-items:center;background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);display:flex;padding:4rem 2rem}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu__list{margin:0;padding-left:0}.menu__caret,.menu__link{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu__list .menu__list{flex:0 0 100%;margin-top:.25rem;padding-left:var(--ifm-menu-link-padding-horizontal)}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.details_lb9f[data-collapsed=false].isBrowser_bmU9>summary:before,.details_lb9f[open]:not(.isBrowser_bmU9)>summary:before,.menu__list-item--collapsed .menu__caret:before,.menu__list-item--collapsed .menu__link--sublist:after{transform:rotate(90deg)}.menu__list-item-collapsible{display:flex;flex-wrap:wrap;position:relative}.menu__caret:hover,.menu__link:hover,.menu__list-item-collapsible--active,.menu__list-item-collapsible:hover{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link--active,.menu__list-item-collapsible .menu__link:hover{background:none!important}.menu__caret,.menu__link{align-items:center;display:flex}.navbar-sidebar,.navbar-sidebar__backdrop{bottom:0;opacity:0;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;top:0;left:0;visibility:hidden}.menu__link{color:var(--ifm-menu-color);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color)}.menu__caret:before,.menu__link--sublist-caret:after{height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast) linear;width:1.25rem;content:"";filter:var(--ifm-menu-link-sublist-icon-filter)}.menu__link--sublist-caret:after{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;margin-left:auto;min-width:1.25rem}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.navbar__brand,.navbar__link{color:var(--ifm-navbar-link-color)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret:before{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem}.navbar--dark,html[data-theme=dark]{--ifm-menu-link-sublist-icon-filter:invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.main-wrapper,.navbar,.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{position:sticky;top:0;z-index:var(--ifm-z-index-fixed)}.navbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.navbar__brand{align-items:center;display:flex;margin-right:1rem;min-width:0}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color)}.announcementBarContent_xLdY,.navbar__title{flex:1 1 auto}.navbar__toggle{display:none;margin-right:.5rem}.navbar__logo{flex:0 0 auto;height:2rem;margin-right:.5rem}.docCardListItem_W1sv>*,.navbar__logo img,body,html{height:100%}.navbar__items{align-items:center;display:flex;flex:1;min-width:0}.navbar__items--center{flex:0 0 auto}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:0 0 auto;justify-content:flex-end}.navbar__item{display:inline-block;padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.navbar__link--active,.navbar__link:hover{color:var(--ifm-navbar-link-hover-color)}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:#ffffff1a;--ifm-navbar-search-input-placeholder-color:#ffffff80;color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-menu-color-background-active:#ffffff0d;--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{appearance:none;background:var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat .75rem center/1rem 1rem;border:none;border-radius:2rem;color:var(--ifm-navbar-search-input-color);cursor:text;display:inline-block;font-size:1rem;height:2rem;padding:0 .5rem 0 2.25rem;width:12.5rem}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);position:fixed;transform:translate3d(-100%,0,0);transition-property:opacity,visibility,transform;width:var(--ifm-navbar-sidebar-width)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar__items{transform:translateZ(0)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar__backdrop{background-color:#0009;position:fixed;right:0;transition-property:opacity,visibility}.navbar-sidebar__brand{align-items:center;box-shadow:var(--ifm-navbar-shadow);display:flex;flex:1;height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar-sidebar__items{display:flex;height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast) ease-in-out}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{flex-shrink:0;padding:.5rem;width:calc(var(--ifm-navbar-sidebar-width))}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;text-align:left;top:-.5rem;width:calc(100% + 1rem)}.navbar-sidebar__close{display:flex;margin-left:auto}.pagination{column-gap:var(--ifm-pagination-page-spacing);display:flex;font-size:var(--ifm-pagination-font-size);padding-left:0}.pagination--sm{--ifm-pagination-font-size:0.8rem;--ifm-pagination-padding-horizontal:0.8rem;--ifm-pagination-padding-vertical:0.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:0.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{color:var(--ifm-pagination-color-active)}.pagination__item--active .pagination__link,.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);display:inline-block;padding:var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav{display:grid;grid-gap:var(--ifm-spacing-horizontal);gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr)}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);display:block;height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover)}.pagination-nav__link--next{grid-column:2/3;text-align:right}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills__item,.tabs{font-weight:var(--ifm-font-weight-bold)}.pills{display:flex;gap:var(--ifm-pills-spacing);padding-left:0}.pills__item{border-radius:.5rem;cursor:pointer;display:inline-block;padding:.25rem 1rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs,:not(.containsTaskList_mC6p>li)>.containsTaskList_mC6p{padding-left:0}.pills__item--active{color:var(--ifm-pills-color-active)}.pills__item--active,.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{flex-grow:1;text-align:center}.tabs{color:var(--ifm-tabs-color);display:flex;margin-bottom:0;overflow-x:auto}.tabs__item{border-bottom:3px solid #0000;border-radius:var(--ifm-global-radius);cursor:pointer;display:inline-flex;padding:var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--ifm-tabs-color-active)}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:#ffffff0d;--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);--ifm-code-background:#ffffff1a;--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:#ffffff12;--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec}#nprogress .bar{background:var(--docusaurus-progress-bar-color);height:2px;left:0;position:fixed;top:0;width:100%;z-index:1031}#nprogress .peg{box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);height:100%;opacity:1;position:absolute;right:0;transform:rotate(3deg) translateY(-4px);width:100px}[data-theme=dark]{--ifm-color-primary:#00ff6e;--ifm-color-primary-dark:#00e663;--ifm-color-primary-darker:#00d95e;--ifm-color-primary-darkest:#00b34d;--ifm-color-primary-light:#1aff7d;--ifm-color-primary-lighter:#26ff84;--ifm-color-primary-lightest:#4dff9a;--ifm-navbar-background-color:#000;--ifm-background-color:#0c1418!important;--docusaurus-highlighted-code-line-bg:#0000004d}img{max-width:100%;border-radius:10px}.example-images p{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:flex-start}.tag_zVej{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_zVej:hover{--docusaurus-tag-list-border:var(--ifm-link-color)}.tagRegular_sFm0{border-radius:var(--ifm-global-radius);font-size:90%;padding:.2rem .5rem .3rem}.tagWithCount_h2kH{align-items:center;border-left:0;display:flex;padding:0 .5rem 0 1rem;position:relative}.tagWithCount_h2kH:after,.tagWithCount_h2kH:before{border:1px solid var(--docusaurus-tag-list-border);content:"";position:absolute;top:50%;transition:inherit}.tagWithCount_h2kH:before{border-bottom:0;border-right:0;height:1.18rem;right:100%;transform:translate(50%,-50%) rotate(-45deg);width:1.18rem}.tagWithCount_h2kH:after{border-radius:50%;height:.5rem;left:0;transform:translateY(-50%);width:.5rem}.tagWithCount_h2kH span{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.7rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.tags_jXut{display:inline}.tag_QGVx{display:inline-block;margin:0 .4rem .5rem 0}.iconEdit_Z9Sw{margin-right:.3em;vertical-align:sub}.lastUpdated_JAkA{font-size:smaller;font-style:italic;margin-top:.2rem}.tocCollapsibleButton_TO0P{align-items:center;display:flex;font-size:inherit;justify-content:space-between;padding:.4rem .8rem;width:100%}.tocCollapsibleButton_TO0P:after{background:var(--ifm-menu-link-sublist-icon) 50% 50%/2rem 2rem no-repeat;content:"";filter:var(--ifm-menu-link-sublist-icon-filter);height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast);width:1.25rem}.tocCollapsibleButtonExpanded_MG3E:after,.tocCollapsibleExpanded_sAul{transform:none}.tocCollapsible_ETCw{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_vkbj>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);font-size:15px;padding:.2rem 0}.tocCollapsibleContent_vkbj ul li{margin:.4rem .8rem}.tocCollapsibleContent_vkbj a{display:block}.tableOfContents_bqdL{max-height:calc(100vh - var(--ifm-navbar-height) - 2rem);overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 1rem)}.backToTopButton_sjWU{background-color:var(--ifm-color-emphasis-200);border-radius:50%;bottom:1.3rem;box-shadow:var(--ifm-global-shadow-lw);height:3rem;opacity:0;position:fixed;right:1.3rem;transform:scale(0);transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default);visibility:hidden;width:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1)}.backToTopButton_sjWU:after{background-color:var(--ifm-color-emphasis-1000);content:" ";display:inline-block;height:100%;-webkit-mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;width:100%}.backToTopButtonShow_xfvO{opacity:1;transform:scale(1);visibility:visible}.skipToContent_fXgn{background-color:var(--ifm-background-surface-color);color:var(--ifm-color-emphasis-900);left:100%;padding:calc(var(--ifm-global-spacing)/2) var(--ifm-global-spacing);position:fixed;top:1rem;z-index:calc(var(--ifm-z-index-fixed) + 1)}.skipToContent_fXgn:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_CVFx{line-height:0;padding:0}.content_knG7{font-size:85%;padding:5px 0;text-align:center}.content_knG7 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.announcementBar_mb4j{align-items:center;background-color:var(--ifm-color-white);border-bottom:1px solid var(--ifm-color-emphasis-100);color:var(--ifm-color-black);display:flex;height:var(--docusaurus-announcement-bar-height)}#__docusaurus-base-url-issue-banner-container,.docSidebarContainer_YfHR,.navbarSearchContainer_Bca1:empty,.sidebarLogo_isFc,.themedComponent_mlkZ,.toggleIcon_g3eP,html[data-announcement-bar-initially-dismissed=true] .announcementBar_mb4j{display:none}.announcementBarPlaceholder_vyr4{flex:0 0 10px}.announcementBarClose_gvF7{align-self:stretch;flex:0 0 30px}.toggle_vylO{height:2rem;width:2rem}.toggleButton_gllP{align-items:center;border-radius:50%;display:flex;height:100%;justify-content:center;transition:background var(--ifm-transition-fast);width:100%}.toggleButton_gllP:hover{background:var(--ifm-color-emphasis-200)}[data-theme-choice=dark] .darkToggleIcon_wfgR,[data-theme-choice=light] .lightToggleIcon_pyhR,[data-theme-choice=system] .systemToggleIcon_QzmC,[data-theme=dark] .themedComponent--dark_xIcU,[data-theme=light] .themedComponent--light_NVdE,html:not([data-theme]) .themedComponent--light_NVdE{display:initial}.toggleButtonDisabled_aARS{cursor:not-allowed}.darkNavbarColorModeToggle_X3D1:hover{background:var(--ifm-color-gray-800)}[data-theme=dark]:root{--docusaurus-collapse-button-bg:#ffffff0d;--docusaurus-collapse-button-bg-hover:#ffffff1a}.collapseSidebarButton_PEFL{display:none;margin:0}.iconExternalLink_nPIU{margin-left:.3rem}.docMainContainer_TBSr,.docRoot_UBD9{display:flex;width:100%}.docsWrapper_hBAB{display:flex;flex:1 0 auto}.dropdownNavbarItemMobile_J0Sd{cursor:pointer}.iconLanguage_nlXk{margin-right:5px;vertical-align:text-bottom}.navbarHideable_m1mJ{transition:transform var(--ifm-transition-fast) ease}.navbarHidden_jGov{transform:translate3d(0,calc(-100% - 2px),0)}.navbar__items--right>:last-child{padding-right:0}.errorBoundaryError_a6uf{color:red;white-space:pre-wrap}.errorBoundaryFallback_VBag{color:red;padding:.55rem}.buttonGroup_M5ko button,.codeBlockContainer_Ckt0{background:var(--prism-background-color);color:var(--prism-color)}.footerLogoLink_BH7S{opacity:.5;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.footerLogoLink_BH7S:hover,.hash-link:focus,:hover>.hash-link{opacity:1}body:not(.navigation-with-keyboard) :not(input):focus{outline:0}.anchorWithStickyNavbar_LWe7{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_WYt5{scroll-margin-top:.5rem}.hash-link{opacity:0;padding-left:.5rem;transition:opacity var(--ifm-transition-fast);-webkit-user-select:none;user-select:none}.hash-link:before{content:"#"}.mainWrapper_z2l0{display:flex;flex:1 0 auto;flex-direction:column}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{min-height:100vh!important;display:flex;flex-direction:column}.cardContainer_fWXF{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);box-shadow:0 1.5px 3px 0 #00000026;transition:all var(--ifm-transition-fast) ease;transition-property:border,box-shadow}.cardContainer_fWXF:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px 0 #0003}.cardTitle_rnsV{font-size:1.2rem}.cardDescription_PWke{font-size:.8rem}.docCardListItem_W1sv{margin-bottom:2rem}.codeBlockContainer_Ckt0{border-radius:var(--ifm-code-border-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.codeBlock_bY9V{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockLines_e6Vv{float:left;font:inherit;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_o6Pm{display:table;padding:var(--ifm-pre-padding) 0}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);display:block;margin:0 calc(var(--ifm-pre-padding)*-1);padding:0 var(--ifm-pre-padding)}.codeLine_lJS_{counter-increment:a;display:table-row}.codeLineNumber_Tfdd{background:var(--ifm-pre-background);display:table-cell;left:0;overflow-wrap:normal;padding:0 var(--ifm-pre-padding);position:sticky;text-align:right;width:1%}.codeLineNumber_Tfdd:before{content:counter(a);opacity:.4}.codeLineContent_feaV{padding-right:var(--ifm-pre-padding)}.theme-code-block:hover .copyButtonCopied_Vdqa{opacity:1!important}.copyButtonIcons_IEyt{height:1.125rem;position:relative;width:1.125rem}.copyButtonIcon_TrPX,.copyButtonSuccessIcon_cVMy{left:0;position:absolute;top:0;fill:currentColor;height:inherit;opacity:inherit;transition:all var(--ifm-transition-fast) ease;width:inherit}.copyButtonSuccessIcon_cVMy{color:#00d600;left:50%;opacity:0;top:50%;transform:translate(-50%,-50%) scale(.33)}.copyButtonCopied_Vdqa .copyButtonIcon_TrPX{opacity:0;transform:scale(.33)}.copyButtonCopied_Vdqa .copyButtonSuccessIcon_cVMy{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:75ms}.wordWrapButtonIcon_b1P5{height:1.2rem;width:1.2rem}.buttonGroup_M5ko{column-gap:.2rem;display:flex;position:absolute;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2)}.buttonGroup_M5ko button{align-items:center;border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);display:flex;line-height:0;opacity:0;padding:.4rem;transition:opacity var(--ifm-transition-fast) ease-in-out}.buttonGroup_M5ko button:focus-visible,.buttonGroup_M5ko button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup_M5ko button{opacity:.4}.codeBlockContent_QJqH{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_OeMC{border-bottom:1px solid var(--ifm-color-emphasis-300);border-top-left-radius:inherit;border-top-right-radius:inherit;font-size:var(--ifm-code-font-size);font-weight:500;padding:.75rem var(--ifm-pre-padding)}.codeBlockTitle_OeMC+.codeBlockContent_QJqH .codeBlock_a8dz{border-top-left-radius:0;border-top-right-radius:0}.details_lb9f{--docusaurus-details-summary-arrow-size:0.38rem;--docusaurus-details-transition:transform 200ms ease;--docusaurus-details-decoration-color:grey}.details_lb9f>summary{cursor:pointer;padding-left:1rem;position:relative}.details_lb9f>summary::-webkit-details-marker{display:none}.details_lb9f>summary:before{border-color:#0000 #0000 #0000 var(--docusaurus-details-decoration-color);border-style:solid;border-width:var(--docusaurus-details-summary-arrow-size);content:"";left:0;position:absolute;top:.45rem;transform:rotate(0);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2) 50%;transition:var(--docusaurus-details-transition)}.collapsibleContent_i85q{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.details_b_Ee{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast) ease;border:1px solid var(--ifm-alert-border-color);margin:0 0 var(--ifm-spacing-vertical)}.img_ev3q{height:auto}.admonition_xJq3{margin-bottom:1em}.admonitionHeading_Gvgb{font:var(--ifm-heading-font-weight) var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family)}.admonitionHeading_Gvgb:not(:last-child){margin-bottom:.3rem}.admonitionHeading_Gvgb code{text-transform:none}.admonitionIcon_Rf37{display:inline-block;margin-right:.4em;vertical-align:middle}.admonitionIcon_Rf37 svg{display:inline-block;height:1.6em;width:1.6em;fill:var(--ifm-alert-foreground-color)}.breadcrumbHomeIcon_YNFT{height:1.1rem;position:relative;top:1px;vertical-align:top;width:1.1rem}.breadcrumbsContainer_Z_bl{--ifm-breadcrumb-size-multiplier:0.8;margin-bottom:.8rem}.title_kItE{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-leading)*1.25)}.heroBanner_qdFl{align-items:center;display:flex;flex:1;justify-content:center;overflow:hidden;position:relative;text-align:center}.heroBanner_qdFl:after{animation:10s linear infinite a;aspect-ratio:1;background:radial-gradient(circle closest-side,#fff,#000 50%),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);background-blend-mode:screen;border-radius:50%;content:"";left:50%;position:absolute;top:50%;transform-origin:center;width:200%;z-index:-1}@keyframes a{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}.button_JGCe{--width:150px;background:#40c057;border:0;border-radius:3px;color:#fff;display:inline-block;font-size:1.2em;font-weight:700;padding-block:1em;transition:.2s;width:200px}.button_JGCe:hover{animation:2s linear infinite b;background-image:linear-gradient(90deg,#fa5252,#fa5252 16.65%,#be4bdb 0,#be4bdb 33.3%,#4c6ef5 0,#4c6ef5 49.95%,#40c057 0,#40c057 66.6%,#fab005 0,#fab005 83.25%,#fd7e14 0,#fd7e14 100%,#fa5252 0);color:#000!important;-webkit-text-decoration:none!important;text-decoration:none!important;transform:scale(1.1) translateY(-1px)}@keyframes b{to{background-position:var(--width)}}@media (min-width:997px){.collapseSidebarButton_PEFL,.expandButton_TmdG{background-color:var(--docusaurus-collapse-button-bg)}.lastUpdated_JAkA{text-align:right}.tocMobile_ITEo{display:none}:root{--docusaurus-announcement-bar-height:30px}.announcementBarClose_gvF7,.announcementBarPlaceholder_vyr4{flex-basis:50px}.collapseSidebarButton_PEFL{border:1px solid var(--ifm-toc-border-color);border-radius:0;bottom:0;display:block!important;height:40px;position:sticky}.collapseSidebarButtonIcon_kv0_{margin-top:4px;transform:rotate(180deg)}.expandButtonIcon_i1dp,[dir=rtl] .collapseSidebarButtonIcon_kv0_{transform:rotate(0)}.collapseSidebarButton_PEFL:focus,.collapseSidebarButton_PEFL:hover,.expandButton_TmdG:focus,.expandButton_TmdG:hover{background-color:var(--docusaurus-collapse-button-bg-hover)}.menuHtmlItem_M9Kj{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu_SIkG{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_SIkG{padding:.5rem 0 .5rem .5rem;scrollbar-gutter:stable}}.menuWithAnnouncementBar_GW3s{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_njMd{display:flex;flex-direction:column;height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width)}.sidebarWithHideableNavbar_wUlq{padding-top:0}.sidebarHidden_VK0M{opacity:0;visibility:hidden}.sidebarLogo_isFc{align-items:center;color:inherit!important;display:flex!important;margin:0 var(--ifm-navbar-padding-horizontal);max-height:var(--ifm-navbar-height);min-height:var(--ifm-navbar-height);-webkit-text-decoration:none!important;text-decoration:none!important}.sidebarLogo_isFc img{height:2rem;margin-right:.5rem}.expandButton_TmdG{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;transition:background-color var(--ifm-transition-fast) ease;width:100%}[dir=rtl] .expandButtonIcon_i1dp{transform:rotate(180deg)}.docSidebarContainer_YfHR{border-right:1px solid var(--ifm-toc-border-color);clip-path:inset(0);display:block;margin-top:calc(var(--ifm-navbar-height)*-1);transition:width var(--ifm-transition-fast) ease;width:var(--doc-sidebar-width);will-change:width}.docSidebarContainerHidden_DPk8{cursor:pointer;width:var(--doc-sidebar-hidden-width)}.sidebarViewport_aRkj{height:100%;max-height:100vh;position:sticky;top:0}.docMainContainer_TBSr{flex-grow:1;max-width:calc(100% - var(--doc-sidebar-width))}.docMainContainerEnhanced_lQrH{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_JWYK{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}.navbarSearchContainer_Bca1{padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.docItemCol_VOVn,.generatedIndexPage_vN6x{max-width:75%!important}}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.colorModeToggle_DEke,.footer__link-separator,.navbar__item,.tableOfContents_bqdL{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{display:block;width:max-content}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}.docItemContainer_F8PC{padding:0 .3rem}.navbarSearchContainer_Bca1{position:absolute;right:var(--ifm-navbar-padding-horizontal)}}@media screen and (max-width:996px){.heroBanner_qdFl{padding:2rem}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}}@media (hover:hover){.backToTopButton_sjWU:hover{background-color:var(--ifm-color-emphasis-300)}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0ms;--ifm-transition-slow:0ms}}@media print{.announcementBar_mb4j,.footer,.menu,.navbar,.pagination-nav,.table-of-contents,.tocMobile_ITEo{display:none}.tabs{page-break-inside:avoid}.codeBlockLines_e6Vv{white-space:pre-wrap}}
\ No newline at end of file
diff --git a/docs/build/assets/js/0489dd59.8ae8e7ae.js b/docs/build/assets/js/0489dd59.8ae8e7ae.js
deleted file mode 100644
index 7f61d6e..0000000
--- a/docs/build/assets/js/0489dd59.8ae8e7ae.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[80],{5455:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"RGB","description":"API documentation for RGB Slider components","slug":"/category/rgb","permalink":"/reanimated-color-picker/docs/category/rgb","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"LuminanceCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"},"next":{"title":"RedSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/126391be.301971e7.js b/docs/build/assets/js/126391be.301971e7.js
deleted file mode 100644
index 4eb7bef..0000000
--- a/docs/build/assets/js/126391be.301971e7.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[10],{6086:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>p,frontMatter:()=>s,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"API/Preview/PreviewText","title":"<PreviewText />","description":"A React Native <Text> component that displays the preview color text.","source":"@site/docs/API/Preview/PreviewText.md","sourceDirName":"API/Preview","slug":"/API/Preview/PreviewText","permalink":"/reanimated-color-picker/docs/API/Preview/PreviewText","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1,"sidebar_label":"PreviewText","description":"A React Native <Text> component that displays the preview color text."},"sidebar":"tutorialSidebar","previous":{"title":"Preview","permalink":"/reanimated-color-picker/docs/API/Preview/"},"next":{"title":"InputWidget","permalink":"/reanimated-color-picker/docs/API/Preview/InputWidget"}}');var o=r(4848),n=r(8453);const s={sidebar_position:1,sidebar_label:"PreviewText",description:"A React Native <Text> component that displays the preview color text."},c="<PreviewText />",l={},d=[{value:"Props",id:"props",level:2},{value:"<code>colorFormat</code>",id:"colorformat",level:3},{value:"<code>style</code>",id:"style",level:3}];function a(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ul:"ul",...(0,n.R)(),...e.components},{Formats:r}=t;return r||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Formats",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"previewtext-",children:(0,o.jsx)(t.code,{children:"<PreviewText />"})})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["A React Native ",(0,o.jsx)(t.code,{children:"<Text>"})," component that displays the preview color text."]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(t.h3,{id:"colorformat",children:(0,o.jsx)(t.code,{children:"colorFormat"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Preview color's format."}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.code,{children:"type: string"})}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"values:"}),(0,o.jsx)(r,{})]}),"\n"]}),"\n",(0,o.jsx)(t.h3,{id:"style",children:(0,o.jsx)(t.code,{children:"style"})}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Preview text style."}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.code,{children:"type: TextStyle"})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,t,r)=>{r.d(t,{R:()=>s,x:()=>c});var i=r(6540);const o={},n=i.createContext(o);function s(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/126391be.ea648361.js b/docs/build/assets/js/126391be.ea648361.js
new file mode 100644
index 0000000..081611f
--- /dev/null
+++ b/docs/build/assets/js/126391be.ea648361.js
@@ -0,0 +1,146 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [985],
+  {
+    7631: (e, t, r) => {
+      r.r(t),
+        r.d(t, {
+          assets: () => l,
+          contentTitle: () => s,
+          default: () => p,
+          frontMatter: () => n,
+          metadata: () => c,
+          toc: () => d,
+        });
+      var i = r(5893),
+        o = r(1151);
+      const n = {
+          sidebar_position: 1,
+          sidebar_label: 'PreviewText',
+          description: 'A React Native <Text> component that displays the preview color text.',
+        },
+        s = '<PreviewText />',
+        c = {
+          id: 'API/Preview/PreviewText',
+          title: '<PreviewText />',
+          description: 'A React Native <Text> component that displays the preview color text.',
+          source: '@site/docs/API/Preview/PreviewText.md',
+          sourceDirName: 'API/Preview',
+          slug: '/API/Preview/PreviewText',
+          permalink: '/reanimated-color-picker/docs/API/Preview/PreviewText',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 1,
+          frontMatter: {
+            sidebar_position: 1,
+            sidebar_label: 'PreviewText',
+            description: 'A React Native <Text> component that displays the preview color text.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Preview', permalink: '/reanimated-color-picker/docs/API/Preview/' },
+          next: { title: 'InputWidget', permalink: '/reanimated-color-picker/docs/API/Preview/InputWidget' },
+        },
+        l = {},
+        d = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>colorFormat</code>', id: 'colorformat', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+        ];
+      function a(e) {
+        const t = { code: 'code', h1: 'h1', h2: 'h2', h3: 'h3', li: 'li', ul: 'ul', ...(0, o.a)(), ...e.components },
+          { Formats: r } = t;
+        return (
+          r ||
+            (function (e, t) {
+              throw new Error(
+                'Expected ' +
+                  (t ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Formats', !0),
+          (0, i.jsxs)(i.Fragment, {
+            children: [
+              (0, i.jsx)(t.h1, { id: 'previewtext-', children: (0, i.jsx)(t.code, { children: '<PreviewText />' }) }),
+              '\n',
+              (0, i.jsxs)(t.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(t.li, {
+                    children: [
+                      'A React Native ',
+                      (0, i.jsx)(t.code, { children: '<Text>' }),
+                      ' component that displays the preview color text.',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(t.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, i.jsx)(t.h3, { id: 'colorformat', children: (0, i.jsx)(t.code, { children: 'colorFormat' }) }),
+              '\n',
+              (0, i.jsxs)(t.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(t.li, { children: "Preview color's format." }),
+                  '\n',
+                  (0, i.jsx)(t.li, { children: (0, i.jsx)(t.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsxs)(t.li, { children: [(0, i.jsx)(t.code, { children: 'values:' }), (0, i.jsx)(r, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(t.h3, { id: 'style', children: (0, i.jsx)(t.code, { children: 'style' }) }),
+              '\n',
+              (0, i.jsxs)(t.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(t.li, { children: 'Preview text style.' }),
+                  '\n',
+                  (0, i.jsx)(t.li, { children: (0, i.jsx)(t.code, { children: 'type: TextStyle' }) }),
+                  '\n',
+                ],
+              }),
+            ],
+          })
+        );
+      }
+      function p(e = {}) {
+        const { wrapper: t } = { ...(0, o.a)(), ...e.components };
+        return t ? (0, i.jsx)(t, { ...e, children: (0, i.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    1151: (e, t, r) => {
+      r.d(t, { Z: () => c, a: () => s });
+      var i = r(7294);
+      const o = {},
+        n = i.createContext(o);
+      function s(e) {
+        const t = i.useContext(n);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(t) : { ...t, ...e };
+          },
+          [t, e],
+        );
+      }
+      function c(e) {
+        let t;
+        return (
+          (t = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(o)
+              : e.components || o
+            : s(e.components)),
+          i.createElement(n.Provider, { value: t }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/140a8099.6ce55756.js b/docs/build/assets/js/140a8099.6ce55756.js
deleted file mode 100644
index 0cdc910..0000000
--- a/docs/build/assets/js/140a8099.6ce55756.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[439],{5529:(e,n,l)=>{l.d(n,{Ay:()=>s,RM:()=>d});var t=l(4848),i=l(8453);const d=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function r(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h3,{id:"renderthumb",children:(0,t.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Function which receives ",(0,t.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,t.jsxs)(n.li,{children:["Overrides ",(0,t.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"thumbprops",children:(0,t.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,t.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"positionStyle"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"StyleProp"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"width"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"number"})}),(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,t.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"height"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"number"})}),(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,t.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"adaptiveColor"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"SharedValue<string>"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"currentColor"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"SharedValue<string>"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"initialColor"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"string"})}),(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,t.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},7793:(e,n,l)=>{l.d(n,{A:()=>t});const t="data:image/png;base64,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"},7869:(e,n,l)=>{l.d(n,{Ay:()=>h,RM:()=>r});var t=l(4848),i=l(8453),d=l(5529);const r=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,i.R)(),...e.components},{Shapes:r}=n;return r||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h3,{id:"boundedthumb",children:(0,t.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"boundedThumb",src:l(7793).A+"",width:"180",height:"130"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,t.jsxs)(n.li,{children:["When set to ",(0,t.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,t.jsxs)(n.li,{children:["When set to ",(0,t.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbsize",children:(0,t.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbcolor",children:(0,t.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsx)(n.mdxAdmonitionTitle,{children:(0,t.jsx)(n.strong,{children:"*interactive"})}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"sliderthickness",children:(0,t.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The thickness is the ",(0,t.jsx)(n.code,{children:"width"})," of the slider in ",(0,t.jsx)(n.code,{children:"vertical"})," mode or the ",(0,t.jsx)(n.code,{children:"height"})," in ",(0,t.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbshape",children:(0,t.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"values:"}),(0,t.jsx)(r,{})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbstyle",children:(0,t.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,t.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,t.jsx)(d.Ay,{}),"\n",(0,t.jsx)(n.h3,{id:"reverse",children:(0,t.jsx)(n.code,{children:"reverse"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"vertical",children:(0,t.jsx)(n.code,{children:"vertical"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"gestures",children:(0,t.jsx)(n.code,{children:"gestures"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,t.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"style",children:(0,t.jsx)(n.code,{children:"style"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{title:"note",type:"info",children:(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(s,{...e})}):s(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>r,x:()=>s});var t=l(6540);const i={},d=t.createContext(i);function r(e){const n=t.useContext(d);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(d.Provider,{value:n},e.children)}},8505:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>c,contentTitle:()=>h,default:()=>u,frontMatter:()=>s,metadata:()=>t,toc:()=>o});const t=JSON.parse('{"id":"API/Sliders/Hue/HueSlider","title":"<HueSlider />","description":"A slider to change the color\'s hue.","source":"@site/docs/API/Sliders/Hue/HueSlider.mdx","sourceDirName":"API/Sliders/Hue","slug":"/API/Sliders/Hue/HueSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":0,"frontMatter":{"sidebar_position":0,"sidebar_label":"HueSlider","description":"A slider to change the color\'s hue."},"sidebar":"tutorialSidebar","previous":{"title":"Hue","permalink":"/reanimated-color-picker/docs/category/hue"},"next":{"title":"HueCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"}}');var i=l(4848),d=l(8453),r=l(7869);const s={sidebar_position:0,sidebar_label:"HueSlider",description:"A slider to change the color's hue."},h="<HueSlider />",c={},o=[{value:"A slider to change the color&#39;s hue.",id:"a-slider-to-change-the-colors-hue",level:3},{value:"Props",id:"props",level:2},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},...r.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,d.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"hueslider-",children:(0,i.jsx)(n.code,{children:"<HueSlider />"})})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"hue",src:l(9908).A+"",width:"256",height:"40"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h3,{id:"a-slider-to-change-the-colors-hue",children:"A slider to change the color's hue."}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,i.jsx)(n.h3,{id:"adaptspectrum",children:(0,i.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n","\n",(0,i.jsx)(r.Ay,{})]})}function u(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},9908:(e,n,l)=>{l.d(n,{A:()=>t});const t="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/140a8099.f3bff30f.js b/docs/build/assets/js/140a8099.f3bff30f.js
new file mode 100644
index 0000000..8e66f2e
--- /dev/null
+++ b/docs/build/assets/js/140a8099.f3bff30f.js
@@ -0,0 +1,623 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [166],
+  {
+    2290: (e, n, t) => {
+      t.r(n),
+        t.d(n, {
+          assets: () => c,
+          contentTitle: () => d,
+          default: () => x,
+          frontMatter: () => s,
+          metadata: () => h,
+          toc: () => o,
+        });
+      var l = t(5893),
+        i = t(1151),
+        r = t(51);
+      const s = { sidebar_position: 0, sidebar_label: 'HueSlider', description: "A slider to change the color's hue." },
+        d = '<HueSlider />',
+        h = {
+          id: 'API/Sliders/Hue/HueSlider',
+          title: '<HueSlider />',
+          description: "A slider to change the color's hue.",
+          source: '@site/docs/API/Sliders/Hue/HueSlider.mdx',
+          sourceDirName: 'API/Sliders/Hue',
+          slug: '/API/Sliders/Hue/HueSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 0,
+          frontMatter: { sidebar_position: 0, sidebar_label: 'HueSlider', description: "A slider to change the color's hue." },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Hue', permalink: '/reanimated-color-picker/docs/category/hue' },
+          next: { title: 'HueCircular', permalink: '/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular' },
+        },
+        c = {},
+        o = [
+          { value: 'A slider to change the color&#39;s hue.', id: 'a-slider-to-change-the-colors-hue', level: 3 },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, i.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h1, { id: 'hueslider-', children: (0, l.jsx)(n.code, { children: '<HueSlider />' }) }),
+            '\n',
+            (0, l.jsx)(n.p, { children: (0, l.jsx)(n.img, { alt: 'hue', src: t(152).Z + '', width: '256', height: '40' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, l.jsx)(n.h3, {
+                      id: 'a-slider-to-change-the-colors-hue',
+                      children: "A slider to change the color's hue.",
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, l.jsx)(n.h3, { id: 'adaptspectrum', children: (0, l.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsx)(n.li, {
+                  children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                }),
+                '\n',
+                (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, l.jsx)(r.ZP, {}),
+          ],
+        });
+      }
+      function x(e = {}) {
+        const { wrapper: n } = { ...(0, i.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, t) => {
+      t.d(n, { ZP: () => s });
+      var l = t(5893),
+        i = t(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, i.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h4, { id: 'thumbprops', children: (0, l.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, l.jsxs)(n.table, {
+              children: [
+                (0, l.jsx)(n.thead, {
+                  children: (0, l.jsxs)(n.tr, {
+                    children: [
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, l.jsxs)(n.tbody, {
+                  children: [
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, l.jsx)(n.code, { children: 'width' }) }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, l.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, { children: ['\n', (0, l.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, l.jsx)(n.pre, {
+              children: (0, l.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, i.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    51: (e, n, t) => {
+      t.d(n, { ZP: () => d });
+      var l = t(5893),
+        i = t(1151),
+        r = t(435);
+      function s(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, i.a)(),
+            ...e.components,
+          },
+          { Shapes: s } = n;
+        return (
+          s ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, l.jsxs)(l.Fragment, {
+            children: [
+              (0, l.jsx)(n.h3, { id: 'boundedthumb', children: (0, l.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, l.jsx)(n.p, {
+                children: (0, l.jsx)(n.img, { alt: 'boundedThumb', src: t(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbsize', children: (0, l.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbcolor', children: (0, l.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, l.jsx)(n.mdxAdmonitionTitle, { children: (0, l.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, l.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'sliderthickness', children: (0, l.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, l.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, l.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, l.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, l.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbshape', children: (0, l.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'values:' }), (0, l.jsx)(s, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbstyle', children: (0, l.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, l.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, l.jsx)(r.ZP, {}),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'reverse', children: (0, l.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'vertical', children: (0, l.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'gestures', children: (0, l.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, l.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'style', children: (0, l.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, l.jsxs)(n.ul, {
+                  children: ['\n', (0, l.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, i.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(s, { ...e }) }) : s(e);
+      }
+    },
+    2737: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l =
+        'data:image/png;base64,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';
+    },
+    152: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, t) => {
+      t.d(n, { Z: () => d, a: () => s });
+      var l = t(7294);
+      const i = {},
+        r = l.createContext(i);
+      function s(e) {
+        const n = l.useContext(r);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function d(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(i)
+              : e.components || i
+            : s(e.components)),
+          l.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/14eb3368.4bda261b.js b/docs/build/assets/js/14eb3368.4bda261b.js
new file mode 100644
index 0000000..ba55c6f
--- /dev/null
+++ b/docs/build/assets/js/14eb3368.4bda261b.js
@@ -0,0 +1,385 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [817],
+  {
+    1310: (e, s, t) => {
+      t.d(s, { Z: () => p });
+      t(7294);
+      var n = t(512),
+        i = t(5281),
+        a = t(3438),
+        r = t(8596),
+        c = t(3692),
+        l = t(5999),
+        o = t(4996),
+        d = t(5893);
+      function m(e) {
+        return (0, d.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          ...e,
+          children: (0, d.jsx)('path', {
+            d: 'M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z',
+            fill: 'currentColor',
+          }),
+        });
+      }
+      const u = { breadcrumbHomeIcon: 'breadcrumbHomeIcon_YNFT' };
+      function h() {
+        const e = (0, o.Z)('/');
+        return (0, d.jsx)('li', {
+          className: 'breadcrumbs__item',
+          children: (0, d.jsx)(c.Z, {
+            'aria-label': (0, l.I)({
+              id: 'theme.docs.breadcrumbs.home',
+              message: 'Home page',
+              description: 'The ARIA label for the home page in the breadcrumbs',
+            }),
+            className: 'breadcrumbs__link',
+            href: e,
+            children: (0, d.jsx)(m, { className: u.breadcrumbHomeIcon }),
+          }),
+        });
+      }
+      const b = { breadcrumbsContainer: 'breadcrumbsContainer_Z_bl' };
+      function x(e) {
+        let { children: s, href: t, isLast: n } = e;
+        const i = 'breadcrumbs__link';
+        return n
+          ? (0, d.jsx)('span', { className: i, itemProp: 'name', children: s })
+          : t
+            ? (0, d.jsx)(c.Z, {
+                className: i,
+                href: t,
+                itemProp: 'item',
+                children: (0, d.jsx)('span', { itemProp: 'name', children: s }),
+              })
+            : (0, d.jsx)('span', { className: i, children: s });
+      }
+      function v(e) {
+        let { children: s, active: t, index: i, addMicrodata: a } = e;
+        return (0, d.jsxs)('li', {
+          ...(a && { itemScope: !0, itemProp: 'itemListElement', itemType: 'https://schema.org/ListItem' }),
+          className: (0, n.Z)('breadcrumbs__item', { 'breadcrumbs__item--active': t }),
+          children: [s, (0, d.jsx)('meta', { itemProp: 'position', content: String(i + 1) })],
+        });
+      }
+      function p() {
+        const e = (0, a.s1)(),
+          s = (0, r.Ns)();
+        return e
+          ? (0, d.jsx)('nav', {
+              className: (0, n.Z)(i.k.docs.docBreadcrumbs, b.breadcrumbsContainer),
+              'aria-label': (0, l.I)({
+                id: 'theme.docs.breadcrumbs.navAriaLabel',
+                message: 'Breadcrumbs',
+                description: 'The ARIA label for the breadcrumbs',
+              }),
+              children: (0, d.jsxs)('ul', {
+                className: 'breadcrumbs',
+                itemScope: !0,
+                itemType: 'https://schema.org/BreadcrumbList',
+                children: [
+                  s && (0, d.jsx)(h, {}),
+                  e.map((s, t) => {
+                    const n = t === e.length - 1,
+                      i = 'category' === s.type && s.linkUnlisted ? void 0 : s.href;
+                    return (0, d.jsx)(
+                      v,
+                      {
+                        active: n,
+                        index: t,
+                        addMicrodata: !!i,
+                        children: (0, d.jsx)(x, { href: i, isLast: n, children: s.label }),
+                      },
+                      t,
+                    );
+                  }),
+                ],
+              }),
+            })
+          : null;
+      }
+    },
+    4228: (e, s, t) => {
+      t.r(s), t.d(s, { default: () => y });
+      t(7294);
+      var n = t(1944),
+        i = t(3438),
+        a = t(4996),
+        r = t(512),
+        c = t(3692),
+        l = t(3919),
+        o = t(5999),
+        d = t(2503);
+      const m = { cardContainer: 'cardContainer_fWXF', cardTitle: 'cardTitle_rnsV', cardDescription: 'cardDescription_PWke' };
+      var u = t(5893);
+      function h(e) {
+        let { href: s, children: t } = e;
+        return (0, u.jsx)(c.Z, { href: s, className: (0, r.Z)('card padding--lg', m.cardContainer), children: t });
+      }
+      function b(e) {
+        let { href: s, icon: t, title: n, description: i } = e;
+        return (0, u.jsxs)(h, {
+          href: s,
+          children: [
+            (0, u.jsxs)(d.Z, { as: 'h2', className: (0, r.Z)('text--truncate', m.cardTitle), title: n, children: [t, ' ', n] }),
+            i && (0, u.jsx)('p', { className: (0, r.Z)('text--truncate', m.cardDescription), title: i, children: i }),
+          ],
+        });
+      }
+      function x(e) {
+        let { item: s } = e;
+        const t = (0, i.LM)(s);
+        return t
+          ? (0, u.jsx)(b, {
+              href: t,
+              icon: '\ud83d\uddc3\ufe0f',
+              title: s.label,
+              description:
+                s.description ??
+                (0, o.I)(
+                  {
+                    message: '{count} items',
+                    id: 'theme.docs.DocCard.categoryDescription',
+                    description:
+                      'The default description for a category card in the generated index about how many items this category includes',
+                  },
+                  { count: s.items.length },
+                ),
+            })
+          : null;
+      }
+      function v(e) {
+        let { item: s } = e;
+        const t = (0, l.Z)(s.href) ? '\ud83d\udcc4\ufe0f' : '\ud83d\udd17',
+          n = (0, i.xz)(s.docId ?? void 0);
+        return (0, u.jsx)(b, { href: s.href, icon: t, title: s.label, description: s.description ?? n?.description });
+      }
+      function p(e) {
+        let { item: s } = e;
+        switch (s.type) {
+          case 'link':
+            return (0, u.jsx)(v, { item: s });
+          case 'category':
+            return (0, u.jsx)(x, { item: s });
+          default:
+            throw new Error(`unknown item type ${JSON.stringify(s)}`);
+        }
+      }
+      function g(e) {
+        let { className: s } = e;
+        const t = (0, i.jA)();
+        return (0, u.jsx)(j, { items: t.items, className: s });
+      }
+      function j(e) {
+        const { items: s, className: t } = e;
+        if (!s) return (0, u.jsx)(g, { ...e });
+        const n = (0, i.MN)(s);
+        return (0, u.jsx)('section', {
+          className: (0, r.Z)('row', t),
+          children: n.map((e, s) =>
+            (0, u.jsx)('article', { className: 'col col--6 margin-bottom--lg', children: (0, u.jsx)(p, { item: e }) }, s),
+          ),
+        });
+      }
+      var f = t(4966),
+        N = t(3120),
+        Z = t(4364),
+        _ = t(1310);
+      const L = { generatedIndexPage: 'generatedIndexPage_vN6x', list: 'list_eTzJ', title: 'title_kItE' };
+      function k(e) {
+        let { categoryGeneratedIndex: s } = e;
+        return (0, u.jsx)(n.d, { title: s.title, description: s.description, keywords: s.keywords, image: (0, a.Z)(s.image) });
+      }
+      function T(e) {
+        let { categoryGeneratedIndex: s } = e;
+        const t = (0, i.jA)();
+        return (0, u.jsxs)('div', {
+          className: L.generatedIndexPage,
+          children: [
+            (0, u.jsx)(N.Z, {}),
+            (0, u.jsx)(_.Z, {}),
+            (0, u.jsx)(Z.Z, {}),
+            (0, u.jsxs)('header', {
+              children: [
+                (0, u.jsx)(d.Z, { as: 'h1', className: L.title, children: s.title }),
+                s.description && (0, u.jsx)('p', { children: s.description }),
+              ],
+            }),
+            (0, u.jsx)('article', {
+              className: 'margin-top--lg',
+              children: (0, u.jsx)(j, { items: t.items, className: L.list }),
+            }),
+            (0, u.jsx)('footer', {
+              className: 'margin-top--lg',
+              children: (0, u.jsx)(f.Z, { previous: s.navigation.previous, next: s.navigation.next }),
+            }),
+          ],
+        });
+      }
+      function y(e) {
+        return (0, u.jsxs)(u.Fragment, { children: [(0, u.jsx)(k, { ...e }), (0, u.jsx)(T, { ...e })] });
+      }
+    },
+    4966: (e, s, t) => {
+      t.d(s, { Z: () => l });
+      t(7294);
+      var n = t(5999),
+        i = t(512),
+        a = t(3692),
+        r = t(5893);
+      function c(e) {
+        const { permalink: s, title: t, subLabel: n, isNext: c } = e;
+        return (0, r.jsxs)(a.Z, {
+          className: (0, i.Z)('pagination-nav__link', c ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'),
+          to: s,
+          children: [
+            n && (0, r.jsx)('div', { className: 'pagination-nav__sublabel', children: n }),
+            (0, r.jsx)('div', { className: 'pagination-nav__label', children: t }),
+          ],
+        });
+      }
+      function l(e) {
+        const { previous: s, next: t } = e;
+        return (0, r.jsxs)('nav', {
+          className: 'pagination-nav docusaurus-mt-lg',
+          'aria-label': (0, n.I)({
+            id: 'theme.docs.paginator.navAriaLabel',
+            message: 'Docs pages',
+            description: 'The ARIA label for the docs pagination',
+          }),
+          children: [
+            s &&
+              (0, r.jsx)(c, {
+                ...s,
+                subLabel: (0, r.jsx)(n.Z, {
+                  id: 'theme.docs.paginator.previous',
+                  description: 'The label used to navigate to the previous doc',
+                  children: 'Previous',
+                }),
+              }),
+            t &&
+              (0, r.jsx)(c, {
+                ...t,
+                subLabel: (0, r.jsx)(n.Z, {
+                  id: 'theme.docs.paginator.next',
+                  description: 'The label used to navigate to the next doc',
+                  children: 'Next',
+                }),
+                isNext: !0,
+              }),
+          ],
+        });
+      }
+    },
+    4364: (e, s, t) => {
+      t.d(s, { Z: () => l });
+      t(7294);
+      var n = t(512),
+        i = t(5999),
+        a = t(5281),
+        r = t(4477),
+        c = t(5893);
+      function l(e) {
+        let { className: s } = e;
+        const t = (0, r.E)();
+        return t.badge
+          ? (0, c.jsx)('span', {
+              className: (0, n.Z)(s, a.k.docs.docVersionBadge, 'badge badge--secondary'),
+              children: (0, c.jsx)(i.Z, {
+                id: 'theme.docs.versionBadge.label',
+                values: { versionLabel: t.label },
+                children: 'Version: {versionLabel}',
+              }),
+            })
+          : null;
+      }
+    },
+    3120: (e, s, t) => {
+      t.d(s, { Z: () => v });
+      t(7294);
+      var n = t(512),
+        i = t(2263),
+        a = t(3692),
+        r = t(5999),
+        c = t(143),
+        l = t(5281),
+        o = t(373),
+        d = t(4477),
+        m = t(5893);
+      const u = {
+        unreleased: function (e) {
+          let { siteTitle: s, versionMetadata: t } = e;
+          return (0, m.jsx)(r.Z, {
+            id: 'theme.docs.versions.unreleasedVersionLabel',
+            description: "The label used to tell the user that he's browsing an unreleased doc version",
+            values: { siteTitle: s, versionLabel: (0, m.jsx)('b', { children: t.label }) },
+            children: 'This is unreleased documentation for {siteTitle} {versionLabel} version.',
+          });
+        },
+        unmaintained: function (e) {
+          let { siteTitle: s, versionMetadata: t } = e;
+          return (0, m.jsx)(r.Z, {
+            id: 'theme.docs.versions.unmaintainedVersionLabel',
+            description: "The label used to tell the user that he's browsing an unmaintained doc version",
+            values: { siteTitle: s, versionLabel: (0, m.jsx)('b', { children: t.label }) },
+            children: 'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.',
+          });
+        },
+      };
+      function h(e) {
+        const s = u[e.versionMetadata.banner];
+        return (0, m.jsx)(s, { ...e });
+      }
+      function b(e) {
+        let { versionLabel: s, to: t, onClick: n } = e;
+        return (0, m.jsx)(r.Z, {
+          id: 'theme.docs.versions.latestVersionSuggestionLabel',
+          description: 'The label used to tell the user to check the latest version',
+          values: {
+            versionLabel: s,
+            latestVersionLink: (0, m.jsx)('b', {
+              children: (0, m.jsx)(a.Z, {
+                to: t,
+                onClick: n,
+                children: (0, m.jsx)(r.Z, {
+                  id: 'theme.docs.versions.latestVersionLinkLabel',
+                  description: 'The label used for the latest version suggestion link label',
+                  children: 'latest version',
+                }),
+              }),
+            }),
+          },
+          children: 'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).',
+        });
+      }
+      function x(e) {
+        let { className: s, versionMetadata: t } = e;
+        const {
+            siteConfig: { title: a },
+          } = (0, i.Z)(),
+          { pluginId: r } = (0, c.gA)({ failfast: !0 }),
+          { savePreferredVersionName: d } = (0, o.J)(r),
+          { latestDocSuggestion: u, latestVersionSuggestion: x } = (0, c.Jo)(r),
+          v = u ?? (p = x).docs.find(e => e.id === p.mainDocId);
+        var p;
+        return (0, m.jsxs)('div', {
+          className: (0, n.Z)(s, l.k.docs.docVersionBanner, 'alert alert--warning margin-bottom--md'),
+          role: 'alert',
+          children: [
+            (0, m.jsx)('div', { children: (0, m.jsx)(h, { siteTitle: a, versionMetadata: t }) }),
+            (0, m.jsx)('div', {
+              className: 'margin-top--md',
+              children: (0, m.jsx)(b, { versionLabel: x.label, to: v.path, onClick: () => d(x.name) }),
+            }),
+          ],
+        });
+      }
+      function v(e) {
+        let { className: s } = e;
+        const t = (0, d.E)();
+        return t.banner ? (0, m.jsx)(x, { className: s, versionMetadata: t }) : null;
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/14eb3368.dea5486b.js b/docs/build/assets/js/14eb3368.dea5486b.js
deleted file mode 100644
index d025b76..0000000
--- a/docs/build/assets/js/14eb3368.dea5486b.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[969],{594:(e,s,n)=>{n.d(s,{A:()=>j});n(6540);var t=n(4164),r=n(7559),a=n(6972),i=n(9169),c=n(8774),l=n(1312),o=n(6025),d=n(4848);function u(e){return(0,d.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,d.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const m={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function h(){const e=(0,o.Ay)("/");return(0,d.jsx)("li",{className:"breadcrumbs__item",children:(0,d.jsx)(c.A,{"aria-label":(0,l.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,d.jsx)(u,{className:m.breadcrumbHomeIcon})})})}var b=n(5260),x=n(4586);function p(e){const s=function({breadcrumbs:e}){const{siteConfig:s}=(0,x.A)();return{"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:e.filter((e=>e.href)).map(((e,n)=>({"@type":"ListItem",position:n+1,name:e.label,item:`${s.url}${e.href}`})))}}({breadcrumbs:e.breadcrumbs});return(0,d.jsx)(b.A,{children:(0,d.jsx)("script",{type:"application/ld+json",children:JSON.stringify(s)})})}const g={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function v({children:e,href:s,isLast:n}){const t="breadcrumbs__link";return n?(0,d.jsx)("span",{className:t,children:e}):s?(0,d.jsx)(c.A,{className:t,href:s,children:(0,d.jsx)("span",{children:e})}):(0,d.jsx)("span",{className:t,children:e})}function f({children:e,active:s}){return(0,d.jsx)("li",{className:(0,t.A)("breadcrumbs__item",{"breadcrumbs__item--active":s}),children:e})}function j(){const e=(0,a.OF)(),s=(0,i.Dt)();return e?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(p,{breadcrumbs:e}),(0,d.jsx)("nav",{className:(0,t.A)(r.G.docs.docBreadcrumbs,g.breadcrumbsContainer),"aria-label":(0,l.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,d.jsxs)("ul",{className:"breadcrumbs",children:[s&&(0,d.jsx)(h,{}),e.map(((s,n)=>{const t=n===e.length-1,r="category"===s.type&&s.linkUnlisted?void 0:s.href;return(0,d.jsx)(f,{active:t,children:(0,d.jsx)(v,{href:r,isLast:t,children:s.label})},n)}))]})})]}):null}},1878:(e,s,n)=>{n.d(s,{A:()=>p});n(6540);var t=n(4164),r=n(4586),a=n(8774),i=n(1312),c=n(4070),l=n(7559),o=n(3886),d=n(3025),u=n(4848);const m={unreleased:function({siteTitle:e,versionMetadata:s}){return(0,u.jsx)(i.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:e,versionLabel:(0,u.jsx)("b",{children:s.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function({siteTitle:e,versionMetadata:s}){return(0,u.jsx)(i.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:e,versionLabel:(0,u.jsx)("b",{children:s.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function h(e){const s=m[e.versionMetadata.banner];return(0,u.jsx)(s,{...e})}function b({versionLabel:e,to:s,onClick:n}){return(0,u.jsx)(i.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:e,latestVersionLink:(0,u.jsx)("b",{children:(0,u.jsx)(a.A,{to:s,onClick:n,children:(0,u.jsx)(i.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function x({className:e,versionMetadata:s}){const{siteConfig:{title:n}}=(0,r.A)(),{pluginId:a}=(0,c.vT)({failfast:!0}),{savePreferredVersionName:i}=(0,o.g1)(a),{latestDocSuggestion:d,latestVersionSuggestion:m}=(0,c.HW)(a),x=d??(p=m).docs.find((e=>e.id===p.mainDocId));var p;return(0,u.jsxs)("div",{className:(0,t.A)(e,l.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,u.jsx)("div",{children:(0,u.jsx)(h,{siteTitle:n,versionMetadata:s})}),(0,u.jsx)("div",{className:"margin-top--md",children:(0,u.jsx)(b,{versionLabel:m.label,to:x.path,onClick:()=>i(m.name)})})]})}function p({className:e}){const s=(0,d.r)();return s.banner?(0,u.jsx)(x,{className:e,versionMetadata:s}):null}},4267:(e,s,n)=>{n.d(s,{A:()=>l});n(6540);var t=n(4164),r=n(1312),a=n(7559),i=n(3025),c=n(4848);function l({className:e}){const s=(0,i.r)();return s.badge?(0,c.jsx)("span",{className:(0,t.A)(e,a.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,c.jsx)(r.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:s.label},children:"Version: {versionLabel}"})}):null}},6098:(e,s,n)=>{n.r(s),n.d(s,{default:()=>P});var t=n(6540),r=n(5500),a=n(6972),i=n(6025),c=n(4164),l=n(8774),o=n(4586);const d=["zero","one","two","few","many","other"];function u(e){return d.filter((s=>e.includes(s)))}const m={locale:"en",pluralForms:u(["one","other"]),select:e=>1===e?"one":"other"};function h(){const{i18n:{currentLocale:e}}=(0,o.A)();return(0,t.useMemo)((()=>{try{return function(e){const s=new Intl.PluralRules(e);return{locale:e,pluralForms:u(s.resolvedOptions().pluralCategories),select:e=>s.select(e)}}(e)}catch(s){return console.error(`Failed to use Intl.PluralRules for locale "${e}".\nDocusaurus will fallback to the default (English) implementation.\nError: ${s.message}\n`),m}}),[e])}function b(){const e=h();return{selectMessage:(s,n)=>function(e,s,n){const t=e.split("|");if(1===t.length)return t[0];t.length>n.pluralForms.length&&console.error(`For locale=${n.locale}, a maximum of ${n.pluralForms.length} plural forms are expected (${n.pluralForms.join(",")}), but the message contains ${t.length}: ${e}`);const r=n.select(s),a=n.pluralForms.indexOf(r);return t[Math.min(a,t.length-1)]}(n,s,e)}}var x=n(6654),p=n(1312),g=n(1107);const v={cardContainer:"cardContainer_fWXF",cardTitle:"cardTitle_rnsV",cardDescription:"cardDescription_PWke"};var f=n(4848);function j({className:e,href:s,children:n}){return(0,f.jsx)(l.A,{href:s,className:(0,c.A)("card padding--lg",v.cardContainer,e),children:n})}function N({className:e,href:s,icon:n,title:t,description:r}){return(0,f.jsxs)(j,{href:s,className:e,children:[(0,f.jsxs)(g.A,{as:"h2",className:(0,c.A)("text--truncate",v.cardTitle),title:t,children:[n," ",t]}),r&&(0,f.jsx)("p",{className:(0,c.A)("text--truncate",v.cardDescription),title:r,children:r})]})}function A({item:e}){const s=(0,a.Nr)(e),n=function(){const{selectMessage:e}=b();return s=>e(s,(0,p.T)({message:"1 item|{count} items",id:"theme.docs.DocCard.categoryDescription.plurals",description:"The default description for a category card in the generated index about how many items this category includes"},{count:s}))}();return s?(0,f.jsx)(N,{className:e.className,href:s,icon:"\ud83d\uddc3\ufe0f",title:e.label,description:e.description??n(e.items.length)}):null}function L({item:e}){const s=(0,x.A)(e.href)?"\ud83d\udcc4\ufe0f":"\ud83d\udd17",n=(0,a.cC)(e.docId??void 0);return(0,f.jsx)(N,{className:e.className,href:e.href,icon:s,title:e.label,description:e.description??n?.description})}function _({item:e}){switch(e.type){case"link":return(0,f.jsx)(L,{item:e});case"category":return(0,f.jsx)(A,{item:e});default:throw new Error(`unknown item type ${JSON.stringify(e)}`)}}const T={docCardListItem:"docCardListItem_W1sv"};function k({className:e}){const s=(0,a.a4)();return(0,f.jsx)(I,{items:s,className:e})}function y({item:e}){return(0,f.jsx)("article",{className:(0,c.A)(T.docCardListItem,"col col--6"),children:(0,f.jsx)(_,{item:e})})}function I(e){const{items:s,className:n}=e;if(!s)return(0,f.jsx)(k,{...e});const t=(0,a.d1)(s);return(0,f.jsx)("section",{className:(0,c.A)("row",n),children:t.map(((e,s)=>(0,f.jsx)(y,{item:e},s)))})}var C=n(6929),w=n(1878),F=n(4267),V=n(594);const M={generatedIndexPage:"generatedIndexPage_vN6x",title:"title_kItE"};function $({categoryGeneratedIndex:e}){return(0,f.jsx)(r.be,{title:e.title,description:e.description,keywords:e.keywords,image:(0,i.Ay)(e.image)})}function D({categoryGeneratedIndex:e}){const s=(0,a.$S)();return(0,f.jsxs)("div",{className:M.generatedIndexPage,children:[(0,f.jsx)(w.A,{}),(0,f.jsx)(V.A,{}),(0,f.jsx)(F.A,{}),(0,f.jsxs)("header",{children:[(0,f.jsx)(g.A,{as:"h1",className:M.title,children:e.title}),e.description&&(0,f.jsx)("p",{children:e.description})]}),(0,f.jsx)("article",{className:"margin-top--lg",children:(0,f.jsx)(I,{items:s.items,className:M.list})}),(0,f.jsx)("footer",{className:"margin-top--md",children:(0,f.jsx)(C.A,{previous:e.navigation.previous,next:e.navigation.next})})]})}function P(e){return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)($,{...e}),(0,f.jsx)(D,{...e})]})}},6929:(e,s,n)=>{n.d(s,{A:()=>l});n(6540);var t=n(4164),r=n(1312),a=n(8774),i=n(4848);function c(e){const{permalink:s,title:n,subLabel:r,isNext:c}=e;return(0,i.jsxs)(a.A,{className:(0,t.A)("pagination-nav__link",c?"pagination-nav__link--next":"pagination-nav__link--prev"),to:s,children:[r&&(0,i.jsx)("div",{className:"pagination-nav__sublabel",children:r}),(0,i.jsx)("div",{className:"pagination-nav__label",children:n})]})}function l(e){const{className:s,previous:n,next:a}=e;return(0,i.jsxs)("nav",{className:(0,t.A)(s,"pagination-nav"),"aria-label":(0,r.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[n&&(0,i.jsx)(c,{...n,subLabel:(0,i.jsx)(r.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),a&&(0,i.jsx)(c,{...a,subLabel:(0,i.jsx)(r.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/17896441.6bb8ff9c.js b/docs/build/assets/js/17896441.6bb8ff9c.js
deleted file mode 100644
index 4e029f3..0000000
--- a/docs/build/assets/js/17896441.6bb8ff9c.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[401],{6642:(a,e,r)=>{r.d(e,{A:()=>s});r(6540);var d=r(4848);function s(){return(0,d.jsx)("div",{"data-snack-id":"@alabsi91/reanimated-color-picker","data-snack-platform":"web","data-snack-preview":"true","data-snack-theme":"dark","data-snack-loading":"lazy",style:{overflow:"hidden",background:"#212121",border:"1px solid var(--color-border)",borderRadius:"4px",height:"800px",width:"100%"}})}},8506:(a,e,r)=>{r.d(e,{A:()=>o});r(6540);var d=r(5184),s=r(6642),l=r(4848);const o={...d.A,snack:s.A,Shapes:()=>(0,l.jsx)("code",{children:"'ring' | 'solid' | 'hollow' | 'line' | 'plus' | 'pill' | 'triangleUp' | 'triangleDown' | 'doubleTriangle' | 'rect' | 'circle'"}),Formats:()=>(0,l.jsx)("code",{children:"'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' | 'hwb' | 'hwba'"})}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/17896441.d60327e5.js b/docs/build/assets/js/17896441.d60327e5.js
new file mode 100644
index 0000000..af60229
--- /dev/null
+++ b/docs/build/assets/js/17896441.d60327e5.js
@@ -0,0 +1,46 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [918],
+  {
+    7391: (a, e, r) => {
+      r.d(e, { Z: () => s });
+      r(7294);
+      var d = r(5893);
+      function s() {
+        return (0, d.jsx)('div', {
+          'data-snack-id': '@alabsi91/reanimated-color-picker',
+          'data-snack-platform': 'web',
+          'data-snack-preview': 'true',
+          'data-snack-theme': 'dark',
+          'data-snack-loading': 'lazy',
+          style: {
+            overflow: 'hidden',
+            background: '#212121',
+            border: '1px solid var(--color-border)',
+            borderRadius: '4px',
+            height: '800px',
+            width: '100%',
+          },
+        });
+      }
+    },
+    1769: (a, e, r) => {
+      r.d(e, { Z: () => o });
+      r(7294);
+      var d = r(804),
+        s = r(7391),
+        l = r(5893);
+      const o = {
+        ...d.Z,
+        snack: s.Z,
+        Shapes: () =>
+          (0, l.jsx)('code', {
+            children:
+              "'ring' | 'solid' | 'hollow' | 'line' | 'plus' | 'pill' | 'triangleUp' | 'triangleDown' | 'doubleTriangle' | 'rect' | 'circle'",
+          }),
+        Formats: () =>
+          (0, l.jsx)('code', { children: "'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' | 'hwb' | 'hwba'" }),
+      };
+    },
+  },
+]);
diff --git a/docs/build/assets/js/1e2bc623.2a975454.js b/docs/build/assets/js/1e2bc623.2a975454.js
deleted file mode 100644
index 5adaac0..0000000
--- a/docs/build/assets/js/1e2bc623.2a975454.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[219],{2524:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Panels","description":"API documentation for Panel components","slug":"/category/panels","permalink":"/reanimated-color-picker/docs/category/panels","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"ColorPicker Wrapper","permalink":"/reanimated-color-picker/docs/API/ColorPicker"},"next":{"title":"Panel1","permalink":"/reanimated-color-picker/docs/API/Panels/Panel1"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/237.f6a779dd.js b/docs/build/assets/js/237.f6a779dd.js
deleted file mode 100644
index 7a20d23..0000000
--- a/docs/build/assets/js/237.f6a779dd.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[237],{2237:(e,t,n)=>{n.r(t),n.d(t,{default:()=>d});n(6540);var i=n(1312),o=n(5500),s=n(1656),r=n(3363),a=n(4848);function d(){const e=(0,i.T)({id:"theme.NotFound.title",message:"Page Not Found"});return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.be,{title:e}),(0,a.jsx)(s.A,{children:(0,a.jsx)(r.A,{})})]})}},3363:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var i=n(4164),o=n(1312),s=n(1107),r=n(4848);function a({className:e}){return(0,r.jsx)("main",{className:(0,i.A)("container margin-vert--xl",e),children:(0,r.jsx)("div",{className:"row",children:(0,r.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,r.jsx)(s.A,{as:"h1",className:"hero__title",children:(0,r.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,r.jsx)("p",{children:(0,r.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/246.02bf6ef0.js b/docs/build/assets/js/246.02bf6ef0.js
deleted file mode 100644
index 7459011..0000000
--- a/docs/build/assets/js/246.02bf6ef0.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[246],{594:(e,t,n)=>{"use strict";n.d(t,{A:()=>v});n(6540);var s=n(4164),a=n(7559),i=n(6972),r=n(9169),o=n(8774),c=n(1312),l=n(6025),d=n(4848);function u(e){return(0,d.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,d.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const m={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function h(){const e=(0,l.Ay)("/");return(0,d.jsx)("li",{className:"breadcrumbs__item",children:(0,d.jsx)(o.A,{"aria-label":(0,c.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,d.jsx)(u,{className:m.breadcrumbHomeIcon})})})}var f=n(5260),p=n(4586);function x(e){const t=function({breadcrumbs:e}){const{siteConfig:t}=(0,p.A)();return{"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:e.filter((e=>e.href)).map(((e,n)=>({"@type":"ListItem",position:n+1,name:e.label,item:`${t.url}${e.href}`})))}}({breadcrumbs:e.breadcrumbs});return(0,d.jsx)(f.A,{children:(0,d.jsx)("script",{type:"application/ld+json",children:JSON.stringify(t)})})}const g={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function b({children:e,href:t,isLast:n}){const s="breadcrumbs__link";return n?(0,d.jsx)("span",{className:s,children:e}):t?(0,d.jsx)(o.A,{className:s,href:t,children:(0,d.jsx)("span",{children:e})}):(0,d.jsx)("span",{className:s,children:e})}function j({children:e,active:t}){return(0,d.jsx)("li",{className:(0,s.A)("breadcrumbs__item",{"breadcrumbs__item--active":t}),children:e})}function v(){const e=(0,i.OF)(),t=(0,r.Dt)();return e?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(x,{breadcrumbs:e}),(0,d.jsx)("nav",{className:(0,s.A)(a.G.docs.docBreadcrumbs,g.breadcrumbsContainer),"aria-label":(0,c.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,d.jsxs)("ul",{className:"breadcrumbs",children:[t&&(0,d.jsx)(h,{}),e.map(((t,n)=>{const s=n===e.length-1,a="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,d.jsx)(j,{active:s,children:(0,d.jsx)(b,{href:a,isLast:s,children:t.label})},n)}))]})})]}):null}},1878:(e,t,n)=>{"use strict";n.d(t,{A:()=>x});n(6540);var s=n(4164),a=n(4586),i=n(8774),r=n(1312),o=n(4070),c=n(7559),l=n(3886),d=n(3025),u=n(4848);const m={unreleased:function({siteTitle:e,versionMetadata:t}){return(0,u.jsx)(r.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:e,versionLabel:(0,u.jsx)("b",{children:t.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function({siteTitle:e,versionMetadata:t}){return(0,u.jsx)(r.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:e,versionLabel:(0,u.jsx)("b",{children:t.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function h(e){const t=m[e.versionMetadata.banner];return(0,u.jsx)(t,{...e})}function f({versionLabel:e,to:t,onClick:n}){return(0,u.jsx)(r.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:e,latestVersionLink:(0,u.jsx)("b",{children:(0,u.jsx)(i.A,{to:t,onClick:n,children:(0,u.jsx)(r.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function p({className:e,versionMetadata:t}){const{siteConfig:{title:n}}=(0,a.A)(),{pluginId:i}=(0,o.vT)({failfast:!0}),{savePreferredVersionName:r}=(0,l.g1)(i),{latestDocSuggestion:d,latestVersionSuggestion:m}=(0,o.HW)(i),p=d??(x=m).docs.find((e=>e.id===x.mainDocId));var x;return(0,u.jsxs)("div",{className:(0,s.A)(e,c.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,u.jsx)("div",{children:(0,u.jsx)(h,{siteTitle:n,versionMetadata:t})}),(0,u.jsx)("div",{className:"margin-top--md",children:(0,u.jsx)(f,{versionLabel:m.label,to:p.path,onClick:()=>r(m.name)})})]})}function x({className:e}){const t=(0,d.r)();return t.banner?(0,u.jsx)(p,{className:e,versionMetadata:t}):null}},4267:(e,t,n)=>{"use strict";n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(1312),i=n(7559),r=n(3025),o=n(4848);function c({className:e}){const t=(0,r.r)();return t.badge?(0,o.jsx)("span",{className:(0,s.A)(e,i.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,o.jsx)(a.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:t.label},children:"Version: {versionLabel}"})}):null}},5184:(e,t,n)=>{"use strict";n.d(t,{A:()=>Me});var s=n(6540),a=n(5260),i=n(2303),r=n(4164),o=n(5293),c=n(6342);function l(){const{prism:e}=(0,c.p)(),{colorMode:t}=(0,o.G)(),n=e.theme,s=e.darkTheme||n;return"dark"===t?s:n}var d=n(7559),u=n(8426),m=n.n(u),h=n(9532),f=n(4848);const p=/title=(?<quote>["'])(?<title>.*?)\1/,x=/\{(?<range>[\d,-]+)\}/,g={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},b={...g,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},j=Object.keys(g);function v(e,t){const n=e.map((e=>{const{start:n,end:s}=b[e];return`(?:${n}\\s*(${t.flatMap((e=>[e.line,e.block?.start,e.block?.end].filter(Boolean))).join("|")})\\s*${s})`})).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)}function N({showLineNumbers:e,metastring:t}){return"boolean"==typeof e?e?1:void 0:"number"==typeof e?e:function(e){const t=e?.split(" ").find((e=>e.startsWith("showLineNumbers")));if(t){if(t.startsWith("showLineNumbers=")){const e=t.replace("showLineNumbers=","");return parseInt(e,10)}return 1}}(t)}function A(e,t){const{language:n,magicComments:s}=t;if(void 0===n)return{lineClassNames:{},code:e};const a=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return v(["js","jsBlock"],t);case"jsx":case"tsx":return v(["js","jsBlock","jsx"],t);case"html":return v(["js","jsBlock","html"],t);case"python":case"py":case"bash":return v(["bash"],t);case"markdown":case"md":return v(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return v(["tex"],t);case"lua":case"haskell":return v(["lua"],t);case"sql":return v(["lua","jsBlock"],t);case"wasm":return v(["wasm"],t);case"vb":case"vba":case"visual-basic":return v(["vb","rem"],t);case"vbnet":return v(["vbnet","rem"],t);case"batch":return v(["rem"],t);case"basic":return v(["rem","f90"],t);case"fsharp":return v(["js","ml"],t);case"ocaml":case"sml":return v(["ml"],t);case"fortran":return v(["f90"],t);case"cobol":return v(["cobol"],t);default:return v(j,t)}}(n,s),i=e.split(/\r?\n/),r=Object.fromEntries(s.map((e=>[e.className,{start:0,range:""}]))),o=Object.fromEntries(s.filter((e=>e.line)).map((({className:e,line:t})=>[t,e]))),c=Object.fromEntries(s.filter((e=>e.block)).map((({className:e,block:t})=>[t.start,e]))),l=Object.fromEntries(s.filter((e=>e.block)).map((({className:e,block:t})=>[t.end,e])));for(let u=0;u<i.length;){const e=i[u].match(a);if(!e){u+=1;continue}const t=e.slice(1).find((e=>void 0!==e));o[t]?r[o[t]].range+=`${u},`:c[t]?r[c[t]].start=u:l[t]&&(r[l[t]].range+=`${r[l[t]].start}-${u-1},`),i.splice(u,1)}const d={};return Object.entries(r).forEach((([e,{range:t}])=>{m()(t).forEach((t=>{d[t]??=[],d[t].push(e)}))})),{code:i.join("\n"),lineClassNames:d}}function C(e,t){const n=e.replace(/\r?\n$/,"");return function(e,{metastring:t,magicComments:n}){if(t&&x.test(t)){const s=t.match(x).groups.range;if(0===n.length)throw new Error(`A highlight range has been given in code block's metastring (\`\`\` ${t}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);const a=n[0].className,i=m()(s).filter((e=>e>0)).map((e=>[e-1,[a]]));return{lineClassNames:Object.fromEntries(i),code:e}}return null}(n,{...t})??A(n,{...t})}function y(e){const t=function(e){return t=e.language??function(e){if(!e)return;const t=e.split(" ").find((e=>e.startsWith("language-")));return t?.replace(/language-/,"")}(e.className)??e.defaultLanguage,t?.toLowerCase()??"text";var t}({language:e.language,defaultLanguage:e.defaultLanguage,className:e.className}),{lineClassNames:n,code:s}=C(e.code,{metastring:e.metastring,magicComments:e.magicComments,language:t}),a=function({className:e,language:t}){return(0,r.A)(e,t&&!e?.includes(`language-${t}`)&&`language-${t}`)}({className:e.className,language:t}),i=(o=e.metastring,(o?.match(p)?.groups.title??"")||e.title);var o;const c=N({showLineNumbers:e.showLineNumbers,metastring:e.metastring});return{codeInput:e.code,code:s,className:a,language:t,title:i,lineNumbersStart:c,lineClassNames:n}}const L=(0,s.createContext)(null);function k({metadata:e,wordWrap:t,children:n}){const a=(0,s.useMemo)((()=>({metadata:e,wordWrap:t})),[e,t]);return(0,f.jsx)(L.Provider,{value:a,children:n})}function w(){const e=(0,s.useContext)(L);if(null===e)throw new h.dV("CodeBlockContextProvider");return e}const _="codeBlockContainer_Ckt0";function T({as:e,...t}){const n=function(e){const t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach((([e,s])=>{const a=t[e];a&&"string"==typeof s&&(n[a]=s)})),n}(l());return(0,f.jsx)(e,{...t,style:n,className:(0,r.A)(t.className,_,d.G.common.codeBlock)})}const B="codeBlock_bY9V",E="codeBlockStandalone_MEMb",H="codeBlockLines_e6Vv",M="codeBlockLinesWithNumbering_o6Pm";function I({children:e,className:t}){return(0,f.jsx)(T,{as:"pre",tabIndex:0,className:(0,r.A)(E,"thin-scrollbar",t),children:(0,f.jsx)("code",{className:H,children:e})})}const S={attributes:!0,characterData:!0,childList:!0,subtree:!0};function V(e,t){const[n,a]=(0,s.useState)(),i=(0,s.useCallback)((()=>{a(e.current?.closest("[role=tabpanel][hidden]"))}),[e,a]);(0,s.useEffect)((()=>{i()}),[i]),function(e,t,n=S){const a=(0,h._q)(t),i=(0,h.Be)(n);(0,s.useEffect)((()=>{const t=new MutationObserver(a);return e&&t.observe(e,i),()=>t.disconnect()}),[e,a,i])}(n,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),i())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}function U({children:e}){return e}var R=n(1765);function z({line:e,token:t,...n}){return(0,f.jsx)("span",{...n})}const O="codeLine_lJS_",P="codeLineNumber_Tfdd",D="codeLineContent_feaV";function G({line:e,classNames:t,showLineNumbers:n,getLineProps:s,getTokenProps:a}){const i=function(e){const t=1===e.length&&"\n"===e[0].content?e[0]:void 0;return t?[{...t,content:""}]:e}(e),o=s({line:i,className:(0,r.A)(t,n&&O)}),c=i.map(((e,t)=>{const n=a({token:e});return(0,f.jsx)(z,{...n,line:i,token:e,children:n.children},t)}));return(0,f.jsxs)("span",{...o,children:[n?(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)("span",{className:P}),(0,f.jsx)("span",{className:D,children:c})]}):c,(0,f.jsx)("br",{})]})}const $=s.forwardRef(((e,t)=>(0,f.jsx)("pre",{ref:t,tabIndex:0,...e,className:(0,r.A)(e.className,B,"thin-scrollbar")})));function F(e){const{metadata:t}=w();return(0,f.jsx)("code",{...e,className:(0,r.A)(e.className,H,void 0!==t.lineNumbersStart&&M),style:{...e.style,counterReset:void 0===t.lineNumbersStart?void 0:"line-count "+(t.lineNumbersStart-1)}})}function W({className:e}){const{metadata:t,wordWrap:n}=w(),s=l(),{code:a,language:i,lineNumbersStart:o,lineClassNames:c}=t;return(0,f.jsx)(R.f4,{theme:s,code:a,language:i,children:({className:t,style:s,tokens:a,getLineProps:i,getTokenProps:l})=>(0,f.jsx)($,{ref:n.codeBlockRef,className:(0,r.A)(e,t),style:s,children:(0,f.jsx)(F,{children:a.map(((e,t)=>(0,f.jsx)(G,{line:e,getLineProps:i,getTokenProps:l,classNames:c[t],showLineNumbers:void 0!==o},t)))})})})}function q({children:e,fallback:t}){return(0,i.A)()?(0,f.jsx)(f.Fragment,{children:e?.()}):t??null}var J=n(1312);function Z({className:e,...t}){return(0,f.jsx)("button",{type:"button",...t,className:(0,r.A)("clean-btn",e)})}function Y(e){return(0,f.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,f.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function Q(e){return(0,f.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,f.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}const X={copyButtonCopied:"copyButtonCopied_Vdqa",copyButtonIcons:"copyButtonIcons_IEyt",copyButtonIcon:"copyButtonIcon_TrPX",copyButtonSuccessIcon:"copyButtonSuccessIcon_cVMy"};function K(e){return e?(0,J.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,J.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"})}function ee(){const{metadata:{code:e}}=w(),[t,n]=(0,s.useState)(!1),a=(0,s.useRef)(void 0),i=(0,s.useCallback)((()=>{!function(e,{target:t=document.body}={}){if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const n=document.createElement("textarea"),s=document.activeElement;n.value=e,n.setAttribute("readonly",""),n.style.contain="strict",n.style.position="absolute",n.style.left="-9999px",n.style.fontSize="12pt";const a=document.getSelection(),i=a.rangeCount>0&&a.getRangeAt(0);t.append(n),n.select(),n.selectionStart=0,n.selectionEnd=e.length;let r=!1;try{r=document.execCommand("copy")}catch{}n.remove(),i&&(a.removeAllRanges(),a.addRange(i)),s&&s.focus()}(e),n(!0),a.current=window.setTimeout((()=>{n(!1)}),1e3)}),[e]);return(0,s.useEffect)((()=>()=>window.clearTimeout(a.current)),[]),{copyCode:i,isCopied:t}}function te({className:e}){const{copyCode:t,isCopied:n}=ee();return(0,f.jsx)(Z,{"aria-label":K(n),title:(0,J.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,r.A)(e,X.copyButton,n&&X.copyButtonCopied),onClick:t,children:(0,f.jsxs)("span",{className:X.copyButtonIcons,"aria-hidden":"true",children:[(0,f.jsx)(Y,{className:X.copyButtonIcon}),(0,f.jsx)(Q,{className:X.copyButtonSuccessIcon})]})})}function ne(e){return(0,f.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,f.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}const se="wordWrapButtonIcon_b1P5",ae="wordWrapButtonEnabled_uzNF";function ie({className:e}){const{wordWrap:t}=w();if(!(t.isEnabled||t.isCodeScrollable))return!1;const n=(0,J.T)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,f.jsx)(Z,{onClick:()=>t.toggle(),className:(0,r.A)(e,t.isEnabled&&ae),"aria-label":n,title:n,children:(0,f.jsx)(ne,{className:se,"aria-hidden":"true"})})}const re="buttonGroup_M5ko";function oe({className:e}){return(0,f.jsx)(q,{children:()=>(0,f.jsxs)("div",{className:(0,r.A)(e,re),children:[(0,f.jsx)(ie,{}),(0,f.jsx)(te,{})]})})}const ce="codeBlockContent_QJqH",le="codeBlockTitle_OeMC";function de({className:e}){const{metadata:t}=w();return(0,f.jsxs)(T,{as:"div",className:(0,r.A)(e,t.className),children:[t.title&&(0,f.jsx)("div",{className:le,children:(0,f.jsx)(U,{children:t.title})}),(0,f.jsxs)("div",{className:ce,children:[(0,f.jsx)(W,{}),(0,f.jsx)(oe,{})]})]})}function ue(e){const t=function(e){const{prism:t}=(0,c.p)();return y({code:e.children,className:e.className,metastring:e.metastring,magicComments:t.magicComments,defaultLanguage:t.defaultLanguage,language:e.language,title:e.title,showLineNumbers:e.showLineNumbers})}(e),n=function(){const[e,t]=(0,s.useState)(!1),[n,a]=(0,s.useState)(!1),i=(0,s.useRef)(null),r=(0,s.useCallback)((()=>{const n=i.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t((e=>!e))}),[i,e]),o=(0,s.useCallback)((()=>{const{scrollWidth:e,clientWidth:t}=i.current,n=e>t||i.current.querySelector("code").hasAttribute("style");a(n)}),[i]);return V(i,o),(0,s.useEffect)((()=>{o()}),[e,o]),(0,s.useEffect)((()=>(window.addEventListener("resize",o,{passive:!0}),()=>{window.removeEventListener("resize",o)})),[o]),{codeBlockRef:i,isEnabled:e,isCodeScrollable:n,toggle:r}}();return(0,f.jsx)(k,{metadata:t,wordWrap:n,children:(0,f.jsx)(de,{})})}function me({children:e,...t}){const n=(0,i.A)(),a=function(e){return s.Children.toArray(e).some((e=>(0,s.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(e),r="string"==typeof a?ue:I;return(0,f.jsx)(r,{...t,children:a},String(n))}function he(e){return(0,f.jsx)("code",{...e})}var fe=n(8774);var pe=n(3427),xe=n(1422);const ge="details_lb9f",be="isBrowser_bmU9",je="collapsibleContent_i85q";function ve(e){return!!e&&("SUMMARY"===e.tagName||ve(e.parentElement))}function Ne(e,t){return!!e&&(e===t||Ne(e.parentElement,t))}function Ae({summary:e,children:t,...n}){(0,pe.A)().collectAnchor(n.id);const a=(0,i.A)(),o=(0,s.useRef)(null),{collapsed:c,setCollapsed:l}=(0,xe.u)({initialState:!n.open}),[d,u]=(0,s.useState)(n.open),m=s.isValidElement(e)?e:(0,f.jsx)("summary",{children:e??"Details"});return(0,f.jsxs)("details",{...n,ref:o,open:d,"data-collapsed":c,className:(0,r.A)(ge,a&&be,n.className),onMouseDown:e=>{ve(e.target)&&e.detail>1&&e.preventDefault()},onClick:e=>{e.stopPropagation();const t=e.target;ve(t)&&Ne(t,o.current)&&(e.preventDefault(),c?(l(!1),u(!0)):l(!0))},children:[m,(0,f.jsx)(xe.N,{lazy:!1,collapsed:c,onCollapseTransitionEnd:e=>{l(e),u(!e)},children:(0,f.jsx)("div",{className:je,children:t})})]})}const Ce="details_b_Ee";function ye({...e}){return(0,f.jsx)(Ae,{...e,className:(0,r.A)("alert alert--info",Ce,e.className)})}function Le(e){const t=s.Children.toArray(e.children),n=t.find((e=>s.isValidElement(e)&&"summary"===e.type)),a=(0,f.jsx)(f.Fragment,{children:t.filter((e=>e!==n))});return(0,f.jsx)(ye,{...e,summary:n,children:a})}var ke=n(1107);function we(e){return(0,f.jsx)(ke.A,{...e})}const _e="containsTaskList_mC6p";function Te(e){if(void 0!==e)return(0,r.A)(e,e?.includes("contains-task-list")&&_e)}const Be="img_ev3q";var Ee=n(7293),He=n(418);const Me={Head:a.A,details:Le,Details:Le,code:function(e){return function(e){return void 0!==e.children&&s.Children.toArray(e.children).every((e=>"string"==typeof e&&!e.includes("\n")))}(e)?(0,f.jsx)(he,{...e}):(0,f.jsx)(me,{...e})},a:function(e){return(0,f.jsx)(fe.A,{...e})},pre:function(e){return(0,f.jsx)(f.Fragment,{children:e.children})},ul:function(e){return(0,f.jsx)("ul",{...e,className:Te(e.className)})},li:function(e){return(0,pe.A)().collectAnchor(e.id),(0,f.jsx)("li",{...e})},img:function(e){return(0,f.jsx)("img",{decoding:"async",loading:"lazy",...e,className:(t=e.className,(0,r.A)(t,Be))});var t},h1:e=>(0,f.jsx)(we,{as:"h1",...e}),h2:e=>(0,f.jsx)(we,{as:"h2",...e}),h3:e=>(0,f.jsx)(we,{as:"h3",...e}),h4:e=>(0,f.jsx)(we,{as:"h4",...e}),h5:e=>(0,f.jsx)(we,{as:"h5",...e}),h6:e=>(0,f.jsx)(we,{as:"h6",...e}),admonition:Ee.A,mermaid:He.A}},5587:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>Ae});var s=n(6540),a=n(5500),i=n(9532),r=n(4848);const o=s.createContext(null);function c({children:e,content:t}){const n=function(e){return(0,s.useMemo)((()=>({metadata:e.metadata,frontMatter:e.frontMatter,assets:e.assets,contentTitle:e.contentTitle,toc:e.toc})),[e])}(t);return(0,r.jsx)(o.Provider,{value:n,children:e})}function l(){const e=(0,s.useContext)(o);if(null===e)throw new i.dV("DocProvider");return e}function d(){const{metadata:e,frontMatter:t,assets:n}=l();return(0,r.jsx)(a.be,{title:e.title,description:e.description,keywords:t.keywords,image:n.image??t.image})}var u=n(4164),m=n(4581),h=n(6929);function f(){const{metadata:e}=l();return(0,r.jsx)(h.A,{className:"docusaurus-mt-lg",previous:e.previous,next:e.next})}var p=n(1878),x=n(4267),g=n(7559),b=n(1312),j=n(8774);const v={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};function N({permalink:e,label:t,count:n,description:s}){return(0,r.jsxs)(j.A,{rel:"tag",href:e,title:s,className:(0,u.A)(v.tag,n?v.tagWithCount:v.tagRegular),children:[t,n&&(0,r.jsx)("span",{children:n})]})}const A={tags:"tags_jXut",tag:"tag_QGVx"};function C({tags:e}){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("b",{children:(0,r.jsx)(b.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,r.jsx)("ul",{className:(0,u.A)(A.tags,"padding--none","margin-left--sm"),children:e.map((e=>(0,r.jsx)("li",{className:A.tag,children:(0,r.jsx)(N,{...e})},e.permalink)))})]})}const y={iconEdit:"iconEdit_Z9Sw"};function L({className:e,...t}){return(0,r.jsx)("svg",{fill:"currentColor",height:"20",width:"20",viewBox:"0 0 40 40",className:(0,u.A)(y.iconEdit,e),"aria-hidden":"true",...t,children:(0,r.jsx)("g",{children:(0,r.jsx)("path",{d:"m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"})})})}function k({editUrl:e}){return(0,r.jsxs)(j.A,{to:e,className:g.G.common.editThisPage,children:[(0,r.jsx)(L,{}),(0,r.jsx)(b.A,{id:"theme.common.editThisPage",description:"The link label to edit the current page",children:"Edit this page"})]})}var w=n(4586);function _(e={}){const{i18n:{currentLocale:t}}=(0,w.A)(),n=function(){const{i18n:{currentLocale:e,localeConfigs:t}}=(0,w.A)();return t[e].calendar}();return new Intl.DateTimeFormat(t,{calendar:n,...e})}function T({lastUpdatedAt:e}){const t=new Date(e),n=_({day:"numeric",month:"short",year:"numeric",timeZone:"UTC"}).format(t);return(0,r.jsx)(b.A,{id:"theme.lastUpdated.atDate",description:"The words used to describe on which date a page has been last updated",values:{date:(0,r.jsx)("b",{children:(0,r.jsx)("time",{dateTime:t.toISOString(),itemProp:"dateModified",children:n})})},children:" on {date}"})}function B({lastUpdatedBy:e}){return(0,r.jsx)(b.A,{id:"theme.lastUpdated.byUser",description:"The words used to describe by who the page has been last updated",values:{user:(0,r.jsx)("b",{children:e})},children:" by {user}"})}function E({lastUpdatedAt:e,lastUpdatedBy:t}){return(0,r.jsxs)("span",{className:g.G.common.lastUpdated,children:[(0,r.jsx)(b.A,{id:"theme.lastUpdated.lastUpdatedAtBy",description:"The sentence used to display when a page has been last updated, and by who",values:{atDate:e?(0,r.jsx)(T,{lastUpdatedAt:e}):"",byUser:t?(0,r.jsx)(B,{lastUpdatedBy:t}):""},children:"Last updated{atDate}{byUser}"}),!1]})}const H={lastUpdated:"lastUpdated_JAkA"};function M({className:e,editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s}){return(0,r.jsxs)("div",{className:(0,u.A)("row",e),children:[(0,r.jsx)("div",{className:"col",children:t&&(0,r.jsx)(k,{editUrl:t})}),(0,r.jsx)("div",{className:(0,u.A)("col",H.lastUpdated),children:(n||s)&&(0,r.jsx)(E,{lastUpdatedAt:n,lastUpdatedBy:s})})]})}function I(){const{metadata:e}=l(),{editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s,tags:a}=e,i=a.length>0,o=!!(t||n||s);return i||o?(0,r.jsxs)("footer",{className:(0,u.A)(g.G.docs.docFooter,"docusaurus-mt-lg"),children:[i&&(0,r.jsx)("div",{className:(0,u.A)("row margin-top--sm",g.G.docs.docFooterTagsRow),children:(0,r.jsx)("div",{className:"col",children:(0,r.jsx)(C,{tags:a})})}),o&&(0,r.jsx)(M,{className:(0,u.A)("margin-top--sm",g.G.docs.docFooterEditMetaRow),editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s})]}):null}var S=n(1422),V=n(6342);function U(e){const t=e.map((e=>({...e,parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const s=n.slice(2,e.level);e.parentIndex=Math.max(...s),n[e.level]=t}));const s=[];return t.forEach((e=>{const{parentIndex:n,...a}=e;n>=0?t[n].children.push(a):s.push(a)})),s}function R({toc:e,minHeadingLevel:t,maxHeadingLevel:n}){return e.flatMap((e=>{const s=R({toc:e.children,minHeadingLevel:t,maxHeadingLevel:n});return function(e){return e.level>=t&&e.level<=n}(e)?[{...e,children:s}]:s}))}function z(e){const t=e.getBoundingClientRect();return t.top===t.bottom?z(e.parentNode):t}function O(e,{anchorTopOffset:t}){const n=e.find((e=>z(e).top>=t));if(n){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(z(n))?n:e[e.indexOf(n)-1]??null}return e[e.length-1]??null}function P(){const e=(0,s.useRef)(0),{navbar:{hideOnScroll:t}}=(0,V.p)();return(0,s.useEffect)((()=>{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function D(e){const t=(0,s.useRef)(void 0),n=P();(0,s.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:s,linkActiveClassName:a,minHeadingLevel:i,maxHeadingLevel:r}=e;function o(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(s),o=function({minHeadingLevel:e,maxHeadingLevel:t}){const n=[];for(let s=e;s<=t;s+=1)n.push(`h${s}.anchor`);return Array.from(document.querySelectorAll(n.join()))}({minHeadingLevel:i,maxHeadingLevel:r}),c=O(o,{anchorTopOffset:n.current}),l=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(a),e.classList.add(a),t.current=e):e.classList.remove(a)}(e,e===l)}))}return document.addEventListener("scroll",o),document.addEventListener("resize",o),o(),()=>{document.removeEventListener("scroll",o),document.removeEventListener("resize",o)}}),[e,n])}function G({toc:e,className:t,linkClassName:n,isChild:s}){return e.length?(0,r.jsx)("ul",{className:s?void 0:t,children:e.map((e=>(0,r.jsxs)("li",{children:[(0,r.jsx)(j.A,{to:`#${e.id}`,className:n??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,r.jsx)(G,{isChild:!0,toc:e.children,className:t,linkClassName:n})]},e.id)))}):null}const $=s.memo(G);function F({toc:e,className:t="table-of-contents table-of-contents__left-border",linkClassName:n="table-of-contents__link",linkActiveClassName:a,minHeadingLevel:i,maxHeadingLevel:o,...c}){const l=(0,V.p)(),d=i??l.tableOfContents.minHeadingLevel,u=o??l.tableOfContents.maxHeadingLevel,m=function({toc:e,minHeadingLevel:t,maxHeadingLevel:n}){return(0,s.useMemo)((()=>R({toc:U(e),minHeadingLevel:t,maxHeadingLevel:n})),[e,t,n])}({toc:e,minHeadingLevel:d,maxHeadingLevel:u});return D((0,s.useMemo)((()=>{if(n&&a)return{linkClassName:n,linkActiveClassName:a,minHeadingLevel:d,maxHeadingLevel:u}}),[n,a,d,u])),(0,r.jsx)($,{toc:m,className:t,linkClassName:n,...c})}const W={tocCollapsibleButton:"tocCollapsibleButton_TO0P",tocCollapsibleButtonExpanded:"tocCollapsibleButtonExpanded_MG3E"};function q({collapsed:e,...t}){return(0,r.jsx)("button",{type:"button",...t,className:(0,u.A)("clean-btn",W.tocCollapsibleButton,!e&&W.tocCollapsibleButtonExpanded,t.className),children:(0,r.jsx)(b.A,{id:"theme.TOCCollapsible.toggleButtonLabel",description:"The label used by the button on the collapsible TOC component",children:"On this page"})})}const J={tocCollapsible:"tocCollapsible_ETCw",tocCollapsibleContent:"tocCollapsibleContent_vkbj",tocCollapsibleExpanded:"tocCollapsibleExpanded_sAul"};function Z({toc:e,className:t,minHeadingLevel:n,maxHeadingLevel:s}){const{collapsed:a,toggleCollapsed:i}=(0,S.u)({initialState:!0});return(0,r.jsxs)("div",{className:(0,u.A)(J.tocCollapsible,!a&&J.tocCollapsibleExpanded,t),children:[(0,r.jsx)(q,{collapsed:a,onClick:i}),(0,r.jsx)(S.N,{lazy:!0,className:J.tocCollapsibleContent,collapsed:a,children:(0,r.jsx)(F,{toc:e,minHeadingLevel:n,maxHeadingLevel:s})})]})}const Y={tocMobile:"tocMobile_ITEo"};function Q(){const{toc:e,frontMatter:t}=l();return(0,r.jsx)(Z,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:(0,u.A)(g.G.docs.docTocMobile,Y.tocMobile)})}const X={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"},K="table-of-contents__link toc-highlight",ee="table-of-contents__link--active";function te({className:e,...t}){return(0,r.jsx)("div",{className:(0,u.A)(X.tableOfContents,"thin-scrollbar",e),children:(0,r.jsx)(F,{...t,linkClassName:K,linkActiveClassName:ee})})}function ne(){const{toc:e,frontMatter:t}=l();return(0,r.jsx)(te,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:g.G.docs.docTocDesktop})}var se=n(1107),ae=n(8453),ie=n(8506);function re({children:e}){return(0,r.jsx)(ae.x,{components:ie.A,children:e})}function oe({children:e}){const t=function(){const{metadata:e,frontMatter:t,contentTitle:n}=l();return t.hide_title||void 0!==n?null:e.title}();return(0,r.jsxs)("div",{className:(0,u.A)(g.G.docs.docMarkdown,"markdown"),children:[t&&(0,r.jsx)("header",{children:(0,r.jsx)(se.A,{as:"h1",children:t})}),(0,r.jsx)(re,{children:e})]})}var ce=n(594),le=n(5260);function de(){return(0,r.jsx)(b.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function ue(){return(0,r.jsx)(b.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function me(){return(0,r.jsx)(le.A,{children:(0,r.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function he(){return(0,r.jsx)(b.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function fe(){return(0,r.jsx)(b.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}var pe=n(7293);function xe({className:e}){return(0,r.jsx)(pe.A,{type:"caution",title:(0,r.jsx)(he,{}),className:(0,u.A)(e,g.G.common.draftBanner),children:(0,r.jsx)(fe,{})})}function ge({className:e}){return(0,r.jsx)(pe.A,{type:"caution",title:(0,r.jsx)(de,{}),className:(0,u.A)(e,g.G.common.unlistedBanner),children:(0,r.jsx)(ue,{})})}function be(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(me,{}),(0,r.jsx)(ge,{...e})]})}function je({metadata:e}){const{unlisted:t,frontMatter:n}=e;return(0,r.jsxs)(r.Fragment,{children:[(t||n.unlisted)&&(0,r.jsx)(be,{}),n.draft&&(0,r.jsx)(xe,{})]})}const ve={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function Ne({children:e}){const t=function(){const{frontMatter:e,toc:t}=l(),n=(0,m.l)(),s=e.hide_table_of_contents,a=!s&&t.length>0;return{hidden:s,mobile:a?(0,r.jsx)(Q,{}):void 0,desktop:!a||"desktop"!==n&&"ssr"!==n?void 0:(0,r.jsx)(ne,{})}}(),{metadata:n}=l();return(0,r.jsxs)("div",{className:"row",children:[(0,r.jsxs)("div",{className:(0,u.A)("col",!t.hidden&&ve.docItemCol),children:[(0,r.jsx)(je,{metadata:n}),(0,r.jsx)(p.A,{}),(0,r.jsxs)("div",{className:ve.docItemContainer,children:[(0,r.jsxs)("article",{children:[(0,r.jsx)(ce.A,{}),(0,r.jsx)(x.A,{}),t.mobile,(0,r.jsx)(oe,{children:e}),(0,r.jsx)(I,{})]}),(0,r.jsx)(f,{})]})]}),t.desktop&&(0,r.jsx)("div",{className:"col col--3",children:t.desktop})]})}function Ae(e){const t=`docs-doc-id-${e.content.metadata.id}`,n=e.content;return(0,r.jsx)(c,{content:e.content,children:(0,r.jsxs)(a.e3,{className:t,children:[(0,r.jsx)(d,{}),(0,r.jsx)(Ne,{children:(0,r.jsx)(n,{})})]})})}},6929:(e,t,n)=>{"use strict";n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(1312),i=n(8774),r=n(4848);function o(e){const{permalink:t,title:n,subLabel:a,isNext:o}=e;return(0,r.jsxs)(i.A,{className:(0,s.A)("pagination-nav__link",o?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[a&&(0,r.jsx)("div",{className:"pagination-nav__sublabel",children:a}),(0,r.jsx)("div",{className:"pagination-nav__label",children:n})]})}function c(e){const{className:t,previous:n,next:i}=e;return(0,r.jsxs)("nav",{className:(0,s.A)(t,"pagination-nav"),"aria-label":(0,a.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[n&&(0,r.jsx)(o,{...n,subLabel:(0,r.jsx)(a.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),i&&(0,r.jsx)(o,{...i,subLabel:(0,r.jsx)(a.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}},7293:(e,t,n)=>{"use strict";n.d(t,{A:()=>H});var s=n(6540),a=n(4848);function i(e){const{mdxAdmonitionTitle:t,rest:n}=function(e){const t=s.Children.toArray(e),n=t.find((e=>s.isValidElement(e)&&"mdxAdmonitionTitle"===e.type)),i=t.filter((e=>e!==n)),r=n?.props.children;return{mdxAdmonitionTitle:r,rest:i.length>0?(0,a.jsx)(a.Fragment,{children:i}):null}}(e.children),i=e.title??t;return{...e,...i&&{title:i},children:n}}var r=n(4164),o=n(1312),c=n(7559);const l="admonition_xJq3",d="admonitionHeading_Gvgb",u="admonitionIcon_Rf37",m="admonitionContent_BuS1";function h({type:e,className:t,children:n}){return(0,a.jsx)("div",{className:(0,r.A)(c.G.common.admonition,c.G.common.admonitionType(e),l,t),children:n})}function f({icon:e,title:t}){return(0,a.jsxs)("div",{className:d,children:[(0,a.jsx)("span",{className:u,children:e}),t]})}function p({children:e}){return e?(0,a.jsx)("div",{className:m,children:e}):null}function x(e){const{type:t,icon:n,title:s,children:i,className:r}=e;return(0,a.jsxs)(h,{type:t,className:r,children:[s||n?(0,a.jsx)(f,{title:s,icon:n}):null,(0,a.jsx)(p,{children:i})]})}function g(e){return(0,a.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})})}const b={icon:(0,a.jsx)(g,{}),title:(0,a.jsx)(o.A,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)",children:"note"})};function j(e){return(0,a.jsx)(x,{...b,...e,className:(0,r.A)("alert alert--secondary",e.className),children:e.children})}function v(e){return(0,a.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})})}const N={icon:(0,a.jsx)(v,{}),title:(0,a.jsx)(o.A,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)",children:"tip"})};function A(e){return(0,a.jsx)(x,{...N,...e,className:(0,r.A)("alert alert--success",e.className),children:e.children})}function C(e){return(0,a.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})})}const y={icon:(0,a.jsx)(C,{}),title:(0,a.jsx)(o.A,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)",children:"info"})};function L(e){return(0,a.jsx)(x,{...y,...e,className:(0,r.A)("alert alert--info",e.className),children:e.children})}function k(e){return(0,a.jsx)("svg",{viewBox:"0 0 16 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})})}const w={icon:(0,a.jsx)(k,{}),title:(0,a.jsx)(o.A,{id:"theme.admonition.warning",description:"The default label used for the Warning admonition (:::warning)",children:"warning"})};function _(e){return(0,a.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})})}const T={icon:(0,a.jsx)(_,{}),title:(0,a.jsx)(o.A,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)",children:"danger"})};const B={icon:(0,a.jsx)(k,{}),title:(0,a.jsx)(o.A,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)",children:"caution"})};const E={...{note:j,tip:A,info:L,warning:function(e){return(0,a.jsx)(x,{...w,...e,className:(0,r.A)("alert alert--warning",e.className),children:e.children})},danger:function(e){return(0,a.jsx)(x,{...T,...e,className:(0,r.A)("alert alert--danger",e.className),children:e.children})}},...{secondary:e=>(0,a.jsx)(j,{title:"secondary",...e}),important:e=>(0,a.jsx)(L,{title:"important",...e}),success:e=>(0,a.jsx)(A,{title:"success",...e}),caution:function(e){return(0,a.jsx)(x,{...B,...e,className:(0,r.A)("alert alert--warning",e.className),children:e.children})}}};function H(e){const t=i(e),n=(s=t.type,E[s]||(console.warn(`No admonition component found for admonition type "${s}". Using Info as fallback.`),E.info));var s;return(0,a.jsx)(n,{...t})}},8426:(e,t)=>{function n(e){let t,n=[];for(let s of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(s))n.push(parseInt(s,10));else if(t=s.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,s,a,i]=t;if(s&&i){s=parseInt(s),i=parseInt(i);const e=s<i?1:-1;"-"!==a&&".."!==a&&"\u2025"!==a||(i+=e);for(let t=s;t!==i;t+=e)n.push(t)}}return n}t.default=n,e.exports=n},8453:(e,t,n)=>{"use strict";n.d(t,{R:()=>r,x:()=>o});var s=n(6540);const a={},i=s.createContext(a);function r(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/2487527e.8180fe4e.js b/docs/build/assets/js/2487527e.8180fe4e.js
deleted file mode 100644
index 16f2e72..0000000
--- a/docs/build/assets/js/2487527e.8180fe4e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[915],{7071:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Sliders","description":"API documentation for Slider components","slug":"/category/sliders","permalink":"/reanimated-color-picker/docs/category/sliders","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"Panel5","permalink":"/reanimated-color-picker/docs/API/Panels/Panel5"},"next":{"title":"Hue","permalink":"/reanimated-color-picker/docs/category/hue"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/2b9ac54a.57f0e62e.js b/docs/build/assets/js/2b9ac54a.57f0e62e.js
deleted file mode 100644
index 20b5ae2..0000000
--- a/docs/build/assets/js/2b9ac54a.57f0e62e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[588],{3560:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>c,default:()=>a,frontMatter:()=>s,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"API/Preview/InputWidget","title":"<InputWidget />","description":"The input widget component allows you to input color values in various formats.","source":"@site/docs/API/Preview/InputWidget.md","sourceDirName":"API/Preview","slug":"/API/Preview/InputWidget","permalink":"/reanimated-color-picker/docs/API/Preview/InputWidget","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2,"sidebar_label":"InputWidget","description":"The input widget component allows you to input color values in various formats."},"sidebar":"tutorialSidebar","previous":{"title":"PreviewText","permalink":"/reanimated-color-picker/docs/API/Preview/PreviewText"},"next":{"title":"Swatches","permalink":"/reanimated-color-picker/docs/API/Preview/Swatches"}}');var l=n(4848),o=n(8453);const s={sidebar_position:2,sidebar_label:"InputWidget",description:"The input widget component allows you to input color values in various formats."},c="<InputWidget />",r={},d=[{value:"Props",id:"props",level:2},{value:"<code>defaultFormat</code>",id:"defaultformat",level:3},{value:"<code>disableAlphaChannel</code>",id:"disablealphachannel",level:3},{value:"<code>formats</code>",id:"formats",level:3},{value:"<code>inputStyle</code>",id:"inputstyle",level:3},{value:"<code>inputProps</code>",id:"inputprops",level:3},{value:"<code>inputTitleStyle</code>",id:"inputtitlestyle",level:3},{value:"<code>containerStyle</code>",id:"containerstyle",level:3},{value:"<code>iconColor</code>",id:"iconcolor",level:3},{value:"<code>iconStyle</code>",id:"iconstyle",level:3}];function h(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,o.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.header,{children:(0,l.jsx)(t.h1,{id:"inputwidget-",children:(0,l.jsx)(t.code,{children:"<InputWidget />"})})}),"\n",(0,l.jsx)(t.p,{children:(0,l.jsx)(t.img,{alt:"InputWidget",src:n(7863).A+"",width:"300",height:"455"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:"The input widget component allows you to input color values in various formats, including RGB, HEX, HSL, HWB, and HSV. The component features a button that lets you cycle through these formats, making it easy to switch between them and find the one that suits your needs."}),"\n"]}),"\n",(0,l.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,l.jsx)(t.h3,{id:"defaultformat",children:(0,l.jsx)(t.code,{children:"defaultFormat"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"defaultFormat"})," prop determines the initial color format for the input widget component."]}),"\n",(0,l.jsxs)(t.li,{children:["It accepts one of the following values: ",(0,l.jsx)(t.code,{children:"'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'"})]}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"disablealphachannel",children:(0,l.jsx)(t.code,{children:"disableAlphaChannel"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:"This prop allows you to disable the alpha channel input. If set to true, the input widget will ignore the alpha channel and prevent users from setting the opacity of the selected color."}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"formats",children:(0,l.jsx)(t.code,{children:"formats"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"formats"})," prop determines which color formats are included in the input widget component and the order they appear when cycling through them."]}),"\n",(0,l.jsxs)(t.li,{children:["It accepts an array of the following values: ",(0,l.jsx)(t.code,{children:"'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'"})]}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"inputstyle",children:(0,l.jsx)(t.code,{children:"inputStyle"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"inputStyle"})," prop sets the style for the ",(0,l.jsx)(t.code,{children:"InputText"})," components that make up the input fields for each color format."]}),"\n",(0,l.jsxs)(t.li,{children:["It accepts a ",(0,l.jsx)(t.code,{children:"StyleProp<TextStyle>"})," object."]}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"inputprops",children:(0,l.jsx)(t.code,{children:"inputProps"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"inputProps"})," prop sets the props for the ",(0,l.jsx)(t.code,{children:"TextInput"})," components that make up the input fields for each color format."]}),"\n",(0,l.jsxs)(t.li,{children:["It accepts an ",(0,l.jsx)(t.code,{children:"InputProps"})," object."]}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"inputtitlestyle",children:(0,l.jsx)(t.code,{children:"inputTitleStyle"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"inputTitleStyle"})," prop sets the style for the ",(0,l.jsx)(t.code,{children:"Text"})," component that displays the title for the input fields."]}),"\n",(0,l.jsx)(t.li,{children:"This title is located below the input fields and indicates which color format is currently displayed."}),"\n",(0,l.jsxs)(t.li,{children:["It accepts a ",(0,l.jsx)(t.code,{children:"StyleProp<TextStyle>"})," object."]}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"containerstyle",children:(0,l.jsx)(t.code,{children:"containerStyle"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"containerStyle"})," prop sets the style for the ",(0,l.jsx)(t.code,{children:"View"})," component that wraps around all the input fields and the cycle button."]}),"\n",(0,l.jsxs)(t.li,{children:["It accepts a ",(0,l.jsx)(t.code,{children:"StyleProp<ViewStyle>"})," object."]}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"iconcolor",children:(0,l.jsx)(t.code,{children:"iconColor"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"iconColor"})," prop sets the color for the cycle button icon, which is an Image component that cycles through the available color formats when clicked."]}),"\n",(0,l.jsxs)(t.li,{children:["It accepts a ",(0,l.jsx)(t.code,{children:"string"})," representing a color value."]}),"\n"]}),"\n",(0,l.jsx)(t.h3,{id:"iconstyle",children:(0,l.jsx)(t.code,{children:"iconStyle"})}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["The ",(0,l.jsx)(t.code,{children:"iconStyle"})," prop sets the style for the cycle button icon."]}),"\n",(0,l.jsxs)(t.li,{children:["It accepts a ",(0,l.jsx)(t.code,{children:"StyleProp<ImageStyle>"})," object."]}),"\n"]})]})}function a(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(h,{...e})}):h(e)}},7863:(e,t,n)=>{n.d(t,{A:()=>i});const i=n.p+"assets/images/InputWidgets-01952ad7ad083d25cd90fcba19bfc4ad.png"},8453:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>c});var i=n(6540);const l={},o=i.createContext(l);function s(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:s(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/2b9ac54a.e4b8602a.js b/docs/build/assets/js/2b9ac54a.e4b8602a.js
new file mode 100644
index 0000000..060204b
--- /dev/null
+++ b/docs/build/assets/js/2b9ac54a.e4b8602a.js
@@ -0,0 +1,324 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [99],
+  {
+    8526: (e, t, n) => {
+      n.r(t),
+        n.d(t, {
+          assets: () => r,
+          contentTitle: () => c,
+          default: () => h,
+          frontMatter: () => o,
+          metadata: () => s,
+          toc: () => d,
+        });
+      var i = n(5893),
+        l = n(1151);
+      const o = {
+          sidebar_position: 2,
+          sidebar_label: 'InputWidget',
+          description: 'The input widget component allows you to input color values in various formats.',
+        },
+        c = '<InputWidget />',
+        s = {
+          id: 'API/Preview/InputWidget',
+          title: '<InputWidget />',
+          description: 'The input widget component allows you to input color values in various formats.',
+          source: '@site/docs/API/Preview/InputWidget.md',
+          sourceDirName: 'API/Preview',
+          slug: '/API/Preview/InputWidget',
+          permalink: '/reanimated-color-picker/docs/API/Preview/InputWidget',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 2,
+          frontMatter: {
+            sidebar_position: 2,
+            sidebar_label: 'InputWidget',
+            description: 'The input widget component allows you to input color values in various formats.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'PreviewText', permalink: '/reanimated-color-picker/docs/API/Preview/PreviewText' },
+          next: { title: 'Swatches', permalink: '/reanimated-color-picker/docs/API/Preview/Swatches' },
+        },
+        r = {},
+        d = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>defaultFormat</code>', id: 'defaultformat', level: 3 },
+          { value: '<code>disableAlphaChannel</code>', id: 'disablealphachannel', level: 3 },
+          { value: '<code>formats</code>', id: 'formats', level: 3 },
+          { value: '<code>inputStyle</code>', id: 'inputstyle', level: 3 },
+          { value: '<code>inputProps</code>', id: 'inputprops', level: 3 },
+          { value: '<code>inputTitleStyle</code>', id: 'inputtitlestyle', level: 3 },
+          { value: '<code>containerStyle</code>', id: 'containerstyle', level: 3 },
+          { value: '<code>iconColor</code>', id: 'iconcolor', level: 3 },
+          { value: '<code>iconStyle</code>', id: 'iconstyle', level: 3 },
+        ];
+      function a(e) {
+        const t = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(t.h1, { id: 'inputwidget-', children: (0, i.jsx)(t.code, { children: '<InputWidget />' }) }),
+            '\n',
+            (0, i.jsx)(t.p, {
+              children: (0, i.jsx)(t.img, { alt: 'InputWidget', src: n(1807).Z + '', width: '300', height: '455' }),
+            }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(t.li, {
+                  children:
+                    'The input widget component allows you to input color values in various formats, including RGB, HEX, HSL, HWB, and HSV. The component features a button that lets you cycle through these formats, making it easy to switch between them and find the one that suits your needs.',
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'defaultformat', children: (0, i.jsx)(t.code, { children: 'defaultFormat' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'defaultFormat' }),
+                    ' prop determines the initial color format for the input widget component.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'It accepts one of the following values: ',
+                    (0, i.jsx)(t.code, { children: "'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'" }),
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'disablealphachannel', children: (0, i.jsx)(t.code, { children: 'disableAlphaChannel' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(t.li, {
+                  children:
+                    'This prop allows you to disable the alpha channel input. If set to true, the input widget will ignore the alpha channel and prevent users from setting the opacity of the selected color.',
+                }),
+                '\n',
+                (0, i.jsx)(t.li, { children: (0, i.jsx)(t.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, i.jsx)(t.li, { children: (0, i.jsx)(t.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'formats', children: (0, i.jsx)(t.code, { children: 'formats' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'formats' }),
+                    ' prop determines which color formats are included in the input widget component and the order they appear when cycling through them.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'It accepts an array of the following values: ',
+                    (0, i.jsx)(t.code, { children: "'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'" }),
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'inputstyle', children: (0, i.jsx)(t.code, { children: 'inputStyle' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'inputStyle' }),
+                    ' prop sets the style for the ',
+                    (0, i.jsx)(t.code, { children: 'InputText' }),
+                    ' components that make up the input fields for each color format.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: ['It accepts a ', (0, i.jsx)(t.code, { children: 'StyleProp<TextStyle>' }), ' object.'],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'inputprops', children: (0, i.jsx)(t.code, { children: 'inputProps' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'inputProps' }),
+                    ' prop sets the props for the ',
+                    (0, i.jsx)(t.code, { children: 'TextInput' }),
+                    ' components that make up the input fields for each color format.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, { children: ['It accepts an ', (0, i.jsx)(t.code, { children: 'InputProps' }), ' object.'] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'inputtitlestyle', children: (0, i.jsx)(t.code, { children: 'inputTitleStyle' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'inputTitleStyle' }),
+                    ' prop sets the style for the ',
+                    (0, i.jsx)(t.code, { children: 'Text' }),
+                    ' component that displays the title for the input fields.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsx)(t.li, {
+                  children:
+                    'This title is located below the input fields and indicates which color format is currently displayed.',
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: ['It accepts a ', (0, i.jsx)(t.code, { children: 'StyleProp<TextStyle>' }), ' object.'],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'containerstyle', children: (0, i.jsx)(t.code, { children: 'containerStyle' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'containerStyle' }),
+                    ' prop sets the style for the ',
+                    (0, i.jsx)(t.code, { children: 'View' }),
+                    ' component that wraps around all the input fields and the cycle button.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: ['It accepts a ', (0, i.jsx)(t.code, { children: 'StyleProp<ViewStyle>' }), ' object.'],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'iconcolor', children: (0, i.jsx)(t.code, { children: 'iconColor' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'iconColor' }),
+                    ' prop sets the color for the cycle button icon, which is an Image component that cycles through the available color formats when clicked.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: ['It accepts a ', (0, i.jsx)(t.code, { children: 'string' }), ' representing a color value.'],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(t.h3, { id: 'iconstyle', children: (0, i.jsx)(t.code, { children: 'iconStyle' }) }),
+            '\n',
+            (0, i.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: [
+                    'The ',
+                    (0, i.jsx)(t.code, { children: 'iconStyle' }),
+                    ' prop sets the style for the cycle button icon.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(t.li, {
+                  children: ['It accepts a ', (0, i.jsx)(t.code, { children: 'StyleProp<ImageStyle>' }), ' object.'],
+                }),
+                '\n',
+              ],
+            }),
+          ],
+        });
+      }
+      function h(e = {}) {
+        const { wrapper: t } = { ...(0, l.a)(), ...e.components };
+        return t ? (0, i.jsx)(t, { ...e, children: (0, i.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    1807: (e, t, n) => {
+      n.d(t, { Z: () => i });
+      const i = n.p + 'assets/images/InputWidgets-01952ad7ad083d25cd90fcba19bfc4ad.png';
+    },
+    1151: (e, t, n) => {
+      n.d(t, { Z: () => s, a: () => c });
+      var i = n(7294);
+      const l = {},
+        o = i.createContext(l);
+      function c(e) {
+        const t = i.useContext(o);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(t) : { ...t, ...e };
+          },
+          [t, e],
+        );
+      }
+      function s(e) {
+        let t;
+        return (
+          (t = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(l)
+              : e.components || l
+            : c(e.components)),
+          i.createElement(o.Provider, { value: t }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/2de8a64b.0aeb7b31.js b/docs/build/assets/js/2de8a64b.0aeb7b31.js
deleted file mode 100644
index 98e8e2b..0000000
--- a/docs/build/assets/js/2de8a64b.0aeb7b31.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[685],{1279:(e,n,t)=>{t.d(n,{A:()=>l});const l=t.p+"assets/images/panel2-saturation-bc20014dcc48696ed58273d705b447c4.png"},3138:(e,n,t)=>{t.d(n,{A:()=>l});const l=t.p+"assets/images/panel2-brightness-389d07bf3f673e64e02a6b9d52f36e59.png"},5529:(e,n,t)=>{t.d(n,{Ay:()=>r,RM:()=>s});var l=t(4848),i=t(8453);const s=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function d(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function r(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},7256:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>x,frontMatter:()=>r,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"API/Panels/Panel2","title":"<Panel2 />","description":"A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.","source":"@site/docs/API/Panels/Panel2.mdx","sourceDirName":"API/Panels","slug":"/API/Panels/Panel2","permalink":"/reanimated-color-picker/docs/API/Panels/Panel2","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1,"sidebar_label":"Panel2","description":"A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels."},"sidebar":"tutorialSidebar","previous":{"title":"Panel1","permalink":"/reanimated-color-picker/docs/API/Panels/Panel1"},"next":{"title":"Panel3","permalink":"/reanimated-color-picker/docs/API/Panels/Panel3"}}');var i=t(4848),s=t(8453),d=t(5529);const r={sidebar_position:1,sidebar_label:"Panel2",description:"A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels."},c="<Panel2 />",h={},o=[{value:"Props",id:"props",level:2},{value:"<code>verticalChannel</code>",id:"verticalchannel",level:3},{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},{value:"<code>reverseHue</code>",id:"reversehue",level:3},{value:"<code>reverseVerticalChannel</code>",id:"reverseverticalchannel",level:3},{value:"<code>style</code>",id:"style",level:3}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components},{Shapes:l}=n;return l||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"panel2-",children:(0,i.jsx)(n.code,{children:"<Panel2 />"})})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:(0,i.jsx)(n.strong,{children:'vertical channel: "saturation"'})}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:(0,i.jsx)(n.strong,{children:'vertical channel: "brightness"'})}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:(0,i.jsx)(n.strong,{children:'vertical channel: "hsl-saturation"'})})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.img,{alt:"panel2-saturation",src:t(1279).A+"",width:"200",height:"200"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.img,{alt:"panel2-brightness",src:t(3138).A+"",width:"200",height:"200"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.img,{alt:"panel2-hsl-saturation",src:t(8093).A+"",width:"200",height:"200"})})]})})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"A square-shaped slider (windows style) is utilized to adjust the hue and (saturation or brightness) channels."}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Move the thumb (handle) horizontally to change the color's hue."}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Drag the thumb (handle) up or down to adjust either the saturation or the brightness of the color, depending on the ",(0,i.jsx)(n.code,{children:"verticalChannel"})," prop."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.p,{children:["If you want to give your users more control over the color selection, you can add another slider next to ",(0,i.jsx)(n.code,{children:"Panel2"})," that adjusts the opposite channel. For example, if ",(0,i.jsx)(n.code,{children:"verticalChannel"})," is ",(0,i.jsx)(n.code,{children:'"saturation"'}),", you can add a ",(0,i.jsx)(n.a,{href:"../Sliders/HSB/BrightnessSlider",children:(0,i.jsx)(n.code,{children:"<BrightnessSlider />"})}),", and vice versa."]})}),"\n",(0,i.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,i.jsx)(n.h3,{id:"verticalchannel",children:(0,i.jsx)(n.code,{children:"verticalChannel"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Determines which color channel to adjust when moving the thumb vertically on the slider."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:'type: "saturation" | "brightness" | "hsl-saturation"'})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:'default: "saturation"'})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"boundedthumb",children:(0,i.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel."}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the panel."]}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"false"}),", part of it will be outside of the panel bounds."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbsize",children:(0,i.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Panel's handle (thumb) size (height*width)."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbcolor",children:(0,i.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change thumb's color."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"default"}),": interactive*"]}),"\n"]}),"\n",(0,i.jsxs)(n.admonition,{type:"info",children:[(0,i.jsx)(n.mdxAdmonitionTitle,{children:(0,i.jsx)(n.strong,{children:"*interactive"})}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The thumb color will be changed depending on the contrast ratio if no color value is passed."}),"\n"]})]}),"\n",(0,i.jsx)(n.h3,{id:"thumbshape",children:(0,i.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change thumb's shape and appearance."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"values"}),": ",(0,i.jsx)(l,{})]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 'ring'"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbstyle",children:(0,i.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,i.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,i.jsx)(d.Ay,{}),"\n",(0,i.jsx)(n.h3,{id:"gestures",children:(0,i.jsx)(n.code,{children:"gestures"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,i.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"adaptspectrum",children:(0,i.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"reversehue",children:(0,i.jsx)(n.code,{children:"reverseHue"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Reverse (flip) hue direction."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"reverseverticalchannel",children:(0,i.jsx)(n.code,{children:"reverseVerticalChannel"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Reverse (flip) the direction of the vertical channel's saturation or brightness."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"style",children:(0,i.jsx)(n.code,{children:"style"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Panel's container style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{title:"note",type:"info",children:(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function x(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},8093:(e,n,t)=>{t.d(n,{A:()=>l});const l=t.p+"assets/images/panel2-hsl-saturation-c1190fbd46bfd8ff0bdf4bc45be99a8f.png"},8453:(e,n,t)=>{t.d(n,{R:()=>d,x:()=>r});var l=t(6540);const i={},s=l.createContext(i);function d(e){const n=l.useContext(s);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),l.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/2de8a64b.b97d2da5.js b/docs/build/assets/js/2de8a64b.b97d2da5.js
new file mode 100644
index 0000000..753eb2b
--- /dev/null
+++ b/docs/build/assets/js/2de8a64b.b97d2da5.js
@@ -0,0 +1,711 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [454],
+  {
+    8850: (e, n, t) => {
+      t.r(n),
+        t.d(n, {
+          assets: () => h,
+          contentTitle: () => d,
+          default: () => x,
+          frontMatter: () => r,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var l = t(5893),
+        i = t(1151),
+        s = t(435);
+      const r = {
+          sidebar_position: 1,
+          sidebar_label: 'Panel2',
+          description: 'A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.',
+        },
+        d = '<Panel2 />',
+        c = {
+          id: 'API/Panels/Panel2',
+          title: '<Panel2 />',
+          description: 'A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.',
+          source: '@site/docs/API/Panels/Panel2.mdx',
+          sourceDirName: 'API/Panels',
+          slug: '/API/Panels/Panel2',
+          permalink: '/reanimated-color-picker/docs/API/Panels/Panel2',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 1,
+          frontMatter: {
+            sidebar_position: 1,
+            sidebar_label: 'Panel2',
+            description: 'A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Panel1', permalink: '/reanimated-color-picker/docs/API/Panels/Panel1' },
+          next: { title: 'Panel3', permalink: '/reanimated-color-picker/docs/API/Panels/Panel3' },
+        },
+        h = {},
+        o = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>verticalChannel</code>', id: 'verticalchannel', level: 3 },
+          { value: '<code>boundedThumb</code>', id: 'boundedthumb', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>thumbScaleAnimationValue</code>', id: 'thumbscaleanimationvalue', level: 3 },
+          { value: '<code>thumbScaleAnimationDuration</code>', id: 'thumbscaleanimationduration', level: 3 },
+          { value: '<code>gestures</code>', id: 'gestures', level: 3 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+          { value: '<code>reverseHue</code>', id: 'reversehue', level: 3 },
+          { value: '<code>reverseVerticalChannel</code>', id: 'reverseverticalchannel', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+            a: 'a',
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            table: 'table',
+            tbody: 'tbody',
+            td: 'td',
+            th: 'th',
+            thead: 'thead',
+            tr: 'tr',
+            ul: 'ul',
+            ...(0, i.a)(),
+            ...e.components,
+          },
+          { Shapes: r } = n;
+        return (
+          r ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, l.jsxs)(l.Fragment, {
+            children: [
+              (0, l.jsx)(n.h1, { id: 'panel2-', children: (0, l.jsx)(n.code, { children: '<Panel2 />' }) }),
+              '\n',
+              (0, l.jsxs)(n.table, {
+                children: [
+                  (0, l.jsx)(n.thead, {
+                    children: (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.th, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.strong, { children: 'vertical channel: "saturation"' }),
+                        }),
+                        (0, l.jsx)(n.th, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.strong, { children: 'vertical channel: "brightness"' }),
+                        }),
+                        (0, l.jsx)(n.th, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.strong, { children: 'vertical channel: "hsl-saturation"' }),
+                        }),
+                      ],
+                    }),
+                  }),
+                  (0, l.jsx)(n.tbody, {
+                    children: (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.img, {
+                            alt: 'panel2-saturation',
+                            src: t(6452).Z + '',
+                            width: '200',
+                            height: '200',
+                          }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.img, {
+                            alt: 'panel2-brightness',
+                            src: t(9161).Z + '',
+                            width: '200',
+                            height: '200',
+                          }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.img, {
+                            alt: 'panel2-hsl-saturation',
+                            src: t(9536).Z + '',
+                            width: '200',
+                            height: '200',
+                          }),
+                        }),
+                      ],
+                    }),
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.p, {
+                        children:
+                          'A square-shaped slider (windows style) is utilized to adjust the hue and (saturation or brightness) channels.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.p, { children: "Move the thumb (handle) horizontally to change the color's hue." }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsxs)(n.p, {
+                        children: [
+                          'Drag the thumb (handle) up or down to adjust either the saturation or the brightness of the color, depending on the ',
+                          (0, l.jsx)(n.code, { children: 'verticalChannel' }),
+                          ' prop.',
+                        ],
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                type: 'tip',
+                children: (0, l.jsxs)(n.p, {
+                  children: [
+                    'If you want to give your users more control over the color selection, you can add another slider next to ',
+                    (0, l.jsx)(n.code, { children: 'Panel2' }),
+                    ' that adjusts the opposite channel. For example, if ',
+                    (0, l.jsx)(n.code, { children: 'verticalChannel' }),
+                    ' is ',
+                    (0, l.jsx)(n.code, { children: '"saturation"' }),
+                    ', you can add a ',
+                    (0, l.jsx)(n.a, {
+                      href: '../Sliders/HSB/BrightnessSlider',
+                      children: (0, l.jsx)(n.code, { children: '<BrightnessSlider />' }),
+                    }),
+                    ', and vice versa.',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, l.jsx)(n.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'verticalchannel', children: (0, l.jsx)(n.code, { children: 'verticalChannel' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: 'Determines which color channel to adjust when moving the thumb vertically on the slider.',
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: (0, l.jsx)(n.code, { children: 'type: "saturation" | "brightness" | "hsl-saturation"' }),
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: "saturation"' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'boundedthumb', children: (0, l.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children:
+                      'Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.',
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the panel.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the panel bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbsize', children: (0, l.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Panel's handle (thumb) size (height*width)." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbcolor', children: (0, l.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Change thumb's color." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'default' }), ': interactive*'] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, l.jsx)(n.mdxAdmonitionTitle, { children: (0, l.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, l.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.li, {
+                        children: 'The thumb color will be changed depending on the contrast ratio if no color value is passed.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbshape', children: (0, l.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Change thumb's shape and appearance." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'values' }), ': ', (0, l.jsx)(r, {})] }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbstyle', children: (0, l.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, l.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, l.jsx)(s.ZP, {}),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'gestures', children: (0, l.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, l.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'adaptspectrum', children: (0, l.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'reversehue', children: (0, l.jsx)(n.code, { children: 'reverseHue' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Reverse (flip) hue direction.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'reverseverticalchannel',
+                children: (0, l.jsx)(n.code, { children: 'reverseVerticalChannel' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: "Reverse (flip) the direction of the vertical channel's saturation or brightness.",
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'style', children: (0, l.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Panel's container style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, l.jsxs)(n.ul, {
+                  children: ['\n', (0, l.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function x(e = {}) {
+        const { wrapper: n } = { ...(0, i.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, t) => {
+      t.d(n, { ZP: () => r });
+      var l = t(5893),
+        i = t(1151);
+      function s(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, i.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h4, { id: 'thumbprops', children: (0, l.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, l.jsxs)(n.table, {
+              children: [
+                (0, l.jsx)(n.thead, {
+                  children: (0, l.jsxs)(n.tr, {
+                    children: [
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, l.jsxs)(n.tbody, {
+                  children: [
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, l.jsx)(n.code, { children: 'width' }) }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, l.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, { children: ['\n', (0, l.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, l.jsx)(n.pre, {
+              children: (0, l.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function r(e = {}) {
+        const { wrapper: n } = { ...(0, i.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(s, { ...e }) }) : s(e);
+      }
+    },
+    9161: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l = t.p + 'assets/images/panel2-brightness-389d07bf3f673e64e02a6b9d52f36e59.png';
+    },
+    9536: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l = t.p + 'assets/images/panel2-hsl-saturation-c1190fbd46bfd8ff0bdf4bc45be99a8f.png';
+    },
+    6452: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l = t.p + 'assets/images/panel2-saturation-bc20014dcc48696ed58273d705b447c4.png';
+    },
+    1151: (e, n, t) => {
+      t.d(n, { Z: () => d, a: () => r });
+      var l = t(7294);
+      const i = {},
+        s = l.createContext(i);
+      function r(e) {
+        const n = l.useContext(s);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function d(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(i)
+              : e.components || i
+            : r(e.components)),
+          l.createElement(s.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/2fc6c5ee.64a63f09.js b/docs/build/assets/js/2fc6c5ee.64a63f09.js
new file mode 100644
index 0000000..e1af8b9
--- /dev/null
+++ b/docs/build/assets/js/2fc6c5ee.64a63f09.js
@@ -0,0 +1,1247 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [639],
+  {
+    7570: (e, r, n) => {
+      n.r(r),
+        n.d(r, {
+          assets: () => i,
+          contentTitle: () => s,
+          default: () => t,
+          frontMatter: () => o,
+          metadata: () => d,
+          toc: () => a,
+        });
+      var l = n(5893),
+        c = n(1151);
+      const o = { sidebar_position: 6 },
+        s = void 0,
+        d = {
+          id: 'ColorKit',
+          title: 'ColorKit',
+          description: 'colorKit is a collection of color tools that are utilized internally within the ColorPicker.',
+          source: '@site/docs/ColorKit.mdx',
+          sourceDirName: '.',
+          slug: '/ColorKit',
+          permalink: '/reanimated-color-picker/docs/ColorKit',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 6,
+          frontMatter: { sidebar_position: 6 },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'ExtraThumb', permalink: '/reanimated-color-picker/docs/API/Preview/ExtraThumb' },
+          next: { title: 'Examples', permalink: '/reanimated-color-picker/docs/Examples' },
+        },
+        i = {},
+        a = [
+          { value: 'Supported Colors', id: 'supported-colors', level: 2 },
+          { value: 'RBG', id: 'rbg', level: 4 },
+          { value: 'HEX', id: 'hex', level: 4 },
+          { value: 'HSL', id: 'hsl', level: 4 },
+          { value: 'HSV', id: 'hsv', level: 4 },
+          { value: 'HWB', id: 'hwb', level: 4 },
+          { value: 'Color ints', id: 'color-ints', level: 4 },
+          { value: 'Color keywords', id: 'color-keywords', level: 4 },
+          { value: 'Color Conversion', id: 'color-conversion', level: 2 },
+          { value: 'RGB', id: 'rgb', level: 3 },
+          { value: 'Syntax', id: 'syntax', level: 4 },
+          { value: 'Example', id: 'example', level: 4 },
+          { value: 'HEX', id: 'hex-1', level: 3 },
+          { value: 'Syntax', id: 'syntax-1', level: 4 },
+          { value: 'Example', id: 'example-1', level: 4 },
+          { value: 'HSL', id: 'hsl-1', level: 3 },
+          { value: 'Syntax', id: 'syntax-2', level: 4 },
+          { value: 'Example', id: 'example-2', level: 4 },
+          { value: 'HSV', id: 'hsv-1', level: 3 },
+          { value: 'Syntax', id: 'syntax-3', level: 4 },
+          { value: 'Example', id: 'example-3', level: 4 },
+          { value: 'HWB', id: 'hwb-1', level: 3 },
+          { value: 'Syntax', id: 'syntax-4', level: 4 },
+          { value: 'Example', id: 'example-4', level: 4 },
+          { value: 'Color Information', id: 'color-information', level: 2 },
+          { value: '<code>getFormat</code>', id: 'getformat', level: 3 },
+          { value: '<code>getRed</code>', id: 'getred', level: 3 },
+          { value: '<code>getGreen</code>', id: 'getgreen', level: 3 },
+          { value: '<code>getBlue</code>', id: 'getblue', level: 3 },
+          { value: '<code>getHue</code>', id: 'gethue', level: 3 },
+          { value: '<code>getLuminance</code>', id: 'getluminance', level: 3 },
+          { value: '<code>getBrightness</code>', id: 'getbrightness', level: 3 },
+          { value: '<code>getAlpha</code>', id: 'getalpha', level: 3 },
+          { value: '<code>getLuminanceWCAG</code>', id: 'getluminancewcag', level: 3 },
+          { value: '<code>areColorsEqual</code>', id: 'arecolorsequal', level: 3 },
+          { value: '<code>contrastRatio</code>', id: 'contrastratio', level: 3 },
+          { value: '<code>isDark</code>', id: 'isdark', level: 3 },
+          { value: '<code>isLight</code>', id: 'islight', level: 3 },
+          { value: 'Color Manipulation', id: 'color-manipulation', level: 2 },
+          { value: '<code>setRed</code>', id: 'setred', level: 3 },
+          { value: '<code>increaseRed</code>', id: 'increasered', level: 3 },
+          { value: '<code>decreaseRed</code>', id: 'decreasered', level: 3 },
+          { value: '<code>setGreen</code>', id: 'setgreen', level: 3 },
+          { value: '<code>increaseGreen</code>', id: 'increasegreen', level: 3 },
+          { value: '<code>decreaseGreen</code>', id: 'decreasegreen', level: 3 },
+          { value: '<code>setBlue</code>', id: 'setblue', level: 3 },
+          { value: '<code>increaseBlue</code>', id: 'increaseblue', level: 3 },
+          { value: '<code>decreaseBlue</code>', id: 'decreaseblue', level: 3 },
+          { value: '<code>setHue</code>', id: 'sethue', level: 3 },
+          { value: '<code>increaseHue</code>', id: 'increasehue', level: 3 },
+          { value: '<code>decreaseHue</code>', id: 'decreasehue', level: 3 },
+          { value: '<code>spin</code>', id: 'spin', level: 3 },
+          { value: '<code>setSaturation</code>', id: 'setsaturation', level: 3 },
+          { value: '<code>saturate</code>', id: 'saturate', level: 3 },
+          { value: '<code>desaturate</code>', id: 'desaturate', level: 3 },
+          { value: '<code>setLuminance</code>', id: 'setluminance', level: 3 },
+          { value: '<code>brighten</code>', id: 'brighten', level: 3 },
+          { value: '<code>darken</code>', id: 'darken', level: 3 },
+          { value: '<code>setBrightness</code>', id: 'setbrightness', level: 3 },
+          { value: '<code>increaseBrightness</code>', id: 'increasebrightness', level: 3 },
+          { value: '<code>decreaseBrightness</code>', id: 'decreasebrightness', level: 3 },
+          { value: '<code>setAlpha</code>', id: 'setalpha', level: 3 },
+          { value: '<code>increaseAlpha</code>', id: 'increasealpha', level: 3 },
+          { value: '<code>decreaseAlpha</code>', id: 'decreasealpha', level: 3 },
+          { value: 'Color Utilities', id: 'color-utilities', level: 2 },
+          { value: '<code>blend</code>', id: 'blend', level: 3 },
+          { value: '<code>invert</code>', id: 'invert', level: 3 },
+          { value: '<code>grayscale</code>', id: 'grayscale', level: 3 },
+          { value: '<code>adjustContrast</code>', id: 'adjustcontrast', level: 3 },
+          { value: '<code>randomHslColor</code>', id: 'randomhslcolor', level: 3 },
+          { value: '<code>randomHsvColor</code>', id: 'randomhsvcolor', level: 3 },
+          { value: '<code>randomRgbColor</code>', id: 'randomrgbcolor', level: 3 },
+          { value: '<code>randomHwbColor</code>', id: 'randomhwbcolor', level: 3 },
+        ];
+      function h(e) {
+        const r = {
+          a: 'a',
+          admonition: 'admonition',
+          code: 'code',
+          h2: 'h2',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          p: 'p',
+          pre: 'pre',
+          ul: 'ul',
+          ...(0, c.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsxs)(r.p, {
+              children: [
+                (0, l.jsx)(r.code, { children: 'colorKit' }),
+                ' is a collection of color tools that are utilized internally within the ',
+                (0, l.jsx)(r.code, { children: 'ColorPicker' }),
+                '.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h2, { id: 'supported-colors', children: 'Supported Colors' }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'rbg', children: 'RBG' }),
+            '\n',
+            (0, l.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'rgb(255, 0, 255)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'rgb(255 0 255)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'rgba(255, 0, 255, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'rgb(255, 0, 255, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'rgba(255 0 255 / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'rgb(255 0 255 / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{r: number, g: number, b: number, a: number}' }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{r: number, g: number, b: number}' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'hex', children: 'HEX' }),
+            '\n',
+            (0, l.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(r.li, { children: [(0, l.jsx)(r.code, { children: "'#f0f'" }), ' (#rgb)'] }),
+                '\n',
+                (0, l.jsxs)(r.li, { children: [(0, l.jsx)(r.code, { children: "'#ff00ff'" }), ' (#rrggbb)'] }),
+                '\n',
+                (0, l.jsxs)(r.li, { children: [(0, l.jsx)(r.code, { children: "'#f0ff" }), "' (#rgba)"] }),
+                '\n',
+                (0, l.jsxs)(r.li, { children: [(0, l.jsx)(r.code, { children: "'#ff00ff00'" }), ' (#rrggbbaa)'] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'hsl', children: 'HSL' }),
+            '\n',
+            (0, l.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360, 100%, 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360deg, 100%, 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360 100% 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360deg 100% 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsla(360, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsla(360deg, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360deg, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsla(360 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsla(360deg 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsl(360deg 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{h: number, s: number, l: number}' }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{h: number, s: number, l: number, a: number}' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'hsv', children: 'HSV' }),
+            '\n',
+            (0, l.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360, 100%, 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360deg, 100%, 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360 100% 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360deg 100% 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsva(360, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsva(360deg, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360deg, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsva(360 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsva(360deg 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hsv(360deg 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{h: number, s: number, v: number}' }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{h: number, s: number, v: number, a: number}' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'hwb', children: 'HWB' }),
+            '\n',
+            (0, l.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360, 100%, 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360deg, 100%, 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360 100% 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360deg 100% 100%)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwba(360, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwba(360deg, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360deg, 100%, 100%, 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwba(360 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwba(360deg 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: "'hwb(360deg 100% 100% / 1.0)'" }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{h: number, w: number, b: number}' }) }),
+                '\n',
+                (0, l.jsx)(r.li, { children: (0, l.jsx)(r.code, { children: '{h: number, w: number, b: number, a: number}' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'color-ints', children: 'Color ints' }),
+            '\n',
+            (0, l.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(r.li, { children: [(0, l.jsx)(r.code, { children: '0xff00ffff' }), ' (0xrrggbbaa)'] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'color-keywords', children: 'Color keywords' }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Named colors implementation follows the ',
+                (0, l.jsx)(r.a, { href: 'https://www.w3.org/TR/css-color-3/#svg-color', children: 'CSS3/SVG specification' }),
+                '.',
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(r.li, { children: ['aliceblue (', (0, l.jsx)(r.code, { children: '#f0f8ff' }), ')'] }),
+                '\n',
+                (0, l.jsxs)(r.li, { children: ['antiquewhite (', (0, l.jsx)(r.code, { children: '#faebd7' }), ')'] }),
+                '\n',
+                (0, l.jsxs)(r.li, { children: ['aqua (', (0, l.jsx)(r.code, { children: '#00ffff' }), ')'] }),
+                '\n',
+                (0, l.jsxs)(r.li, { children: ['aquamarine (', (0, l.jsx)(r.code, { children: '#7fffd4' }), ')'] }),
+                '\n',
+                (0, l.jsxs)(r.li, { children: ['azure (', (0, l.jsx)(r.code, { children: '#f0ffff' }), ')'] }),
+                '\n',
+                (0, l.jsx)(r.li, { children: 'and more ...' }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(r.admonition, {
+              title: 'HOW TO RUN ON THE UI THREAD',
+              type: 'info',
+              children: [
+                (0, l.jsxs)(r.ul, {
+                  children: [
+                    '\n',
+                    (0, l.jsxs)(r.li, {
+                      children: [
+                        'To execute any of the ',
+                        (0, l.jsx)(r.code, { children: 'colorKit' }),
+                        ' methods, you can use ',
+                        (0, l.jsx)(r.code, { children: 'runOnUI' }),
+                        '. For example:',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+                (0, l.jsx)(r.pre, {
+                  children: (0, l.jsx)(r.code, {
+                    className: 'language-js',
+                    children:
+                      "function workletFunction() {\r\n  'worklet';\r\n  const rgb = colorKit.runOnUI().RGB('#f0ff').object();\r\n}\n",
+                  }),
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h2, { id: 'color-conversion', children: 'Color Conversion' }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'rgb', children: 'RGB' }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Convert any of the ',
+                (0, l.jsx)(r.a, { href: '#supported-colors', children: 'supported color' }),
+                ' formats into the ',
+                (0, l.jsx)(r.code, { children: 'RGB' }),
+                ' format.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'syntax', children: 'Syntax' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-ts',
+                children:
+                  'colorKit.RGB(color: SupportedColorFormats).string(forceRGBA = false): string;\r\ncolorKit.RGB(color: SupportedColorFormats).array(roundValues = true): number[];\r\ncolorKit.RGB(color: SupportedColorFormats).object(roundValues = true): { r: number; g: number; b: number; a: number };\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'example', children: 'Example' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "import { colorKit } from 'reanimated-color-picker';\r\n\r\ncolorKit.RGB('hsl(360, 100%, 100%)').string(); // rgb(255, 255, 255)\r\ncolorKit.RGB('hsl(360, 100%, 100%)').string(true); // rgba(255, 255, 255, 1) force rbga\r\ncolorKit.RGB('#f0ff').object(); // { r: 255, g: 0, b: 255, a: 1 }\r\ncolorKit.RGB({ h: 360, s: 100, v: 50 }).array(); // [128, 0, 0, 1]\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'hex-1', children: 'HEX' }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Convert any of the ',
+                (0, l.jsx)(r.a, { href: '#supported-colors', children: 'supported color' }),
+                ' formats into the ',
+                (0, l.jsx)(r.code, { children: 'HEX' }),
+                ' format.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'syntax-1', children: 'Syntax' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-ts',
+                children: 'colorKit.HEX(color: SupportedColorFormats): string;\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'example-1', children: 'Example' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "import { colorKit } from 'reanimated-color-picker';\r\n\r\ncolorKit.HEX('red'); //  #ff0000\r\ncolorKit.HEX('hsv(360, 10%, 100%)'); // #ffe6e6\r\ncolorKit.HEX('rgba(25, 255, 255, 1)'); // #19ffff\r\ncolorKit.HEX({ h: 360, s: 100, l: 50 }); // #ff0000\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'hsl-1', children: 'HSL' }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Convert any of the ',
+                (0, l.jsx)(r.a, { href: '#supported-colors', children: 'supported color' }),
+                ' formats into the ',
+                (0, l.jsx)(r.code, { children: 'HSL' }),
+                ' format.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'syntax-2', children: 'Syntax' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-ts',
+                children:
+                  'colorKit.HSL(color: SupportedColorFormats).string(forceHSLA = false): string;\r\ncolorKit.HSL(color: SupportedColorFormats).array(roundValues = true): number[];\r\ncolorKit.HSL(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; l: number; a: number };\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'example-2', children: 'Example' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "import { colorKit } from 'reanimated-color-picker';\r\n\r\ncolorKit.HSL('orange').string(); // hsl(39, 100%, 50%)\r\ncolorKit.HSL('#503e7a').string(true); // hsla(258, 33%, 36%, 1)\r\ncolorKit.HSL('rgb(114, 99, 29)').object(); // { h: 49, s: 59, l: 28, a: 1 }\r\ncolorKit.HSL({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 28, 22, 1]\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'hsv-1', children: 'HSV' }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Convert any of the ',
+                (0, l.jsx)(r.a, { href: '#supported-colors', children: 'supported color' }),
+                ' formats into the ',
+                (0, l.jsx)(r.code, { children: 'HSV' }),
+                ' format.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'syntax-3', children: 'Syntax' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-ts',
+                children:
+                  'colorKit.HSV(color: SupportedColorFormats).string(forceHSVA = false): string;\r\ncolorKit.HSV(color: SupportedColorFormats).array(roundValues = true): number[];\r\ncolorKit.HSV(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; v: number; a: number };\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'example-3', children: 'Example' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "import { colorKit } from 'reanimated-color-picker';\r\n\r\ncolorKit.HSV('orange').string(true); // hsva(258, 49%, 48%, 1)\r\ncolorKit.HSV('#503e7a').string(); // hsv(258, 49%, 48%)\r\ncolorKit.HSV('rgb(114, 99, 29)').object(); // { h: 49, s: 75, l: 45, a: 1 }\r\ncolorKit.HSV({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 44, 28, 1]\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'hwb-1', children: 'HWB' }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Convert any of the ',
+                (0, l.jsx)(r.a, { href: '#supported-colors', children: 'supported color' }),
+                ' formats into the ',
+                (0, l.jsx)(r.code, { children: 'HWB' }),
+                ' format.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'syntax-4', children: 'Syntax' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-ts',
+                children:
+                  'colorKit.HWB(color: SupportedColorFormats).string(forceHWBA = false): string;\r\ncolorKit.HWB(color: SupportedColorFormats).array(roundValues = true): number[];\r\ncolorKit.HWB(color: SupportedColorFormats).object(roundValues = true): { h: number; w: number; b: number; a: number };\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h4, { id: 'example-4', children: 'Example' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "import { colorKit } from 'reanimated-color-picker';\r\n\r\ncolorKit.HWB('orange').string(); // hwb(39, 0%, 0%)\r\ncolorKit.HWB('#503e7a').string(true); // hwba(258, 24%, 52%, 1)\r\ncolorKit.HWB('rgb(114, 99, 29)').object(); // { h: 49, w: 12, l: 55, a: 1 }\r\ncolorKit.HWB({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 16, 72, 1]\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h2, { id: 'color-information', children: 'Color Information' }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getformat', children: (0, l.jsx)(r.code, { children: 'getFormat' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Identify the color format of a given ',
+                (0, l.jsx)(r.code, { children: 'string' }),
+                ' or ',
+                (0, l.jsx)(r.code, { children: 'object' }),
+                ', and return ',
+                (0, l.jsx)(r.code, { children: 'null' }),
+                ' for invalid colors.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.getFormat('orange'); // named\r\n\r\ncolorKit.getFormat('rgb(211, 168, 151)'); // rgb\r\ncolorKit.getFormat('rgba(211, 168, 151, 1)'); // rgba\r\ncolorKit.getFormat({ r: 211, g: 168, b: 151 }); // rgb\r\ncolorKit.getFormat({ r: 211, g: 168, b: 151, a: 1 }); // rgba\r\n\r\ncolorKit.getFormat('hsl(224, 77%, 28%)'); // hsl\r\ncolorKit.getFormat('hsla(224, 77%, 28%, 1)'); // hsla\r\ncolorKit.getFormat({ h: 224, s: 77, l: 28 }); // hsl\r\ncolorKit.getFormat({ h: 224, s: 77, l: 28, a: 1 }); // hsla\r\n\r\ncolorKit.getFormat('hsva(289, 99%, 40%, 1)'); // hsv\r\ncolorKit.getFormat('hsv(289, 99%, 40%)'); // hsva\r\ncolorKit.getFormat({ h: 289, s: 99, v: 40 }); // hsv\r\ncolorKit.getFormat({ h: 289, s: 99, v: 40, a: 1 }); // hsva\r\n\r\ncolorKit.getFormat('hwba(289, 99%, 40%, 1)'); // hwb\r\ncolorKit.getFormat('hwb(289, 99%, 40%)'); // hwba\r\ncolorKit.getFormat({ h: 289, w: 99, b: 40 }); // hwb\r\ncolorKit.getFormat({ h: 289, w: 99, b: 40, a: 1 }); // hwba\r\n\r\ncolorKit.getFormat('#fff'); // hex3\r\ncolorKit.getFormat('#ffff'); // hex4\r\ncolorKit.getFormat('#ffffffff'); // hex8\r\n\r\ncolorKit.getFormat('rgb(211, 168, 151, 1)'); // null (should be 'rgba(211, 168, 151, 1)')\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getred', children: (0, l.jsx)(r.code, { children: 'getRed' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Get the ', (0, l.jsx)(r.code, { children: 'red' }), ' channel value of a given color.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, { className: 'language-js', children: "colorKit.getRed('red'); // 255\n" }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getgreen', children: (0, l.jsx)(r.code, { children: 'getGreen' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Get the ', (0, l.jsx)(r.code, { children: 'green' }), ' channel value of a given color.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.getGreen('rgb(0, 200, 0)'); // 200\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getblue', children: (0, l.jsx)(r.code, { children: 'getBlue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Get the ', (0, l.jsx)(r.code, { children: 'green' }), ' channel value of a given color.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.getBlue('hsl(200, 60%, 50%)'); // 204\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'gethue', children: (0, l.jsx)(r.code, { children: 'getHue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Get the ', (0, l.jsx)(r.code, { children: 'hue' }), ' channel value of a given color.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, { className: 'language-js', children: "colorKit.getHue('#87c270'); // 103\n" }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getluminance', children: (0, l.jsx)(r.code, { children: 'getLuminance' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ["Get color's HSL ", (0, l.jsx)(r.code, { children: 'luminosity' }), ' channel value.'],
+            }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'If you want the overall ',
+                (0, l.jsx)(r.code, { children: 'luminosity' }),
+                ' of a color use ',
+                (0, l.jsx)(r.a, { href: '#getluminancewcag', children: (0, l.jsx)(r.code, { children: 'getLuminanceWCAG' }) }),
+                ' method.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: 'colorKit.getLuminance({ r: 67, g: 59, b: 79, a: 1 }); // 27\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getbrightness', children: (0, l.jsx)(r.code, { children: 'getBrightness' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                "Get the HSV's ",
+                (0, l.jsx)(r.code, { children: 'value' }),
+                ' (brightness) channel value of a given color.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: 'colorKit.getBrightness({ h: 127, s: 36, l: 8, a: 1 }); // 11\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getalpha', children: (0, l.jsx)(r.code, { children: 'getAlpha' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Get the ', (0, l.jsx)(r.code, { children: 'alpha' }), ' channel value of a given color.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, { className: 'language-js', children: "colorKit.getAlpha('#d2c765c7'); // 0.78\n" }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'getluminancewcag', children: (0, l.jsx)(r.code, { children: 'getLuminanceWCAG' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Returns the perceived ',
+                (0, l.jsx)(r.code, { children: 'luminance' }),
+                ' of the given color, from ',
+                (0, l.jsx)(r.code, { children: '0-1' }),
+                ' as defined by ',
+                (0, l.jsx)(r.a, {
+                  href: 'https://www.w3.org/TR/WCAG20/',
+                  children: 'Web Content Accessibility Guidelines (Version 2.0)',
+                }),
+                '.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.getLuminanceWCAG('rgba(176, 7, 120, 1)'); // 0.10738130030129947\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'arecolorsequal', children: (0, l.jsx)(r.code, { children: 'areColorsEqual' }) }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'Check if two colors are similar within a specified tolerance.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "const tolerance = 0;\r\nconst isEqual = colorKit.areColorsEqual('#F00', 'red', tolerance); // true\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'contrastratio', children: (0, l.jsx)(r.code, { children: 'contrastRatio' }) }),
+            '\n',
+            (0, l.jsx)(r.p, {
+              children: 'Calculates the contrast ratio between two colors, useful for ensuring accessibility and readability.',
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.contrastRatio('yellow', 'rgba(40, 38, 43, 1)'); // 13.95\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'isdark', children: (0, l.jsx)(r.code, { children: 'isDark' }) }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'Returns a boolean indicating whether the color is considered "dark" or not.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.isDark('hsla(224, 77%, 28%, 1)'); // true\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'islight', children: (0, l.jsx)(r.code, { children: 'isLight' }) }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'Returns a boolean indicating whether the color is considered "light" or not.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.isLight('hsla(224, 77%, 28%, 1)'); // false\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h2, { id: 'color-manipulation', children: 'Color Manipulation' }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'setred', children: (0, l.jsx)(r.code, { children: 'setRed' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Set the ', (0, l.jsx)(r.code, { children: 'red' }), ' value of a color to a specific amount.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.setRed('#a5a2a1', 150).hex(); // #c8a2a1\r\ncolorKit.setRed('#a5a2a1', 200).rgb().string(); // rgb(200, 162, 161)\r\ncolorKit.setRed('#a5a2a1', 200).rgb().object(); // { r: 200, g: 162, b: 161, a: 1 }\r\ncolorKit.setRed('#a5a2a1', 200).rgb().array(); // [200, 162, 161, 1]\r\ncolorKit.setRed('#a5a2a1', 200).hsl().string(); // hsl(2, 26%, 71%)\r\ncolorKit.setRed('#a5a2a1', 200).hsl().object(); // { h: 2, s: 26, l: 71, a: 1 }\r\ncolorKit.setRed('#a5a2a1', 200).hsl().array(); // [2, 26, 71, 1]\r\ncolorKit.setRed('#a5a2a1', 200).hsv().string(); // hsv(2, 20%, 78%)\r\ncolorKit.setRed('#a5a2a1', 200).hsv().object(); // { h: 2, s: 20, l: 78, a: 1 }\r\ncolorKit.setRed('#a5a2a1', 200).hsv().array(); // [2, 20, 78, 1]\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'increasered', children: (0, l.jsx)(r.code, { children: 'increaseRed' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Increase the ',
+                (0, l.jsx)(r.code, { children: 'red' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.increaseRed('#bb661b', 50).hex(); // #ed661b\r\ncolorKit.increaseRed('#bb661b', '50%').hex(); // #ff661b\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'decreasered', children: (0, l.jsx)(r.code, { children: 'decreaseRed' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Decrease the ',
+                (0, l.jsx)(r.code, { children: 'red' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.decreaseRed('#bb661b', 50).hex(); // #89661b\r\ncolorKit.decreaseRed('#bb661b', '50%').hex(); // #5e661b\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'setgreen', children: (0, l.jsx)(r.code, { children: 'setGreen' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Set the ', (0, l.jsx)(r.code, { children: 'green' }), ' value of a color to a specific amount.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.setGreen('#d7e2d0', 50).hex(); // #d732d0\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'increasegreen', children: (0, l.jsx)(r.code, { children: 'increaseGreen' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Increase the ',
+                (0, l.jsx)(r.code, { children: 'green' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.increaseGreen('#d7e2d0', 50).hex(); // #d7ffd0\r\ncolorKit.increaseGreen('#d7e2d0', '10%').hex(); // #d7f9d0\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'decreasegreen', children: (0, l.jsx)(r.code, { children: 'decreaseGreen' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Decrease the ',
+                (0, l.jsx)(r.code, { children: 'green' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.decreaseGreen('#d7e2d0', 50).hex(); // #d7b0d0\r\ncolorKit.decreaseGreen('#d7e2d0', '10%').hex(); // #d7cbd0\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'setblue', children: (0, l.jsx)(r.code, { children: 'setBlue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Set the ', (0, l.jsx)(r.code, { children: 'blue' }), ' value of a color to a specific amount.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.setBlue('#5d8e92', 50).hex(); // #5d3292\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'increaseblue', children: (0, l.jsx)(r.code, { children: 'increaseBlue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Increase the ',
+                (0, l.jsx)(r.code, { children: 'blue' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.increaseBlue('#5d8e92', 50).hex(); // #5d8ec4\r\ncolorKit.increaseBlue('#5d8e92', '50%').hex(); // #5d8edb\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'decreaseblue', children: (0, l.jsx)(r.code, { children: 'decreaseBlue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Decrease the ',
+                (0, l.jsx)(r.code, { children: 'blue' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.decreaseBlue('#5d8e92', 50).hex(); // #5d8e60\r\ncolorKit.decreaseBlue('#5d8e92', '50%').hex(); // #5d8e49\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'sethue', children: (0, l.jsx)(r.code, { children: 'setHue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Set the ', (0, l.jsx)(r.code, { children: 'hue' }), ' value of a color to a specific amount.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.setHue('#2c1a51', 50).hex(); // #51481a\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'increasehue', children: (0, l.jsx)(r.code, { children: 'increaseHue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Increase the ',
+                (0, l.jsx)(r.code, { children: 'Hue' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.increaseHue('#2c1a51', 50).hex(); // #511a48\r\ncolorKit.increaseHue('#2c1a51', '50%').hex(); // #511a1a\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'decreasehue', children: (0, l.jsx)(r.code, { children: 'decreaseHue' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Decrease the ',
+                (0, l.jsx)(r.code, { children: 'Hue' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.decreaseHue('#2c1a51', 50).hex(); // #1a3651\r\ncolorKit.decreaseHue('#2c1a51', '50%').hex(); // #1a5123\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'spin', children: (0, l.jsx)(r.code, { children: 'spin' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Spin the ', (0, l.jsx)(r.code, { children: 'hue' }), ' channel by a certain percentage/amount.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.spin('#2c1a51', 350).hex(); // #231a51\r\ncolorKit.spin('#2c1a51', '350%').hex(); // #40511a\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'setsaturation', children: (0, l.jsx)(r.code, { children: 'setSaturation' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Set the ', (0, l.jsx)(r.code, { children: 'saturation' }), ' value of a color to a specific amount.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.setSaturation('#482e45', 100).hex(); // #750068\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'saturate', children: (0, l.jsx)(r.code, { children: 'saturate' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Increase the ',
+                (0, l.jsx)(r.code, { children: 'saturation' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.saturate('#482e45', 50).hex(); // #65105b\r\ncolorKit.saturate('#482e45', '50%').hex(); // #4e2749\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'desaturate', children: (0, l.jsx)(r.code, { children: 'desaturate' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Decrease the ',
+                (0, l.jsx)(r.code, { children: 'saturation' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.desaturate('#482e45', 50).hex(); // #3b3b3b\r\ncolorKit.desaturate('#482e45', '50%').hex(); // #413440\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'setluminance', children: (0, l.jsx)(r.code, { children: 'setLuminance' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                "Set HSL's ",
+                (0, l.jsx)(r.code, { children: 'luminosity' }),
+                ' channel for a given color to a specific amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.setLuminance('#dadafc', 50).hex(); // #1313ec\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'brighten', children: (0, l.jsx)(r.code, { children: 'brighten' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Increase the ',
+                (0, l.jsx)(r.code, { children: 'brightness' }),
+                ' of the given color by a certain percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.brighten('#dadafc', 50).hex(); // #ffffff\r\ncolorKit.brighten('#dadafc', '5%').hex(); // #f1f1fe\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'darken', children: (0, l.jsx)(r.code, { children: 'darken' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Decrease the ',
+                (0, l.jsx)(r.code, { children: 'brightness' }),
+                ' of the given color by a certain percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.darken('#dadafc', 50).hex(); // #1010c6\r\ncolorKit.darken('#dadafc', '50%').hex(); // #1212d9\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'setbrightness', children: (0, l.jsx)(r.code, { children: 'setBrightness' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                "Set HSV's ",
+                (0, l.jsx)(r.code, { children: 'value' }),
+                ' (brightness) channel for a given color to a specific amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.setBrightness('#dadafc', 50).hex(); // #6f6f80\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'increasebrightness', children: (0, l.jsx)(r.code, { children: 'increaseBrightness' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                "Increase HSV's ",
+                (0, l.jsx)(r.code, { children: 'value' }),
+                ' (brightness) channel value of a color by the given percentage/amount',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.increaseBrightness('#dadafc', 50).hex(); // #dedeff\r\ncolorKit.increaseBrightness('#dadafc', '5%').hex(); // #dedeff\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'decreasebrightness', children: (0, l.jsx)(r.code, { children: 'decreaseBrightness' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                "Decrease HSV's ",
+                (0, l.jsx)(r.code, { children: 'value' }),
+                ' (brightness) channel value of a color by the given percentage/amount',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  "colorKit.decreaseBrightness('#dadafc', 50).hex(); // #6d6d7d\r\ncolorKit.decreaseBrightness('#dadafc', '50%').hex(); // #6f6f80\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'setalpha', children: (0, l.jsx)(r.code, { children: 'setAlpha' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Set the ', (0, l.jsx)(r.code, { children: 'alpha' }), ' value of a color to a specific amount.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'increasealpha', children: (0, l.jsx)(r.code, { children: 'increaseAlpha' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Increase the ',
+                (0, l.jsx)(r.code, { children: 'alpha' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'decreasealpha', children: (0, l.jsx)(r.code, { children: 'decreaseAlpha' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: [
+                'Decrease the ',
+                (0, l.jsx)(r.code, { children: 'alpha' }),
+                ' value of a color by the given percentage/amount.',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(r.h2, { id: 'color-utilities', children: 'Color Utilities' }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'blend', children: (0, l.jsx)(r.code, { children: 'blend' }) }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'Blends two colors by a certain amount.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.blend('red', 'yellow', 50).hex(); // #ff8000\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'invert', children: (0, l.jsx)(r.code, { children: 'invert' }) }),
+            '\n',
+            (0, l.jsx)(r.p, {
+              children: 'Invert (negate) a color, black becomes white, white becomes black, blue becomes orange and so on.',
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, { className: 'language-js', children: "colorKit.invert('#000').hex(); // #ffffff\n" }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'grayscale', children: (0, l.jsx)(r.code, { children: 'grayscale' }) }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'Completely desaturates a color into greyscale.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.grayscale('#172140').hex(); // #212121\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'adjustcontrast', children: (0, l.jsx)(r.code, { children: 'adjustContrast' }) }),
+            '\n',
+            (0, l.jsx)(r.p, {
+              children:
+                'Returns the first color (text color) with the desired contrast ratio against the second color (background color).',
+            }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children: "colorKit.adjustContrast('rgb(50, 50, 50)', '#fff', 4.5).hex(); // #777777\n",
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'randomhslcolor', children: (0, l.jsx)(r.code, { children: 'randomHslColor' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Generate a random color from ', (0, l.jsx)(r.code, { children: 'HSL' }), ' values.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'You can provide a range between two values for each channel.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  'colorKit.randomHslColor({ h: [0, 360], s: [0, 100], l: [0, 100], a: [1, 1] }).hex(); // #b07345\r\ncolorKit.randomHslColor().hex(); // #d0bfd6\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'randomhsvcolor', children: (0, l.jsx)(r.code, { children: 'randomHsvColor' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Generate a random color from ', (0, l.jsx)(r.code, { children: 'HSV' }), ' values.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'You can provide a range between two values for each channel.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  'colorKit.randomHsvColor({ h: [0, 360], s: [0, 100], v: [0, 100], a: [1, 1] }).hex(); // #59078c\r\ncolorKit.randomHsvColor().hex(); // #2b553f\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'randomrgbcolor', children: (0, l.jsx)(r.code, { children: 'randomRgbColor' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Generate a random color from ', (0, l.jsx)(r.code, { children: 'rgb' }), ' values.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'You can provide a range between two values for each channel.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  'colorKit.randomRgbColor({ r: [0, 360], g: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b\r\ncolorKit.randomRgbColor().hex(); // #b07345\n',
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(r.h3, { id: 'randomhwbcolor', children: (0, l.jsx)(r.code, { children: 'randomHwbColor' }) }),
+            '\n',
+            (0, l.jsxs)(r.p, {
+              children: ['Generate a random color from ', (0, l.jsx)(r.code, { children: 'hwb' }), ' values.'],
+            }),
+            '\n',
+            (0, l.jsx)(r.p, { children: 'You can provide a range between two values for each channel.' }),
+            '\n',
+            (0, l.jsx)(r.pre, {
+              children: (0, l.jsx)(r.code, {
+                className: 'language-js',
+                children:
+                  'colorKit.randomHwbColor({ h: [0, 360], w: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b\r\ncolorKit.randomHwbColor().hex(); // #b07345\n',
+              }),
+            }),
+          ],
+        });
+      }
+      function t(e = {}) {
+        const { wrapper: r } = { ...(0, c.a)(), ...e.components };
+        return r ? (0, l.jsx)(r, { ...e, children: (0, l.jsx)(h, { ...e }) }) : h(e);
+      }
+    },
+    1151: (e, r, n) => {
+      n.d(r, { Z: () => d, a: () => s });
+      var l = n(7294);
+      const c = {},
+        o = l.createContext(c);
+      function s(e) {
+        const r = l.useContext(o);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(r) : { ...r, ...e };
+          },
+          [r, e],
+        );
+      }
+      function d(e) {
+        let r;
+        return (
+          (r = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(c)
+              : e.components || c
+            : s(e.components)),
+          l.createElement(o.Provider, { value: r }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/2fc6c5ee.7800c1e6.js b/docs/build/assets/js/2fc6c5ee.7800c1e6.js
deleted file mode 100644
index 00be3c2..0000000
--- a/docs/build/assets/js/2fc6c5ee.7800c1e6.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[54],{3536:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>i,contentTitle:()=>d,default:()=>t,frontMatter:()=>s,metadata:()=>l,toc:()=>a});const l=JSON.parse('{"id":"ColorKit","title":"ColorKit","description":"colorKit is a collection of color tools that are utilized internally within the ColorPicker.","source":"@site/docs/ColorKit.mdx","sourceDirName":".","slug":"/ColorKit","permalink":"/reanimated-color-picker/docs/ColorKit","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6},"sidebar":"tutorialSidebar","previous":{"title":"ExtraThumb","permalink":"/reanimated-color-picker/docs/API/Preview/ExtraThumb"},"next":{"title":"Examples","permalink":"/reanimated-color-picker/docs/Examples"}}');var c=r(4848),o=r(8453);const s={sidebar_position:6},d=void 0,i={},a=[{value:"Supported Colors",id:"supported-colors",level:2},{value:"RBG",id:"rbg",level:4},{value:"HEX",id:"hex",level:4},{value:"HSL",id:"hsl",level:4},{value:"HSV",id:"hsv",level:4},{value:"HWB",id:"hwb",level:4},{value:"Color ints",id:"color-ints",level:4},{value:"Color keywords",id:"color-keywords",level:4},{value:"Color Conversion",id:"color-conversion",level:2},{value:"RGB",id:"rgb",level:3},{value:"Syntax",id:"syntax",level:4},{value:"Example",id:"example",level:4},{value:"HEX",id:"hex-1",level:3},{value:"Syntax",id:"syntax-1",level:4},{value:"Example",id:"example-1",level:4},{value:"HSL",id:"hsl-1",level:3},{value:"Syntax",id:"syntax-2",level:4},{value:"Example",id:"example-2",level:4},{value:"HSV",id:"hsv-1",level:3},{value:"Syntax",id:"syntax-3",level:4},{value:"Example",id:"example-3",level:4},{value:"HWB",id:"hwb-1",level:3},{value:"Syntax",id:"syntax-4",level:4},{value:"Example",id:"example-4",level:4},{value:"Color Information",id:"color-information",level:2},{value:"<code>getFormat</code>",id:"getformat",level:3},{value:"<code>getRed</code>",id:"getred",level:3},{value:"<code>getGreen</code>",id:"getgreen",level:3},{value:"<code>getBlue</code>",id:"getblue",level:3},{value:"<code>getHue</code>",id:"gethue",level:3},{value:"<code>getLuminance</code>",id:"getluminance",level:3},{value:"<code>getBrightness</code>",id:"getbrightness",level:3},{value:"<code>getAlpha</code>",id:"getalpha",level:3},{value:"<code>getLuminanceWCAG</code>",id:"getluminancewcag",level:3},{value:"<code>areColorsEqual</code>",id:"arecolorsequal",level:3},{value:"<code>contrastRatio</code>",id:"contrastratio",level:3},{value:"<code>isDark</code>",id:"isdark",level:3},{value:"<code>isLight</code>",id:"islight",level:3},{value:"Color Manipulation",id:"color-manipulation",level:2},{value:"<code>setRed</code>",id:"setred",level:3},{value:"<code>increaseRed</code>",id:"increasered",level:3},{value:"<code>decreaseRed</code>",id:"decreasered",level:3},{value:"<code>setGreen</code>",id:"setgreen",level:3},{value:"<code>increaseGreen</code>",id:"increasegreen",level:3},{value:"<code>decreaseGreen</code>",id:"decreasegreen",level:3},{value:"<code>setBlue</code>",id:"setblue",level:3},{value:"<code>increaseBlue</code>",id:"increaseblue",level:3},{value:"<code>decreaseBlue</code>",id:"decreaseblue",level:3},{value:"<code>setHue</code>",id:"sethue",level:3},{value:"<code>increaseHue</code>",id:"increasehue",level:3},{value:"<code>decreaseHue</code>",id:"decreasehue",level:3},{value:"<code>spin</code>",id:"spin",level:3},{value:"<code>setSaturation</code>",id:"setsaturation",level:3},{value:"<code>saturate</code>",id:"saturate",level:3},{value:"<code>desaturate</code>",id:"desaturate",level:3},{value:"<code>setLuminance</code>",id:"setluminance",level:3},{value:"<code>brighten</code>",id:"brighten",level:3},{value:"<code>darken</code>",id:"darken",level:3},{value:"<code>setBrightness</code>",id:"setbrightness",level:3},{value:"<code>increaseBrightness</code>",id:"increasebrightness",level:3},{value:"<code>decreaseBrightness</code>",id:"decreasebrightness",level:3},{value:"<code>setAlpha</code>",id:"setalpha",level:3},{value:"<code>increaseAlpha</code>",id:"increasealpha",level:3},{value:"<code>decreaseAlpha</code>",id:"decreasealpha",level:3},{value:"Color Utilities",id:"color-utilities",level:2},{value:"<code>blend</code>",id:"blend",level:3},{value:"<code>invert</code>",id:"invert",level:3},{value:"<code>grayscale</code>",id:"grayscale",level:3},{value:"<code>adjustContrast</code>",id:"adjustcontrast",level:3},{value:"<code>randomHslColor</code>",id:"randomhslcolor",level:3},{value:"<code>randomHsvColor</code>",id:"randomhsvcolor",level:3},{value:"<code>randomRgbColor</code>",id:"randomrgbcolor",level:3},{value:"<code>randomHwbColor</code>",id:"randomhwbcolor",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(n.p,{children:[(0,c.jsx)(n.code,{children:"colorKit"})," is a collection of color tools that are utilized internally within the ",(0,c.jsx)(n.code,{children:"ColorPicker"}),"."]}),"\n",(0,c.jsx)(n.h2,{id:"supported-colors",children:"Supported Colors"}),"\n",(0,c.jsx)(n.h4,{id:"rbg",children:"RBG"}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'rgb(255, 0, 255)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'rgb(255 0 255)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'rgba(255, 0, 255, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'rgb(255, 0, 255, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'rgba(255 0 255 / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'rgb(255 0 255 / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{r: number, g: number, b: number, a: number}"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{r: number, g: number, b: number}"})}),"\n"]}),"\n",(0,c.jsx)(n.h4,{id:"hex",children:"HEX"}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"'#f0f'"})," (#rgb)"]}),"\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"'#ff00ff'"})," (#rrggbb)"]}),"\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"'#f0ff"}),"' (#rgba)"]}),"\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"'#ff00ff00'"})," (#rrggbbaa)"]}),"\n"]}),"\n",(0,c.jsx)(n.h4,{id:"hsl",children:"HSL"}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360, 100%, 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360deg, 100%, 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360 100% 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360deg 100% 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsla(360, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsla(360deg, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360deg, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsla(360 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsla(360deg 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsl(360deg 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{h: number, s: number, l: number}"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{h: number, s: number, l: number, a: number}"})}),"\n"]}),"\n",(0,c.jsx)(n.h4,{id:"hsv",children:"HSV"}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360, 100%, 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360deg, 100%, 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360 100% 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360deg 100% 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsva(360, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsva(360deg, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360deg, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsva(360 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsva(360deg 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hsv(360deg 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{h: number, s: number, v: number}"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{h: number, s: number, v: number, a: number}"})}),"\n"]}),"\n",(0,c.jsx)(n.h4,{id:"hwb",children:"HWB"}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360, 100%, 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360deg, 100%, 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360 100% 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360deg 100% 100%)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwba(360, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwba(360deg, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360deg, 100%, 100%, 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwba(360 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwba(360deg 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"'hwb(360deg 100% 100% / 1.0)'"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{h: number, w: number, b: number}"})}),"\n",(0,c.jsx)(n.li,{children:(0,c.jsx)(n.code,{children:"{h: number, w: number, b: number, a: number}"})}),"\n"]}),"\n",(0,c.jsx)(n.h4,{id:"color-ints",children:"Color ints"}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsxs)(n.li,{children:[(0,c.jsx)(n.code,{children:"0xff00ffff"})," (0xrrggbbaa)"]}),"\n"]}),"\n",(0,c.jsx)(n.h4,{id:"color-keywords",children:"Color keywords"}),"\n",(0,c.jsxs)(n.p,{children:["Named colors implementation follows the ",(0,c.jsx)(n.a,{href:"https://www.w3.org/TR/css-color-3/#svg-color",children:"CSS3/SVG specification"}),"."]}),"\n",(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsxs)(n.li,{children:["aliceblue (",(0,c.jsx)(n.code,{children:"#f0f8ff"}),")"]}),"\n",(0,c.jsxs)(n.li,{children:["antiquewhite (",(0,c.jsx)(n.code,{children:"#faebd7"}),")"]}),"\n",(0,c.jsxs)(n.li,{children:["aqua (",(0,c.jsx)(n.code,{children:"#00ffff"}),")"]}),"\n",(0,c.jsxs)(n.li,{children:["aquamarine (",(0,c.jsx)(n.code,{children:"#7fffd4"}),")"]}),"\n",(0,c.jsxs)(n.li,{children:["azure (",(0,c.jsx)(n.code,{children:"#f0ffff"}),")"]}),"\n",(0,c.jsx)(n.li,{children:"and more ..."}),"\n"]}),"\n",(0,c.jsxs)(n.admonition,{title:"HOW TO RUN ON THE UI THREAD",type:"info",children:[(0,c.jsxs)(n.ul,{children:["\n",(0,c.jsxs)(n.li,{children:["To execute any of the ",(0,c.jsx)(n.code,{children:"colorKit"})," methods, you can use ",(0,c.jsx)(n.code,{children:"runOnUI"}),". For example:"]}),"\n"]}),(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"function workletFunction() {\n  'worklet';\n  const rgb = colorKit.runOnUI().RGB('#f0ff').object();\n}\n"})})]}),"\n",(0,c.jsx)(n.h2,{id:"color-conversion",children:"Color Conversion"}),"\n",(0,c.jsx)(n.h3,{id:"rgb",children:"RGB"}),"\n",(0,c.jsxs)(n.p,{children:["Convert any of the ",(0,c.jsx)(n.a,{href:"#supported-colors",children:"supported color"})," formats into the ",(0,c.jsx)(n.code,{children:"RGB"})," format."]}),"\n",(0,c.jsx)(n.h4,{id:"syntax",children:"Syntax"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-ts",children:"colorKit.RGB(color: SupportedColorFormats).string(forceRGBA = false): string;\ncolorKit.RGB(color: SupportedColorFormats).array(roundValues = true): number[];\ncolorKit.RGB(color: SupportedColorFormats).object(roundValues = true): { r: number; g: number; b: number; a: number };\n"})}),"\n",(0,c.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"import { colorKit } from 'reanimated-color-picker';\n\ncolorKit.RGB('hsl(360, 100%, 100%)').string(); // rgb(255, 255, 255)\ncolorKit.RGB('hsl(360, 100%, 100%)').string(true); // rgba(255, 255, 255, 1) force rbga\ncolorKit.RGB('#f0ff').object(); // { r: 255, g: 0, b: 255, a: 1 }\ncolorKit.RGB({ h: 360, s: 100, v: 50 }).array(); // [128, 0, 0, 1]\n"})}),"\n",(0,c.jsx)(n.h3,{id:"hex-1",children:"HEX"}),"\n",(0,c.jsxs)(n.p,{children:["Convert any of the ",(0,c.jsx)(n.a,{href:"#supported-colors",children:"supported color"})," formats into the ",(0,c.jsx)(n.code,{children:"HEX"})," format."]}),"\n",(0,c.jsx)(n.h4,{id:"syntax-1",children:"Syntax"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-ts",children:"colorKit.HEX(color: SupportedColorFormats): string;\n"})}),"\n",(0,c.jsx)(n.h4,{id:"example-1",children:"Example"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"import { colorKit } from 'reanimated-color-picker';\n\ncolorKit.HEX('red'); //  #ff0000\ncolorKit.HEX('hsv(360, 10%, 100%)'); // #ffe6e6\ncolorKit.HEX('rgba(25, 255, 255, 1)'); // #19ffff\ncolorKit.HEX({ h: 360, s: 100, l: 50 }); // #ff0000\n"})}),"\n",(0,c.jsx)(n.h3,{id:"hsl-1",children:"HSL"}),"\n",(0,c.jsxs)(n.p,{children:["Convert any of the ",(0,c.jsx)(n.a,{href:"#supported-colors",children:"supported color"})," formats into the ",(0,c.jsx)(n.code,{children:"HSL"})," format."]}),"\n",(0,c.jsx)(n.h4,{id:"syntax-2",children:"Syntax"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-ts",children:"colorKit.HSL(color: SupportedColorFormats).string(forceHSLA = false): string;\ncolorKit.HSL(color: SupportedColorFormats).array(roundValues = true): number[];\ncolorKit.HSL(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; l: number; a: number };\n"})}),"\n",(0,c.jsx)(n.h4,{id:"example-2",children:"Example"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"import { colorKit } from 'reanimated-color-picker';\n\ncolorKit.HSL('orange').string(); // hsl(39, 100%, 50%)\ncolorKit.HSL('#503e7a').string(true); // hsla(258, 33%, 36%, 1)\ncolorKit.HSL('rgb(114, 99, 29)').object(); // { h: 49, s: 59, l: 28, a: 1 }\ncolorKit.HSL({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 28, 22, 1]\n"})}),"\n",(0,c.jsx)(n.h3,{id:"hsv-1",children:"HSV"}),"\n",(0,c.jsxs)(n.p,{children:["Convert any of the ",(0,c.jsx)(n.a,{href:"#supported-colors",children:"supported color"})," formats into the ",(0,c.jsx)(n.code,{children:"HSV"})," format."]}),"\n",(0,c.jsx)(n.h4,{id:"syntax-3",children:"Syntax"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-ts",children:"colorKit.HSV(color: SupportedColorFormats).string(forceHSVA = false): string;\ncolorKit.HSV(color: SupportedColorFormats).array(roundValues = true): number[];\ncolorKit.HSV(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; v: number; a: number };\n"})}),"\n",(0,c.jsx)(n.h4,{id:"example-3",children:"Example"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"import { colorKit } from 'reanimated-color-picker';\n\ncolorKit.HSV('orange').string(true); // hsva(258, 49%, 48%, 1)\ncolorKit.HSV('#503e7a').string(); // hsv(258, 49%, 48%)\ncolorKit.HSV('rgb(114, 99, 29)').object(); // { h: 49, s: 75, l: 45, a: 1 }\ncolorKit.HSV({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 44, 28, 1]\n"})}),"\n",(0,c.jsx)(n.h3,{id:"hwb-1",children:"HWB"}),"\n",(0,c.jsxs)(n.p,{children:["Convert any of the ",(0,c.jsx)(n.a,{href:"#supported-colors",children:"supported color"})," formats into the ",(0,c.jsx)(n.code,{children:"HWB"})," format."]}),"\n",(0,c.jsx)(n.h4,{id:"syntax-4",children:"Syntax"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-ts",children:"colorKit.HWB(color: SupportedColorFormats).string(forceHWBA = false): string;\ncolorKit.HWB(color: SupportedColorFormats).array(roundValues = true): number[];\ncolorKit.HWB(color: SupportedColorFormats).object(roundValues = true): { h: number; w: number; b: number; a: number };\n"})}),"\n",(0,c.jsx)(n.h4,{id:"example-4",children:"Example"}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"import { colorKit } from 'reanimated-color-picker';\n\ncolorKit.HWB('orange').string(); // hwb(39, 0%, 0%)\ncolorKit.HWB('#503e7a').string(true); // hwba(258, 24%, 52%, 1)\ncolorKit.HWB('rgb(114, 99, 29)').object(); // { h: 49, w: 12, l: 55, a: 1 }\ncolorKit.HWB({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 16, 72, 1]\n"})}),"\n",(0,c.jsx)(n.h2,{id:"color-information",children:"Color Information"}),"\n",(0,c.jsx)(n.h3,{id:"getformat",children:(0,c.jsx)(n.code,{children:"getFormat"})}),"\n",(0,c.jsxs)(n.p,{children:["Identify the color format of a given ",(0,c.jsx)(n.code,{children:"string"})," or ",(0,c.jsx)(n.code,{children:"object"}),", and return ",(0,c.jsx)(n.code,{children:"null"})," for invalid colors."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getFormat('orange'); // named\n\ncolorKit.getFormat('rgb(211, 168, 151)'); // rgb\ncolorKit.getFormat('rgba(211, 168, 151, 1)'); // rgba\ncolorKit.getFormat({ r: 211, g: 168, b: 151 }); // rgb\ncolorKit.getFormat({ r: 211, g: 168, b: 151, a: 1 }); // rgba\n\ncolorKit.getFormat('hsl(224, 77%, 28%)'); // hsl\ncolorKit.getFormat('hsla(224, 77%, 28%, 1)'); // hsla\ncolorKit.getFormat({ h: 224, s: 77, l: 28 }); // hsl\ncolorKit.getFormat({ h: 224, s: 77, l: 28, a: 1 }); // hsla\n\ncolorKit.getFormat('hsva(289, 99%, 40%, 1)'); // hsv\ncolorKit.getFormat('hsv(289, 99%, 40%)'); // hsva\ncolorKit.getFormat({ h: 289, s: 99, v: 40 }); // hsv\ncolorKit.getFormat({ h: 289, s: 99, v: 40, a: 1 }); // hsva\n\ncolorKit.getFormat('hwba(289, 99%, 40%, 1)'); // hwb\ncolorKit.getFormat('hwb(289, 99%, 40%)'); // hwba\ncolorKit.getFormat({ h: 289, w: 99, b: 40 }); // hwb\ncolorKit.getFormat({ h: 289, w: 99, b: 40, a: 1 }); // hwba\n\ncolorKit.getFormat('#fff'); // hex3\ncolorKit.getFormat('#ffff'); // hex4\ncolorKit.getFormat('#ffffffff'); // hex8\n\ncolorKit.getFormat('rgb(211, 168, 151, 1)'); // null (should be 'rgba(211, 168, 151, 1)')\n"})}),"\n",(0,c.jsx)(n.h3,{id:"getred",children:(0,c.jsx)(n.code,{children:"getRed"})}),"\n",(0,c.jsxs)(n.p,{children:["Get the ",(0,c.jsx)(n.code,{children:"red"})," channel value of a given color."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getRed('red'); // 255\n"})}),"\n",(0,c.jsx)(n.h3,{id:"getgreen",children:(0,c.jsx)(n.code,{children:"getGreen"})}),"\n",(0,c.jsxs)(n.p,{children:["Get the ",(0,c.jsx)(n.code,{children:"green"})," channel value of a given color."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getGreen('rgb(0, 200, 0)'); // 200\n"})}),"\n",(0,c.jsx)(n.h3,{id:"getblue",children:(0,c.jsx)(n.code,{children:"getBlue"})}),"\n",(0,c.jsxs)(n.p,{children:["Get the ",(0,c.jsx)(n.code,{children:"green"})," channel value of a given color."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getBlue('hsl(200, 60%, 50%)'); // 204\n"})}),"\n",(0,c.jsx)(n.h3,{id:"gethue",children:(0,c.jsx)(n.code,{children:"getHue"})}),"\n",(0,c.jsxs)(n.p,{children:["Get the ",(0,c.jsx)(n.code,{children:"hue"})," channel value of a given color."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getHue('#87c270'); // 103\n"})}),"\n",(0,c.jsx)(n.h3,{id:"getluminance",children:(0,c.jsx)(n.code,{children:"getLuminance"})}),"\n",(0,c.jsxs)(n.p,{children:["Get color's HSL ",(0,c.jsx)(n.code,{children:"luminosity"})," channel value."]}),"\n",(0,c.jsxs)(n.p,{children:["If you want the overall ",(0,c.jsx)(n.code,{children:"luminosity"})," of a color use ",(0,c.jsx)(n.a,{href:"#getluminancewcag",children:(0,c.jsx)(n.code,{children:"getLuminanceWCAG"})})," method."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getLuminance({ r: 67, g: 59, b: 79, a: 1 }); // 27\n"})}),"\n",(0,c.jsx)(n.h3,{id:"getbrightness",children:(0,c.jsx)(n.code,{children:"getBrightness"})}),"\n",(0,c.jsxs)(n.p,{children:["Get the HSV's ",(0,c.jsx)(n.code,{children:"value"})," (brightness) channel value of a given color."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getBrightness({ h: 127, s: 36, l: 8, a: 1 }); // 11\n"})}),"\n",(0,c.jsx)(n.h3,{id:"getalpha",children:(0,c.jsx)(n.code,{children:"getAlpha"})}),"\n",(0,c.jsxs)(n.p,{children:["Get the ",(0,c.jsx)(n.code,{children:"alpha"})," channel value of a given color."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getAlpha('#d2c765c7'); // 0.78\n"})}),"\n",(0,c.jsx)(n.h3,{id:"getluminancewcag",children:(0,c.jsx)(n.code,{children:"getLuminanceWCAG"})}),"\n",(0,c.jsxs)(n.p,{children:["Returns the perceived ",(0,c.jsx)(n.code,{children:"luminance"})," of the given color, from ",(0,c.jsx)(n.code,{children:"0-1"})," as defined by ",(0,c.jsx)(n.a,{href:"https://www.w3.org/TR/WCAG20/",children:"Web Content Accessibility Guidelines (Version 2.0)"}),"."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.getLuminanceWCAG('rgba(176, 7, 120, 1)'); // 0.10738130030129947\n"})}),"\n",(0,c.jsx)(n.h3,{id:"arecolorsequal",children:(0,c.jsx)(n.code,{children:"areColorsEqual"})}),"\n",(0,c.jsx)(n.p,{children:"Check if two colors are similar within a specified tolerance."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"const tolerance = 0;\nconst isEqual = colorKit.areColorsEqual('#F00', 'red', tolerance); // true\n"})}),"\n",(0,c.jsx)(n.h3,{id:"contrastratio",children:(0,c.jsx)(n.code,{children:"contrastRatio"})}),"\n",(0,c.jsx)(n.p,{children:"Calculates the contrast ratio between two colors, useful for ensuring accessibility and readability."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.contrastRatio('yellow', 'rgba(40, 38, 43, 1)'); // 13.95\n"})}),"\n",(0,c.jsx)(n.h3,{id:"isdark",children:(0,c.jsx)(n.code,{children:"isDark"})}),"\n",(0,c.jsx)(n.p,{children:'Returns a boolean indicating whether the color is considered "dark" or not.'}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.isDark('hsla(224, 77%, 28%, 1)'); // true\n"})}),"\n",(0,c.jsx)(n.h3,{id:"islight",children:(0,c.jsx)(n.code,{children:"isLight"})}),"\n",(0,c.jsx)(n.p,{children:'Returns a boolean indicating whether the color is considered "light" or not.'}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.isLight('hsla(224, 77%, 28%, 1)'); // false\n"})}),"\n",(0,c.jsx)(n.h2,{id:"color-manipulation",children:"Color Manipulation"}),"\n",(0,c.jsx)(n.h3,{id:"setred",children:(0,c.jsx)(n.code,{children:"setRed"})}),"\n",(0,c.jsxs)(n.p,{children:["Set the ",(0,c.jsx)(n.code,{children:"red"})," value of a color to a specific amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.setRed('#a5a2a1', 150).hex(); // #c8a2a1\ncolorKit.setRed('#a5a2a1', 200).rgb().string(); // rgb(200, 162, 161)\ncolorKit.setRed('#a5a2a1', 200).rgb().object(); // { r: 200, g: 162, b: 161, a: 1 }\ncolorKit.setRed('#a5a2a1', 200).rgb().array(); // [200, 162, 161, 1]\ncolorKit.setRed('#a5a2a1', 200).hsl().string(); // hsl(2, 26%, 71%)\ncolorKit.setRed('#a5a2a1', 200).hsl().object(); // { h: 2, s: 26, l: 71, a: 1 }\ncolorKit.setRed('#a5a2a1', 200).hsl().array(); // [2, 26, 71, 1]\ncolorKit.setRed('#a5a2a1', 200).hsv().string(); // hsv(2, 20%, 78%)\ncolorKit.setRed('#a5a2a1', 200).hsv().object(); // { h: 2, s: 20, l: 78, a: 1 }\ncolorKit.setRed('#a5a2a1', 200).hsv().array(); // [2, 20, 78, 1]\n"})}),"\n",(0,c.jsx)(n.h3,{id:"increasered",children:(0,c.jsx)(n.code,{children:"increaseRed"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase the ",(0,c.jsx)(n.code,{children:"red"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.increaseRed('#bb661b', 50).hex(); // #ed661b\ncolorKit.increaseRed('#bb661b', '50%').hex(); // #ff661b\n"})}),"\n",(0,c.jsx)(n.h3,{id:"decreasered",children:(0,c.jsx)(n.code,{children:"decreaseRed"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease the ",(0,c.jsx)(n.code,{children:"red"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.decreaseRed('#bb661b', 50).hex(); // #89661b\ncolorKit.decreaseRed('#bb661b', '50%').hex(); // #5e661b\n"})}),"\n",(0,c.jsx)(n.h3,{id:"setgreen",children:(0,c.jsx)(n.code,{children:"setGreen"})}),"\n",(0,c.jsxs)(n.p,{children:["Set the ",(0,c.jsx)(n.code,{children:"green"})," value of a color to a specific amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.setGreen('#d7e2d0', 50).hex(); // #d732d0\n"})}),"\n",(0,c.jsx)(n.h3,{id:"increasegreen",children:(0,c.jsx)(n.code,{children:"increaseGreen"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase the ",(0,c.jsx)(n.code,{children:"green"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.increaseGreen('#d7e2d0', 50).hex(); // #d7ffd0\ncolorKit.increaseGreen('#d7e2d0', '10%').hex(); // #d7f9d0\n"})}),"\n",(0,c.jsx)(n.h3,{id:"decreasegreen",children:(0,c.jsx)(n.code,{children:"decreaseGreen"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease the ",(0,c.jsx)(n.code,{children:"green"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.decreaseGreen('#d7e2d0', 50).hex(); // #d7b0d0\ncolorKit.decreaseGreen('#d7e2d0', '10%').hex(); // #d7cbd0\n"})}),"\n",(0,c.jsx)(n.h3,{id:"setblue",children:(0,c.jsx)(n.code,{children:"setBlue"})}),"\n",(0,c.jsxs)(n.p,{children:["Set the ",(0,c.jsx)(n.code,{children:"blue"})," value of a color to a specific amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.setBlue('#5d8e92', 50).hex(); // #5d3292\n"})}),"\n",(0,c.jsx)(n.h3,{id:"increaseblue",children:(0,c.jsx)(n.code,{children:"increaseBlue"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase the ",(0,c.jsx)(n.code,{children:"blue"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.increaseBlue('#5d8e92', 50).hex(); // #5d8ec4\ncolorKit.increaseBlue('#5d8e92', '50%').hex(); // #5d8edb\n"})}),"\n",(0,c.jsx)(n.h3,{id:"decreaseblue",children:(0,c.jsx)(n.code,{children:"decreaseBlue"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease the ",(0,c.jsx)(n.code,{children:"blue"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.decreaseBlue('#5d8e92', 50).hex(); // #5d8e60\ncolorKit.decreaseBlue('#5d8e92', '50%').hex(); // #5d8e49\n"})}),"\n",(0,c.jsx)(n.h3,{id:"sethue",children:(0,c.jsx)(n.code,{children:"setHue"})}),"\n",(0,c.jsxs)(n.p,{children:["Set the ",(0,c.jsx)(n.code,{children:"hue"})," value of a color to a specific amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.setHue('#2c1a51', 50).hex(); // #51481a\n"})}),"\n",(0,c.jsx)(n.h3,{id:"increasehue",children:(0,c.jsx)(n.code,{children:"increaseHue"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase the ",(0,c.jsx)(n.code,{children:"Hue"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.increaseHue('#2c1a51', 50).hex(); // #511a48\ncolorKit.increaseHue('#2c1a51', '50%').hex(); // #511a1a\n"})}),"\n",(0,c.jsx)(n.h3,{id:"decreasehue",children:(0,c.jsx)(n.code,{children:"decreaseHue"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease the ",(0,c.jsx)(n.code,{children:"Hue"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.decreaseHue('#2c1a51', 50).hex(); // #1a3651\ncolorKit.decreaseHue('#2c1a51', '50%').hex(); // #1a5123\n"})}),"\n",(0,c.jsx)(n.h3,{id:"spin",children:(0,c.jsx)(n.code,{children:"spin"})}),"\n",(0,c.jsxs)(n.p,{children:["Spin the ",(0,c.jsx)(n.code,{children:"hue"})," channel by a certain percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.spin('#2c1a51', 350).hex(); // #231a51\ncolorKit.spin('#2c1a51', '350%').hex(); // #40511a\n"})}),"\n",(0,c.jsx)(n.h3,{id:"setsaturation",children:(0,c.jsx)(n.code,{children:"setSaturation"})}),"\n",(0,c.jsxs)(n.p,{children:["Set the ",(0,c.jsx)(n.code,{children:"saturation"})," value of a color to a specific amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.setSaturation('#482e45', 100).hex(); // #750068\n"})}),"\n",(0,c.jsx)(n.h3,{id:"saturate",children:(0,c.jsx)(n.code,{children:"saturate"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase the ",(0,c.jsx)(n.code,{children:"saturation"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.saturate('#482e45', 50).hex(); // #65105b\ncolorKit.saturate('#482e45', '50%').hex(); // #4e2749\n"})}),"\n",(0,c.jsx)(n.h3,{id:"desaturate",children:(0,c.jsx)(n.code,{children:"desaturate"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease the ",(0,c.jsx)(n.code,{children:"saturation"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.desaturate('#482e45', 50).hex(); // #3b3b3b\ncolorKit.desaturate('#482e45', '50%').hex(); // #413440\n"})}),"\n",(0,c.jsx)(n.h3,{id:"setluminance",children:(0,c.jsx)(n.code,{children:"setLuminance"})}),"\n",(0,c.jsxs)(n.p,{children:["Set HSL's ",(0,c.jsx)(n.code,{children:"luminosity"})," channel for a given color to a specific amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.setLuminance('#dadafc', 50).hex(); // #1313ec\n"})}),"\n",(0,c.jsx)(n.h3,{id:"brighten",children:(0,c.jsx)(n.code,{children:"brighten"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase the ",(0,c.jsx)(n.code,{children:"brightness"})," of the given color by a certain percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.brighten('#dadafc', 50).hex(); // #ffffff\ncolorKit.brighten('#dadafc', '5%').hex(); // #f1f1fe\n"})}),"\n",(0,c.jsx)(n.h3,{id:"darken",children:(0,c.jsx)(n.code,{children:"darken"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease the ",(0,c.jsx)(n.code,{children:"brightness"})," of the given color by a certain percentage/amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.darken('#dadafc', 50).hex(); // #1010c6\ncolorKit.darken('#dadafc', '50%').hex(); // #1212d9\n"})}),"\n",(0,c.jsx)(n.h3,{id:"setbrightness",children:(0,c.jsx)(n.code,{children:"setBrightness"})}),"\n",(0,c.jsxs)(n.p,{children:["Set HSV's ",(0,c.jsx)(n.code,{children:"value"})," (brightness) channel for a given color to a specific amount."]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.setBrightness('#dadafc', 50).hex(); // #6f6f80\n"})}),"\n",(0,c.jsx)(n.h3,{id:"increasebrightness",children:(0,c.jsx)(n.code,{children:"increaseBrightness"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase HSV's ",(0,c.jsx)(n.code,{children:"value"})," (brightness) channel value of a color by the given percentage/amount"]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.increaseBrightness('#dadafc', 50).hex(); // #dedeff\ncolorKit.increaseBrightness('#dadafc', '5%').hex(); // #dedeff\n"})}),"\n",(0,c.jsx)(n.h3,{id:"decreasebrightness",children:(0,c.jsx)(n.code,{children:"decreaseBrightness"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease HSV's ",(0,c.jsx)(n.code,{children:"value"})," (brightness) channel value of a color by the given percentage/amount"]}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.decreaseBrightness('#dadafc', 50).hex(); // #6d6d7d\ncolorKit.decreaseBrightness('#dadafc', '50%').hex(); // #6f6f80\n"})}),"\n",(0,c.jsx)(n.h3,{id:"setalpha",children:(0,c.jsx)(n.code,{children:"setAlpha"})}),"\n",(0,c.jsxs)(n.p,{children:["Set the ",(0,c.jsx)(n.code,{children:"alpha"})," value of a color to a specific amount."]}),"\n",(0,c.jsx)(n.h3,{id:"increasealpha",children:(0,c.jsx)(n.code,{children:"increaseAlpha"})}),"\n",(0,c.jsxs)(n.p,{children:["Increase the ",(0,c.jsx)(n.code,{children:"alpha"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.h3,{id:"decreasealpha",children:(0,c.jsx)(n.code,{children:"decreaseAlpha"})}),"\n",(0,c.jsxs)(n.p,{children:["Decrease the ",(0,c.jsx)(n.code,{children:"alpha"})," value of a color by the given percentage/amount."]}),"\n",(0,c.jsx)(n.h2,{id:"color-utilities",children:"Color Utilities"}),"\n",(0,c.jsx)(n.h3,{id:"blend",children:(0,c.jsx)(n.code,{children:"blend"})}),"\n",(0,c.jsx)(n.p,{children:"Blends two colors by a certain amount."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.blend('red', 'yellow', 50).hex(); // #ff8000\n"})}),"\n",(0,c.jsx)(n.h3,{id:"invert",children:(0,c.jsx)(n.code,{children:"invert"})}),"\n",(0,c.jsx)(n.p,{children:"Invert (negate) a color, black becomes white, white becomes black, blue becomes orange and so on."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.invert('#000').hex(); // #ffffff\n"})}),"\n",(0,c.jsx)(n.h3,{id:"grayscale",children:(0,c.jsx)(n.code,{children:"grayscale"})}),"\n",(0,c.jsx)(n.p,{children:"Completely desaturates a color into greyscale."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.grayscale('#172140').hex(); // #212121\n"})}),"\n",(0,c.jsx)(n.h3,{id:"adjustcontrast",children:(0,c.jsx)(n.code,{children:"adjustContrast"})}),"\n",(0,c.jsx)(n.p,{children:"Returns the first color (text color) with the desired contrast ratio against the second color (background color)."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.adjustContrast('rgb(50, 50, 50)', '#fff', 4.5).hex(); // #777777\n"})}),"\n",(0,c.jsx)(n.h3,{id:"randomhslcolor",children:(0,c.jsx)(n.code,{children:"randomHslColor"})}),"\n",(0,c.jsxs)(n.p,{children:["Generate a random color from ",(0,c.jsx)(n.code,{children:"HSL"})," values."]}),"\n",(0,c.jsx)(n.p,{children:"You can provide a range between two values for each channel."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.randomHslColor({ h: [0, 360], s: [0, 100], l: [0, 100], a: [1, 1] }).hex(); // #b07345\ncolorKit.randomHslColor().hex(); // #d0bfd6\n"})}),"\n",(0,c.jsx)(n.h3,{id:"randomhsvcolor",children:(0,c.jsx)(n.code,{children:"randomHsvColor"})}),"\n",(0,c.jsxs)(n.p,{children:["Generate a random color from ",(0,c.jsx)(n.code,{children:"HSV"})," values."]}),"\n",(0,c.jsx)(n.p,{children:"You can provide a range between two values for each channel."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.randomHsvColor({ h: [0, 360], s: [0, 100], v: [0, 100], a: [1, 1] }).hex(); // #59078c\ncolorKit.randomHsvColor().hex(); // #2b553f\n"})}),"\n",(0,c.jsx)(n.h3,{id:"randomrgbcolor",children:(0,c.jsx)(n.code,{children:"randomRgbColor"})}),"\n",(0,c.jsxs)(n.p,{children:["Generate a random color from ",(0,c.jsx)(n.code,{children:"rgb"})," values."]}),"\n",(0,c.jsx)(n.p,{children:"You can provide a range between two values for each channel."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.randomRgbColor({ r: [0, 360], g: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b\ncolorKit.randomRgbColor().hex(); // #b07345\n"})}),"\n",(0,c.jsx)(n.h3,{id:"randomhwbcolor",children:(0,c.jsx)(n.code,{children:"randomHwbColor"})}),"\n",(0,c.jsxs)(n.p,{children:["Generate a random color from ",(0,c.jsx)(n.code,{children:"hwb"})," values."]}),"\n",(0,c.jsx)(n.p,{children:"You can provide a range between two values for each channel."}),"\n",(0,c.jsx)(n.pre,{children:(0,c.jsx)(n.code,{className:"language-js",children:"colorKit.randomHwbColor({ h: [0, 360], w: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b\ncolorKit.randomHwbColor().hex(); // #b07345\n"})})]})}function t(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,c.jsx)(n,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}},8453:(e,n,r)=>{r.d(n,{R:()=>s,x:()=>d});var l=r(6540);const c={},o=l.createContext(c);function s(e){const n=l.useContext(o);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:s(e.components),l.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/349.4d780a60.js b/docs/build/assets/js/349.4d780a60.js
new file mode 100644
index 0000000..90b3f60
--- /dev/null
+++ b/docs/build/assets/js/349.4d780a60.js
@@ -0,0 +1,1580 @@
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [349],
+  {
+    9047: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => w });
+      var s = n(7294),
+        a = n(5893);
+      function o(e) {
+        const { mdxAdmonitionTitle: t, rest: n } = (function (e) {
+            const t = s.Children.toArray(e),
+              n = t.find(e => s.isValidElement(e) && 'mdxAdmonitionTitle' === e.type),
+              o = t.filter(e => e !== n),
+              i = n?.props.children;
+            return { mdxAdmonitionTitle: i, rest: o.length > 0 ? (0, a.jsx)(a.Fragment, { children: o }) : null };
+          })(e.children),
+          o = e.title ?? t;
+        return { ...e, ...(o && { title: o }), children: n };
+      }
+      var i = n(512),
+        l = n(5999),
+        c = n(5281);
+      const r = {
+        admonition: 'admonition_xJq3',
+        admonitionHeading: 'admonitionHeading_Gvgb',
+        admonitionIcon: 'admonitionIcon_Rf37',
+        admonitionContent: 'admonitionContent_BuS1',
+      };
+      function d(e) {
+        let { type: t, className: n, children: s } = e;
+        return (0, a.jsx)('div', {
+          className: (0, i.Z)(c.k.common.admonition, c.k.common.admonitionType(t), r.admonition, n),
+          children: s,
+        });
+      }
+      function u(e) {
+        let { icon: t, title: n } = e;
+        return (0, a.jsxs)('div', {
+          className: r.admonitionHeading,
+          children: [(0, a.jsx)('span', { className: r.admonitionIcon, children: t }), n],
+        });
+      }
+      function m(e) {
+        let { children: t } = e;
+        return t ? (0, a.jsx)('div', { className: r.admonitionContent, children: t }) : null;
+      }
+      function h(e) {
+        const { type: t, icon: n, title: s, children: o, className: i } = e;
+        return (0, a.jsxs)(d, {
+          type: t,
+          className: i,
+          children: [(0, a.jsx)(u, { title: s, icon: n }), (0, a.jsx)(m, { children: o })],
+        });
+      }
+      function p(e) {
+        return (0, a.jsx)('svg', {
+          viewBox: '0 0 14 16',
+          ...e,
+          children: (0, a.jsx)('path', {
+            fillRule: 'evenodd',
+            d: 'M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z',
+          }),
+        });
+      }
+      const f = {
+        icon: (0, a.jsx)(p, {}),
+        title: (0, a.jsx)(l.Z, {
+          id: 'theme.admonition.note',
+          description: 'The default label used for the Note admonition (:::note)',
+          children: 'note',
+        }),
+      };
+      function x(e) {
+        return (0, a.jsx)(h, { ...f, ...e, className: (0, i.Z)('alert alert--secondary', e.className), children: e.children });
+      }
+      function b(e) {
+        return (0, a.jsx)('svg', {
+          viewBox: '0 0 12 16',
+          ...e,
+          children: (0, a.jsx)('path', {
+            fillRule: 'evenodd',
+            d: 'M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z',
+          }),
+        });
+      }
+      const g = {
+        icon: (0, a.jsx)(b, {}),
+        title: (0, a.jsx)(l.Z, {
+          id: 'theme.admonition.tip',
+          description: 'The default label used for the Tip admonition (:::tip)',
+          children: 'tip',
+        }),
+      };
+      function v(e) {
+        return (0, a.jsx)(h, { ...g, ...e, className: (0, i.Z)('alert alert--success', e.className), children: e.children });
+      }
+      function j(e) {
+        return (0, a.jsx)('svg', {
+          viewBox: '0 0 14 16',
+          ...e,
+          children: (0, a.jsx)('path', {
+            fillRule: 'evenodd',
+            d: 'M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z',
+          }),
+        });
+      }
+      const N = {
+        icon: (0, a.jsx)(j, {}),
+        title: (0, a.jsx)(l.Z, {
+          id: 'theme.admonition.info',
+          description: 'The default label used for the Info admonition (:::info)',
+          children: 'info',
+        }),
+      };
+      function C(e) {
+        return (0, a.jsx)(h, { ...N, ...e, className: (0, i.Z)('alert alert--info', e.className), children: e.children });
+      }
+      function k(e) {
+        return (0, a.jsx)('svg', {
+          viewBox: '0 0 16 16',
+          ...e,
+          children: (0, a.jsx)('path', {
+            fillRule: 'evenodd',
+            d: 'M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z',
+          }),
+        });
+      }
+      const L = {
+        icon: (0, a.jsx)(k, {}),
+        title: (0, a.jsx)(l.Z, {
+          id: 'theme.admonition.warning',
+          description: 'The default label used for the Warning admonition (:::warning)',
+          children: 'warning',
+        }),
+      };
+      function y(e) {
+        return (0, a.jsx)('svg', {
+          viewBox: '0 0 12 16',
+          ...e,
+          children: (0, a.jsx)('path', {
+            fillRule: 'evenodd',
+            d: 'M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z',
+          }),
+        });
+      }
+      const _ = {
+        icon: (0, a.jsx)(y, {}),
+        title: (0, a.jsx)(l.Z, {
+          id: 'theme.admonition.danger',
+          description: 'The default label used for the Danger admonition (:::danger)',
+          children: 'danger',
+        }),
+      };
+      const B = {
+        icon: (0, a.jsx)(k, {}),
+        title: (0, a.jsx)(l.Z, {
+          id: 'theme.admonition.caution',
+          description: 'The default label used for the Caution admonition (:::caution)',
+          children: 'caution',
+        }),
+      };
+      const Z = {
+        ...{
+          note: x,
+          tip: v,
+          info: C,
+          warning: function (e) {
+            return (0, a.jsx)(h, { ...L, ...e, className: (0, i.Z)('alert alert--warning', e.className), children: e.children });
+          },
+          danger: function (e) {
+            return (0, a.jsx)(h, { ..._, ...e, className: (0, i.Z)('alert alert--danger', e.className), children: e.children });
+          },
+        },
+        ...{
+          secondary: e => (0, a.jsx)(x, { title: 'secondary', ...e }),
+          important: e => (0, a.jsx)(C, { title: 'important', ...e }),
+          success: e => (0, a.jsx)(v, { title: 'success', ...e }),
+          caution: function (e) {
+            return (0, a.jsx)(h, { ...B, ...e, className: (0, i.Z)('alert alert--warning', e.className), children: e.children });
+          },
+        },
+      };
+      function w(e) {
+        const t = o(e),
+          n =
+            ((s = t.type),
+            Z[s] || (console.warn(`No admonition component found for admonition type "${s}". Using Info as fallback.`), Z.info));
+        var s;
+        return (0, a.jsx)(n, { ...t });
+      }
+    },
+    1310: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => b });
+      n(7294);
+      var s = n(512),
+        a = n(5281),
+        o = n(3438),
+        i = n(8596),
+        l = n(3692),
+        c = n(5999),
+        r = n(4996),
+        d = n(5893);
+      function u(e) {
+        return (0, d.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          ...e,
+          children: (0, d.jsx)('path', {
+            d: 'M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z',
+            fill: 'currentColor',
+          }),
+        });
+      }
+      const m = { breadcrumbHomeIcon: 'breadcrumbHomeIcon_YNFT' };
+      function h() {
+        const e = (0, r.Z)('/');
+        return (0, d.jsx)('li', {
+          className: 'breadcrumbs__item',
+          children: (0, d.jsx)(l.Z, {
+            'aria-label': (0, c.I)({
+              id: 'theme.docs.breadcrumbs.home',
+              message: 'Home page',
+              description: 'The ARIA label for the home page in the breadcrumbs',
+            }),
+            className: 'breadcrumbs__link',
+            href: e,
+            children: (0, d.jsx)(u, { className: m.breadcrumbHomeIcon }),
+          }),
+        });
+      }
+      const p = { breadcrumbsContainer: 'breadcrumbsContainer_Z_bl' };
+      function f(e) {
+        let { children: t, href: n, isLast: s } = e;
+        const a = 'breadcrumbs__link';
+        return s
+          ? (0, d.jsx)('span', { className: a, itemProp: 'name', children: t })
+          : n
+            ? (0, d.jsx)(l.Z, {
+                className: a,
+                href: n,
+                itemProp: 'item',
+                children: (0, d.jsx)('span', { itemProp: 'name', children: t }),
+              })
+            : (0, d.jsx)('span', { className: a, children: t });
+      }
+      function x(e) {
+        let { children: t, active: n, index: a, addMicrodata: o } = e;
+        return (0, d.jsxs)('li', {
+          ...(o && { itemScope: !0, itemProp: 'itemListElement', itemType: 'https://schema.org/ListItem' }),
+          className: (0, s.Z)('breadcrumbs__item', { 'breadcrumbs__item--active': n }),
+          children: [t, (0, d.jsx)('meta', { itemProp: 'position', content: String(a + 1) })],
+        });
+      }
+      function b() {
+        const e = (0, o.s1)(),
+          t = (0, i.Ns)();
+        return e
+          ? (0, d.jsx)('nav', {
+              className: (0, s.Z)(a.k.docs.docBreadcrumbs, p.breadcrumbsContainer),
+              'aria-label': (0, c.I)({
+                id: 'theme.docs.breadcrumbs.navAriaLabel',
+                message: 'Breadcrumbs',
+                description: 'The ARIA label for the breadcrumbs',
+              }),
+              children: (0, d.jsxs)('ul', {
+                className: 'breadcrumbs',
+                itemScope: !0,
+                itemType: 'https://schema.org/BreadcrumbList',
+                children: [
+                  t && (0, d.jsx)(h, {}),
+                  e.map((t, n) => {
+                    const s = n === e.length - 1,
+                      a = 'category' === t.type && t.linkUnlisted ? void 0 : t.href;
+                    return (0, d.jsx)(
+                      x,
+                      {
+                        active: s,
+                        index: n,
+                        addMicrodata: !!a,
+                        children: (0, d.jsx)(f, { href: a, isLast: s, children: t.label }),
+                      },
+                      n,
+                    );
+                  }),
+                ],
+              }),
+            })
+          : null;
+      }
+    },
+    7629: (e, t, n) => {
+      'use strict';
+      n.r(t), n.d(t, { default: () => be });
+      var s = n(7294),
+        a = n(1944),
+        o = n(902),
+        i = n(5893);
+      const l = s.createContext(null);
+      function c(e) {
+        let { children: t, content: n } = e;
+        const a = (function (e) {
+          return (0, s.useMemo)(
+            () => ({
+              metadata: e.metadata,
+              frontMatter: e.frontMatter,
+              assets: e.assets,
+              contentTitle: e.contentTitle,
+              toc: e.toc,
+            }),
+            [e],
+          );
+        })(n);
+        return (0, i.jsx)(l.Provider, { value: a, children: t });
+      }
+      function r() {
+        const e = (0, s.useContext)(l);
+        if (null === e) throw new o.i6('DocProvider');
+        return e;
+      }
+      function d() {
+        const { metadata: e, frontMatter: t, assets: n } = r();
+        return (0, i.jsx)(a.d, { title: e.title, description: e.description, keywords: t.keywords, image: n.image ?? t.image });
+      }
+      var u = n(512),
+        m = n(7524),
+        h = n(4966);
+      function p() {
+        const { metadata: e } = r();
+        return (0, i.jsx)(h.Z, { previous: e.previous, next: e.next });
+      }
+      var f = n(3120),
+        x = n(4364),
+        b = n(5281),
+        g = n(5999);
+      function v(e) {
+        let { lastUpdatedAt: t, formattedLastUpdatedAt: n } = e;
+        return (0, i.jsx)(g.Z, {
+          id: 'theme.lastUpdated.atDate',
+          description: 'The words used to describe on which date a page has been last updated',
+          values: {
+            date: (0, i.jsx)('b', { children: (0, i.jsx)('time', { dateTime: new Date(1e3 * t).toISOString(), children: n }) }),
+          },
+          children: ' on {date}',
+        });
+      }
+      function j(e) {
+        let { lastUpdatedBy: t } = e;
+        return (0, i.jsx)(g.Z, {
+          id: 'theme.lastUpdated.byUser',
+          description: 'The words used to describe by who the page has been last updated',
+          values: { user: (0, i.jsx)('b', { children: t }) },
+          children: ' by {user}',
+        });
+      }
+      function N(e) {
+        let { lastUpdatedAt: t, formattedLastUpdatedAt: n, lastUpdatedBy: s } = e;
+        return (0, i.jsxs)('span', {
+          className: b.k.common.lastUpdated,
+          children: [
+            (0, i.jsx)(g.Z, {
+              id: 'theme.lastUpdated.lastUpdatedAtBy',
+              description: 'The sentence used to display when a page has been last updated, and by who',
+              values: {
+                atDate: t && n ? (0, i.jsx)(v, { lastUpdatedAt: t, formattedLastUpdatedAt: n }) : '',
+                byUser: s ? (0, i.jsx)(j, { lastUpdatedBy: s }) : '',
+              },
+              children: 'Last updated{atDate}{byUser}',
+            }),
+            !1,
+          ],
+        });
+      }
+      var C = n(3692);
+      const k = { iconEdit: 'iconEdit_Z9Sw' };
+      function L(e) {
+        let { className: t, ...n } = e;
+        return (0, i.jsx)('svg', {
+          fill: 'currentColor',
+          height: '20',
+          width: '20',
+          viewBox: '0 0 40 40',
+          className: (0, u.Z)(k.iconEdit, t),
+          'aria-hidden': 'true',
+          ...n,
+          children: (0, i.jsx)('g', {
+            children: (0, i.jsx)('path', {
+              d: 'm34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z',
+            }),
+          }),
+        });
+      }
+      function y(e) {
+        let { editUrl: t } = e;
+        return (0, i.jsxs)(C.Z, {
+          to: t,
+          className: b.k.common.editThisPage,
+          children: [
+            (0, i.jsx)(L, {}),
+            (0, i.jsx)(g.Z, {
+              id: 'theme.common.editThisPage',
+              description: 'The link label to edit the current page',
+              children: 'Edit this page',
+            }),
+          ],
+        });
+      }
+      const _ = { tag: 'tag_zVej', tagRegular: 'tagRegular_sFm0', tagWithCount: 'tagWithCount_h2kH' };
+      function B(e) {
+        let { permalink: t, label: n, count: s } = e;
+        return (0, i.jsxs)(C.Z, {
+          href: t,
+          className: (0, u.Z)(_.tag, s ? _.tagWithCount : _.tagRegular),
+          children: [n, s && (0, i.jsx)('span', { children: s })],
+        });
+      }
+      const Z = { tags: 'tags_jXut', tag: 'tag_QGVx' };
+      function w(e) {
+        let { tags: t } = e;
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)('b', {
+              children: (0, i.jsx)(g.Z, {
+                id: 'theme.tags.tagsListLabel',
+                description: 'The label alongside a tag list',
+                children: 'Tags:',
+              }),
+            }),
+            (0, i.jsx)('ul', {
+              className: (0, u.Z)(Z.tags, 'padding--none', 'margin-left--sm'),
+              children: t.map(e => {
+                let { label: t, permalink: n } = e;
+                return (0, i.jsx)('li', { className: Z.tag, children: (0, i.jsx)(B, { label: t, permalink: n }) }, n);
+              }),
+            }),
+          ],
+        });
+      }
+      const T = { lastUpdated: 'lastUpdated_vwxv' };
+      function E(e) {
+        return (0, i.jsx)('div', {
+          className: (0, u.Z)(b.k.docs.docFooterTagsRow, 'row margin-bottom--sm'),
+          children: (0, i.jsx)('div', { className: 'col', children: (0, i.jsx)(w, { ...e }) }),
+        });
+      }
+      function H(e) {
+        let { editUrl: t, lastUpdatedAt: n, lastUpdatedBy: s, formattedLastUpdatedAt: a } = e;
+        return (0, i.jsxs)('div', {
+          className: (0, u.Z)(b.k.docs.docFooterEditMetaRow, 'row'),
+          children: [
+            (0, i.jsx)('div', { className: 'col', children: t && (0, i.jsx)(y, { editUrl: t }) }),
+            (0, i.jsx)('div', {
+              className: (0, u.Z)('col', T.lastUpdated),
+              children: (n || s) && (0, i.jsx)(N, { lastUpdatedAt: n, formattedLastUpdatedAt: a, lastUpdatedBy: s }),
+            }),
+          ],
+        });
+      }
+      function A() {
+        const { metadata: e } = r(),
+          { editUrl: t, lastUpdatedAt: n, formattedLastUpdatedAt: s, lastUpdatedBy: a, tags: o } = e,
+          l = o.length > 0,
+          c = !!(t || n || a);
+        return l || c
+          ? (0, i.jsxs)('footer', {
+              className: (0, u.Z)(b.k.docs.docFooter, 'docusaurus-mt-lg'),
+              children: [
+                l && (0, i.jsx)(E, { tags: o }),
+                c && (0, i.jsx)(H, { editUrl: t, lastUpdatedAt: n, lastUpdatedBy: a, formattedLastUpdatedAt: s }),
+              ],
+            })
+          : null;
+      }
+      var I = n(6043),
+        M = n(6668);
+      function S(e) {
+        const t = e.map(e => ({ ...e, parentIndex: -1, children: [] })),
+          n = Array(7).fill(-1);
+        t.forEach((e, t) => {
+          const s = n.slice(2, e.level);
+          (e.parentIndex = Math.max(...s)), (n[e.level] = t);
+        });
+        const s = [];
+        return (
+          t.forEach(e => {
+            const { parentIndex: n, ...a } = e;
+            n >= 0 ? t[n].children.push(a) : s.push(a);
+          }),
+          s
+        );
+      }
+      function U(e) {
+        let { toc: t, minHeadingLevel: n, maxHeadingLevel: s } = e;
+        return t.flatMap(e => {
+          const t = U({ toc: e.children, minHeadingLevel: n, maxHeadingLevel: s });
+          return (function (e) {
+            return e.level >= n && e.level <= s;
+          })(e)
+            ? [{ ...e, children: t }]
+            : t;
+        });
+      }
+      function z(e) {
+        const t = e.getBoundingClientRect();
+        return t.top === t.bottom ? z(e.parentNode) : t;
+      }
+      function V(e, t) {
+        let { anchorTopOffset: n } = t;
+        const s = e.find(e => z(e).top >= n);
+        if (s) {
+          return (function (e) {
+            return e.top > 0 && e.bottom < window.innerHeight / 2;
+          })(z(s))
+            ? s
+            : e[e.indexOf(s) - 1] ?? null;
+        }
+        return e[e.length - 1] ?? null;
+      }
+      function R() {
+        const e = (0, s.useRef)(0),
+          {
+            navbar: { hideOnScroll: t },
+          } = (0, M.L)();
+        return (
+          (0, s.useEffect)(() => {
+            e.current = t ? 0 : document.querySelector('.navbar').clientHeight;
+          }, [t]),
+          e
+        );
+      }
+      function O(e) {
+        const t = (0, s.useRef)(void 0),
+          n = R();
+        (0, s.useEffect)(() => {
+          if (!e) return () => {};
+          const { linkClassName: s, linkActiveClassName: a, minHeadingLevel: o, maxHeadingLevel: i } = e;
+          function l() {
+            const e = (function (e) {
+                return Array.from(document.getElementsByClassName(e));
+              })(s),
+              l = (function (e) {
+                let { minHeadingLevel: t, maxHeadingLevel: n } = e;
+                const s = [];
+                for (let a = t; a <= n; a += 1) s.push(`h${a}.anchor`);
+                return Array.from(document.querySelectorAll(s.join()));
+              })({ minHeadingLevel: o, maxHeadingLevel: i }),
+              c = V(l, { anchorTopOffset: n.current }),
+              r = e.find(
+                e =>
+                  c &&
+                  c.id ===
+                    (function (e) {
+                      return decodeURIComponent(e.href.substring(e.href.indexOf('#') + 1));
+                    })(e),
+              );
+            e.forEach(e => {
+              !(function (e, n) {
+                n
+                  ? (t.current && t.current !== e && t.current.classList.remove(a), e.classList.add(a), (t.current = e))
+                  : e.classList.remove(a);
+              })(e, e === r);
+            });
+          }
+          return (
+            document.addEventListener('scroll', l),
+            document.addEventListener('resize', l),
+            l(),
+            () => {
+              document.removeEventListener('scroll', l), document.removeEventListener('resize', l);
+            }
+          );
+        }, [e, n]);
+      }
+      function P(e) {
+        let { toc: t, className: n, linkClassName: s, isChild: a } = e;
+        return t.length
+          ? (0, i.jsx)('ul', {
+              className: a ? void 0 : n,
+              children: t.map(e =>
+                (0, i.jsxs)(
+                  'li',
+                  {
+                    children: [
+                      (0, i.jsx)(C.Z, { to: `#${e.id}`, className: s ?? void 0, dangerouslySetInnerHTML: { __html: e.value } }),
+                      (0, i.jsx)(P, { isChild: !0, toc: e.children, className: n, linkClassName: s }),
+                    ],
+                  },
+                  e.id,
+                ),
+              ),
+            })
+          : null;
+      }
+      const $ = s.memo(P);
+      function D(e) {
+        let {
+          toc: t,
+          className: n = 'table-of-contents table-of-contents__left-border',
+          linkClassName: a = 'table-of-contents__link',
+          linkActiveClassName: o,
+          minHeadingLevel: l,
+          maxHeadingLevel: c,
+          ...r
+        } = e;
+        const d = (0, M.L)(),
+          u = l ?? d.tableOfContents.minHeadingLevel,
+          m = c ?? d.tableOfContents.maxHeadingLevel,
+          h = (function (e) {
+            let { toc: t, minHeadingLevel: n, maxHeadingLevel: a } = e;
+            return (0, s.useMemo)(() => U({ toc: S(t), minHeadingLevel: n, maxHeadingLevel: a }), [t, n, a]);
+          })({ toc: t, minHeadingLevel: u, maxHeadingLevel: m });
+        return (
+          O(
+            (0, s.useMemo)(() => {
+              if (a && o) return { linkClassName: a, linkActiveClassName: o, minHeadingLevel: u, maxHeadingLevel: m };
+            }, [a, o, u, m]),
+          ),
+          (0, i.jsx)($, { toc: h, className: n, linkClassName: a, ...r })
+        );
+      }
+      const W = {
+        tocCollapsibleButton: 'tocCollapsibleButton_TO0P',
+        tocCollapsibleButtonExpanded: 'tocCollapsibleButtonExpanded_MG3E',
+      };
+      function F(e) {
+        let { collapsed: t, ...n } = e;
+        return (0, i.jsx)('button', {
+          type: 'button',
+          ...n,
+          className: (0, u.Z)('clean-btn', W.tocCollapsibleButton, !t && W.tocCollapsibleButtonExpanded, n.className),
+          children: (0, i.jsx)(g.Z, {
+            id: 'theme.TOCCollapsible.toggleButtonLabel',
+            description: 'The label used by the button on the collapsible TOC component',
+            children: 'On this page',
+          }),
+        });
+      }
+      const q = {
+        tocCollapsible: 'tocCollapsible_ETCw',
+        tocCollapsibleContent: 'tocCollapsibleContent_vkbj',
+        tocCollapsibleExpanded: 'tocCollapsibleExpanded_sAul',
+      };
+      function G(e) {
+        let { toc: t, className: n, minHeadingLevel: s, maxHeadingLevel: a } = e;
+        const { collapsed: o, toggleCollapsed: l } = (0, I.u)({ initialState: !0 });
+        return (0, i.jsxs)('div', {
+          className: (0, u.Z)(q.tocCollapsible, !o && q.tocCollapsibleExpanded, n),
+          children: [
+            (0, i.jsx)(F, { collapsed: o, onClick: l }),
+            (0, i.jsx)(I.z, {
+              lazy: !0,
+              className: q.tocCollapsibleContent,
+              collapsed: o,
+              children: (0, i.jsx)(D, { toc: t, minHeadingLevel: s, maxHeadingLevel: a }),
+            }),
+          ],
+        });
+      }
+      const J = { tocMobile: 'tocMobile_ITEo' };
+      function Y() {
+        const { toc: e, frontMatter: t } = r();
+        return (0, i.jsx)(G, {
+          toc: e,
+          minHeadingLevel: t.toc_min_heading_level,
+          maxHeadingLevel: t.toc_max_heading_level,
+          className: (0, u.Z)(b.k.docs.docTocMobile, J.tocMobile),
+        });
+      }
+      const Q = { tableOfContents: 'tableOfContents_bqdL', docItemContainer: 'docItemContainer_F8PC' },
+        X = 'table-of-contents__link toc-highlight',
+        K = 'table-of-contents__link--active';
+      function ee(e) {
+        let { className: t, ...n } = e;
+        return (0, i.jsx)('div', {
+          className: (0, u.Z)(Q.tableOfContents, 'thin-scrollbar', t),
+          children: (0, i.jsx)(D, { ...n, linkClassName: X, linkActiveClassName: K }),
+        });
+      }
+      function te() {
+        const { toc: e, frontMatter: t } = r();
+        return (0, i.jsx)(ee, {
+          toc: e,
+          minHeadingLevel: t.toc_min_heading_level,
+          maxHeadingLevel: t.toc_max_heading_level,
+          className: b.k.docs.docTocDesktop,
+        });
+      }
+      var ne = n(2503),
+        se = n(1151),
+        ae = n(1769);
+      function oe(e) {
+        let { children: t } = e;
+        return (0, i.jsx)(se.Z, { components: ae.Z, children: t });
+      }
+      function ie(e) {
+        let { children: t } = e;
+        const n = (function () {
+          const { metadata: e, frontMatter: t, contentTitle: n } = r();
+          return t.hide_title || void 0 !== n ? null : e.title;
+        })();
+        return (0, i.jsxs)('div', {
+          className: (0, u.Z)(b.k.docs.docMarkdown, 'markdown'),
+          children: [
+            n && (0, i.jsx)('header', { children: (0, i.jsx)(ne.Z, { as: 'h1', children: n }) }),
+            (0, i.jsx)(oe, { children: t }),
+          ],
+        });
+      }
+      var le = n(1310),
+        ce = n(5742);
+      function re() {
+        return (0, i.jsx)(g.Z, {
+          id: 'theme.unlistedContent.title',
+          description: 'The unlisted content banner title',
+          children: 'Unlisted page',
+        });
+      }
+      function de() {
+        return (0, i.jsx)(g.Z, {
+          id: 'theme.unlistedContent.message',
+          description: 'The unlisted content banner message',
+          children: 'This page is unlisted. Search engines will not index it, and only users having a direct link can access it.',
+        });
+      }
+      function ue() {
+        return (0, i.jsx)(ce.Z, { children: (0, i.jsx)('meta', { name: 'robots', content: 'noindex, nofollow' }) });
+      }
+      var me = n(9047);
+      function he(e) {
+        let { className: t } = e;
+        return (0, i.jsx)(me.Z, {
+          type: 'caution',
+          title: (0, i.jsx)(re, {}),
+          className: (0, u.Z)(t, b.k.common.unlistedBanner),
+          children: (0, i.jsx)(de, {}),
+        });
+      }
+      function pe(e) {
+        return (0, i.jsxs)(i.Fragment, { children: [(0, i.jsx)(ue, {}), (0, i.jsx)(he, { ...e })] });
+      }
+      const fe = { docItemContainer: 'docItemContainer_Djhp', docItemCol: 'docItemCol_VOVn' };
+      function xe(e) {
+        let { children: t } = e;
+        const n = (function () {
+            const { frontMatter: e, toc: t } = r(),
+              n = (0, m.i)(),
+              s = e.hide_table_of_contents,
+              a = !s && t.length > 0;
+            return {
+              hidden: s,
+              mobile: a ? (0, i.jsx)(Y, {}) : void 0,
+              desktop: !a || ('desktop' !== n && 'ssr' !== n) ? void 0 : (0, i.jsx)(te, {}),
+            };
+          })(),
+          {
+            metadata: { unlisted: s },
+          } = r();
+        return (0, i.jsxs)('div', {
+          className: 'row',
+          children: [
+            (0, i.jsxs)('div', {
+              className: (0, u.Z)('col', !n.hidden && fe.docItemCol),
+              children: [
+                s && (0, i.jsx)(pe, {}),
+                (0, i.jsx)(f.Z, {}),
+                (0, i.jsxs)('div', {
+                  className: fe.docItemContainer,
+                  children: [
+                    (0, i.jsxs)('article', {
+                      children: [
+                        (0, i.jsx)(le.Z, {}),
+                        (0, i.jsx)(x.Z, {}),
+                        n.mobile,
+                        (0, i.jsx)(ie, { children: t }),
+                        (0, i.jsx)(A, {}),
+                      ],
+                    }),
+                    (0, i.jsx)(p, {}),
+                  ],
+                }),
+              ],
+            }),
+            n.desktop && (0, i.jsx)('div', { className: 'col col--3', children: n.desktop }),
+          ],
+        });
+      }
+      function be(e) {
+        const t = `docs-doc-id-${e.content.metadata.id}`,
+          n = e.content;
+        return (0, i.jsx)(c, {
+          content: e.content,
+          children: (0, i.jsxs)(a.FG, {
+            className: t,
+            children: [(0, i.jsx)(d, {}), (0, i.jsx)(xe, { children: (0, i.jsx)(n, {}) })],
+          }),
+        });
+      }
+    },
+    4966: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => c });
+      n(7294);
+      var s = n(5999),
+        a = n(512),
+        o = n(3692),
+        i = n(5893);
+      function l(e) {
+        const { permalink: t, title: n, subLabel: s, isNext: l } = e;
+        return (0, i.jsxs)(o.Z, {
+          className: (0, a.Z)('pagination-nav__link', l ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'),
+          to: t,
+          children: [
+            s && (0, i.jsx)('div', { className: 'pagination-nav__sublabel', children: s }),
+            (0, i.jsx)('div', { className: 'pagination-nav__label', children: n }),
+          ],
+        });
+      }
+      function c(e) {
+        const { previous: t, next: n } = e;
+        return (0, i.jsxs)('nav', {
+          className: 'pagination-nav docusaurus-mt-lg',
+          'aria-label': (0, s.I)({
+            id: 'theme.docs.paginator.navAriaLabel',
+            message: 'Docs pages',
+            description: 'The ARIA label for the docs pagination',
+          }),
+          children: [
+            t &&
+              (0, i.jsx)(l, {
+                ...t,
+                subLabel: (0, i.jsx)(s.Z, {
+                  id: 'theme.docs.paginator.previous',
+                  description: 'The label used to navigate to the previous doc',
+                  children: 'Previous',
+                }),
+              }),
+            n &&
+              (0, i.jsx)(l, {
+                ...n,
+                subLabel: (0, i.jsx)(s.Z, {
+                  id: 'theme.docs.paginator.next',
+                  description: 'The label used to navigate to the next doc',
+                  children: 'Next',
+                }),
+                isNext: !0,
+              }),
+          ],
+        });
+      }
+    },
+    4364: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => c });
+      n(7294);
+      var s = n(512),
+        a = n(5999),
+        o = n(5281),
+        i = n(4477),
+        l = n(5893);
+      function c(e) {
+        let { className: t } = e;
+        const n = (0, i.E)();
+        return n.badge
+          ? (0, l.jsx)('span', {
+              className: (0, s.Z)(t, o.k.docs.docVersionBadge, 'badge badge--secondary'),
+              children: (0, l.jsx)(a.Z, {
+                id: 'theme.docs.versionBadge.label',
+                values: { versionLabel: n.label },
+                children: 'Version: {versionLabel}',
+              }),
+            })
+          : null;
+      }
+    },
+    3120: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => x });
+      n(7294);
+      var s = n(512),
+        a = n(2263),
+        o = n(3692),
+        i = n(5999),
+        l = n(143),
+        c = n(5281),
+        r = n(373),
+        d = n(4477),
+        u = n(5893);
+      const m = {
+        unreleased: function (e) {
+          let { siteTitle: t, versionMetadata: n } = e;
+          return (0, u.jsx)(i.Z, {
+            id: 'theme.docs.versions.unreleasedVersionLabel',
+            description: "The label used to tell the user that he's browsing an unreleased doc version",
+            values: { siteTitle: t, versionLabel: (0, u.jsx)('b', { children: n.label }) },
+            children: 'This is unreleased documentation for {siteTitle} {versionLabel} version.',
+          });
+        },
+        unmaintained: function (e) {
+          let { siteTitle: t, versionMetadata: n } = e;
+          return (0, u.jsx)(i.Z, {
+            id: 'theme.docs.versions.unmaintainedVersionLabel',
+            description: "The label used to tell the user that he's browsing an unmaintained doc version",
+            values: { siteTitle: t, versionLabel: (0, u.jsx)('b', { children: n.label }) },
+            children: 'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.',
+          });
+        },
+      };
+      function h(e) {
+        const t = m[e.versionMetadata.banner];
+        return (0, u.jsx)(t, { ...e });
+      }
+      function p(e) {
+        let { versionLabel: t, to: n, onClick: s } = e;
+        return (0, u.jsx)(i.Z, {
+          id: 'theme.docs.versions.latestVersionSuggestionLabel',
+          description: 'The label used to tell the user to check the latest version',
+          values: {
+            versionLabel: t,
+            latestVersionLink: (0, u.jsx)('b', {
+              children: (0, u.jsx)(o.Z, {
+                to: n,
+                onClick: s,
+                children: (0, u.jsx)(i.Z, {
+                  id: 'theme.docs.versions.latestVersionLinkLabel',
+                  description: 'The label used for the latest version suggestion link label',
+                  children: 'latest version',
+                }),
+              }),
+            }),
+          },
+          children: 'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).',
+        });
+      }
+      function f(e) {
+        let { className: t, versionMetadata: n } = e;
+        const {
+            siteConfig: { title: o },
+          } = (0, a.Z)(),
+          { pluginId: i } = (0, l.gA)({ failfast: !0 }),
+          { savePreferredVersionName: d } = (0, r.J)(i),
+          { latestDocSuggestion: m, latestVersionSuggestion: f } = (0, l.Jo)(i),
+          x = m ?? (b = f).docs.find(e => e.id === b.mainDocId);
+        var b;
+        return (0, u.jsxs)('div', {
+          className: (0, s.Z)(t, c.k.docs.docVersionBanner, 'alert alert--warning margin-bottom--md'),
+          role: 'alert',
+          children: [
+            (0, u.jsx)('div', { children: (0, u.jsx)(h, { siteTitle: o, versionMetadata: n }) }),
+            (0, u.jsx)('div', {
+              className: 'margin-top--md',
+              children: (0, u.jsx)(p, { versionLabel: f.label, to: x.path, onClick: () => d(f.name) }),
+            }),
+          ],
+        });
+      }
+      function x(e) {
+        let { className: t } = e;
+        const n = (0, d.E)();
+        return n.banner ? (0, u.jsx)(f, { className: t, versionMetadata: n }) : null;
+      }
+    },
+    804: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => oe });
+      var s = n(7294),
+        a = n(5742),
+        o = n(2389),
+        i = n(512),
+        l = n(2949),
+        c = n(6668);
+      function r() {
+        const { prism: e } = (0, c.L)(),
+          { colorMode: t } = (0, l.I)(),
+          n = e.theme,
+          s = e.darkTheme || n;
+        return 'dark' === t ? s : n;
+      }
+      var d = n(5281),
+        u = n(7594),
+        m = n.n(u);
+      const h = /title=(?<quote>["'])(?<title>.*?)\1/,
+        p = /\{(?<range>[\d,-]+)\}/,
+        f = {
+          js: { start: '\\/\\/', end: '' },
+          jsBlock: { start: '\\/\\*', end: '\\*\\/' },
+          jsx: { start: '\\{\\s*\\/\\*', end: '\\*\\/\\s*\\}' },
+          bash: { start: '#', end: '' },
+          html: { start: '\x3c!--', end: '--\x3e' },
+        },
+        x = {
+          ...f,
+          lua: { start: '--', end: '' },
+          wasm: { start: '\\;\\;', end: '' },
+          tex: { start: '%', end: '' },
+          vb: { start: "['\u2018\u2019]", end: '' },
+          rem: { start: '[Rr][Ee][Mm]\\b', end: '' },
+          f90: { start: '!', end: '' },
+          ml: { start: '\\(\\*', end: '\\*\\)' },
+          cobol: { start: '\\*>', end: '' },
+        },
+        b = Object.keys(f);
+      function g(e, t) {
+        const n = e
+          .map(e => {
+            const { start: n, end: s } = x[e];
+            return `(?:${n}\\s*(${t.flatMap(e => [e.line, e.block?.start, e.block?.end].filter(Boolean)).join('|')})\\s*${s})`;
+          })
+          .join('|');
+        return new RegExp(`^\\s*(?:${n})\\s*$`);
+      }
+      function v(e, t) {
+        let n = e.replace(/\n$/, '');
+        const { language: s, magicComments: a, metastring: o } = t;
+        if (o && p.test(o)) {
+          const e = o.match(p).groups.range;
+          if (0 === a.length)
+            throw new Error(
+              `A highlight range has been given in code block's metastring (\`\`\` ${o}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`,
+            );
+          const t = a[0].className,
+            s = m()(e)
+              .filter(e => e > 0)
+              .map(e => [e - 1, [t]]);
+          return { lineClassNames: Object.fromEntries(s), code: n };
+        }
+        if (void 0 === s) return { lineClassNames: {}, code: n };
+        const i = (function (e, t) {
+            switch (e) {
+              case 'js':
+              case 'javascript':
+              case 'ts':
+              case 'typescript':
+                return g(['js', 'jsBlock'], t);
+              case 'jsx':
+              case 'tsx':
+                return g(['js', 'jsBlock', 'jsx'], t);
+              case 'html':
+                return g(['js', 'jsBlock', 'html'], t);
+              case 'python':
+              case 'py':
+              case 'bash':
+                return g(['bash'], t);
+              case 'markdown':
+              case 'md':
+                return g(['html', 'jsx', 'bash'], t);
+              case 'tex':
+              case 'latex':
+              case 'matlab':
+                return g(['tex'], t);
+              case 'lua':
+              case 'haskell':
+              case 'sql':
+                return g(['lua'], t);
+              case 'wasm':
+                return g(['wasm'], t);
+              case 'vb':
+              case 'vbnet':
+              case 'vba':
+              case 'visual-basic':
+                return g(['vb', 'rem'], t);
+              case 'batch':
+                return g(['rem'], t);
+              case 'basic':
+                return g(['rem', 'f90'], t);
+              case 'fsharp':
+                return g(['js', 'ml'], t);
+              case 'ocaml':
+              case 'sml':
+                return g(['ml'], t);
+              case 'fortran':
+                return g(['f90'], t);
+              case 'cobol':
+                return g(['cobol'], t);
+              default:
+                return g(b, t);
+            }
+          })(s, a),
+          l = n.split('\n'),
+          c = Object.fromEntries(a.map(e => [e.className, { start: 0, range: '' }])),
+          r = Object.fromEntries(
+            a
+              .filter(e => e.line)
+              .map(e => {
+                let { className: t, line: n } = e;
+                return [n, t];
+              }),
+          ),
+          d = Object.fromEntries(
+            a
+              .filter(e => e.block)
+              .map(e => {
+                let { className: t, block: n } = e;
+                return [n.start, t];
+              }),
+          ),
+          u = Object.fromEntries(
+            a
+              .filter(e => e.block)
+              .map(e => {
+                let { className: t, block: n } = e;
+                return [n.end, t];
+              }),
+          );
+        for (let m = 0; m < l.length; ) {
+          const e = l[m].match(i);
+          if (!e) {
+            m += 1;
+            continue;
+          }
+          const t = e.slice(1).find(e => void 0 !== e);
+          r[t]
+            ? (c[r[t]].range += `${m},`)
+            : d[t]
+              ? (c[d[t]].start = m)
+              : u[t] && (c[u[t]].range += `${c[u[t]].start}-${m - 1},`),
+            l.splice(m, 1);
+        }
+        n = l.join('\n');
+        const h = {};
+        return (
+          Object.entries(c).forEach(e => {
+            let [t, { range: n }] = e;
+            m()(n).forEach(e => {
+              (h[e] ??= []), h[e].push(t);
+            });
+          }),
+          { lineClassNames: h, code: n }
+        );
+      }
+      const j = { codeBlockContainer: 'codeBlockContainer_Ckt0' };
+      var N = n(5893);
+      function C(e) {
+        let { as: t, ...n } = e;
+        const s = (function (e) {
+          const t = { color: '--prism-color', backgroundColor: '--prism-background-color' },
+            n = {};
+          return (
+            Object.entries(e.plain).forEach(e => {
+              let [s, a] = e;
+              const o = t[s];
+              o && 'string' == typeof a && (n[o] = a);
+            }),
+            n
+          );
+        })(r());
+        return (0, N.jsx)(t, { ...n, style: s, className: (0, i.Z)(n.className, j.codeBlockContainer, d.k.common.codeBlock) });
+      }
+      const k = {
+        codeBlockContent: 'codeBlockContent_biex',
+        codeBlockTitle: 'codeBlockTitle_Ktv7',
+        codeBlock: 'codeBlock_bY9V',
+        codeBlockStandalone: 'codeBlockStandalone_MEMb',
+        codeBlockLines: 'codeBlockLines_e6Vv',
+        codeBlockLinesWithNumbering: 'codeBlockLinesWithNumbering_o6Pm',
+        buttonGroup: 'buttonGroup__atx',
+      };
+      function L(e) {
+        let { children: t, className: n } = e;
+        return (0, N.jsx)(C, {
+          as: 'pre',
+          tabIndex: 0,
+          className: (0, i.Z)(k.codeBlockStandalone, 'thin-scrollbar', n),
+          children: (0, N.jsx)('code', { className: k.codeBlockLines, children: t }),
+        });
+      }
+      var y = n(902);
+      const _ = { attributes: !0, characterData: !0, childList: !0, subtree: !0 };
+      function B(e, t) {
+        const [n, a] = (0, s.useState)(),
+          o = (0, s.useCallback)(() => {
+            a(e.current?.closest('[role=tabpanel][hidden]'));
+          }, [e, a]);
+        (0, s.useEffect)(() => {
+          o();
+        }, [o]),
+          (function (e, t, n) {
+            void 0 === n && (n = _);
+            const a = (0, y.zX)(t),
+              o = (0, y.Ql)(n);
+            (0, s.useEffect)(() => {
+              const t = new MutationObserver(a);
+              return e && t.observe(e, o), () => t.disconnect();
+            }, [e, a, o]);
+          })(
+            n,
+            e => {
+              e.forEach(e => {
+                'attributes' === e.type && 'hidden' === e.attributeName && (t(), o());
+              });
+            },
+            { attributes: !0, characterData: !1, childList: !1, subtree: !1 },
+          );
+      }
+      var Z = n(2573);
+      const w = { codeLine: 'codeLine_lJS_', codeLineNumber: 'codeLineNumber_Tfdd', codeLineContent: 'codeLineContent_feaV' };
+      function T(e) {
+        let { line: t, classNames: n, showLineNumbers: s, getLineProps: a, getTokenProps: o } = e;
+        1 === t.length && '\n' === t[0].content && (t[0].content = '');
+        const l = a({ line: t, className: (0, i.Z)(n, s && w.codeLine) }),
+          c = t.map((e, t) => (0, N.jsx)('span', { ...o({ token: e, key: t }) }, t));
+        return (0, N.jsxs)('span', {
+          ...l,
+          children: [
+            s
+              ? (0, N.jsxs)(N.Fragment, {
+                  children: [
+                    (0, N.jsx)('span', { className: w.codeLineNumber }),
+                    (0, N.jsx)('span', { className: w.codeLineContent, children: c }),
+                  ],
+                })
+              : c,
+            (0, N.jsx)('br', {}),
+          ],
+        });
+      }
+      var E = n(5999);
+      function H(e) {
+        return (0, N.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          ...e,
+          children: (0, N.jsx)('path', {
+            fill: 'currentColor',
+            d: 'M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z',
+          }),
+        });
+      }
+      function A(e) {
+        return (0, N.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          ...e,
+          children: (0, N.jsx)('path', { fill: 'currentColor', d: 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' }),
+        });
+      }
+      const I = {
+        copyButtonCopied: 'copyButtonCopied_obH4',
+        copyButtonIcons: 'copyButtonIcons_eSgA',
+        copyButtonIcon: 'copyButtonIcon_y97N',
+        copyButtonSuccessIcon: 'copyButtonSuccessIcon_LjdS',
+      };
+      function M(e) {
+        let { code: t, className: n } = e;
+        const [a, o] = (0, s.useState)(!1),
+          l = (0, s.useRef)(void 0),
+          c = (0, s.useCallback)(() => {
+            !(function (e, { target: t = document.body } = {}) {
+              if ('string' != typeof e)
+                throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);
+              const n = document.createElement('textarea'),
+                s = document.activeElement;
+              (n.value = e),
+                n.setAttribute('readonly', ''),
+                (n.style.contain = 'strict'),
+                (n.style.position = 'absolute'),
+                (n.style.left = '-9999px'),
+                (n.style.fontSize = '12pt');
+              const a = document.getSelection(),
+                o = a.rangeCount > 0 && a.getRangeAt(0);
+              t.append(n), n.select(), (n.selectionStart = 0), (n.selectionEnd = e.length);
+              let i = !1;
+              try {
+                i = document.execCommand('copy');
+              } catch {}
+              n.remove(), o && (a.removeAllRanges(), a.addRange(o)), s && s.focus();
+            })(t),
+              o(!0),
+              (l.current = window.setTimeout(() => {
+                o(!1);
+              }, 1e3));
+          }, [t]);
+        return (
+          (0, s.useEffect)(() => () => window.clearTimeout(l.current), []),
+          (0, N.jsx)('button', {
+            type: 'button',
+            'aria-label': a
+              ? (0, E.I)({
+                  id: 'theme.CodeBlock.copied',
+                  message: 'Copied',
+                  description: 'The copied button label on code blocks',
+                })
+              : (0, E.I)({
+                  id: 'theme.CodeBlock.copyButtonAriaLabel',
+                  message: 'Copy code to clipboard',
+                  description: 'The ARIA label for copy code blocks button',
+                }),
+            title: (0, E.I)({ id: 'theme.CodeBlock.copy', message: 'Copy', description: 'The copy button label on code blocks' }),
+            className: (0, i.Z)('clean-btn', n, I.copyButton, a && I.copyButtonCopied),
+            onClick: c,
+            children: (0, N.jsxs)('span', {
+              className: I.copyButtonIcons,
+              'aria-hidden': 'true',
+              children: [(0, N.jsx)(H, { className: I.copyButtonIcon }), (0, N.jsx)(A, { className: I.copyButtonSuccessIcon })],
+            }),
+          })
+        );
+      }
+      function S(e) {
+        return (0, N.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          ...e,
+          children: (0, N.jsx)('path', {
+            fill: 'currentColor',
+            d: 'M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z',
+          }),
+        });
+      }
+      const U = { wordWrapButtonIcon: 'wordWrapButtonIcon_Bwma', wordWrapButtonEnabled: 'wordWrapButtonEnabled_EoeP' };
+      function z(e) {
+        let { className: t, onClick: n, isEnabled: s } = e;
+        const a = (0, E.I)({
+          id: 'theme.CodeBlock.wordWrapToggle',
+          message: 'Toggle word wrap',
+          description: 'The title attribute for toggle word wrapping button of code block lines',
+        });
+        return (0, N.jsx)('button', {
+          type: 'button',
+          onClick: n,
+          className: (0, i.Z)('clean-btn', t, s && U.wordWrapButtonEnabled),
+          'aria-label': a,
+          title: a,
+          children: (0, N.jsx)(S, { className: U.wordWrapButtonIcon, 'aria-hidden': 'true' }),
+        });
+      }
+      function V(e) {
+        let { children: t, className: n = '', metastring: a, title: o, showLineNumbers: l, language: d } = e;
+        const {
+            prism: { defaultLanguage: u, magicComments: m },
+          } = (0, c.L)(),
+          p = (function (e) {
+            return e?.toLowerCase();
+          })(
+            d ??
+              (function (e) {
+                const t = e.split(' ').find(e => e.startsWith('language-'));
+                return t?.replace(/language-/, '');
+              })(n) ??
+              u,
+          ),
+          f = r(),
+          x = (function () {
+            const [e, t] = (0, s.useState)(!1),
+              [n, a] = (0, s.useState)(!1),
+              o = (0, s.useRef)(null),
+              i = (0, s.useCallback)(() => {
+                const n = o.current.querySelector('code');
+                e ? n.removeAttribute('style') : ((n.style.whiteSpace = 'pre-wrap'), (n.style.overflowWrap = 'anywhere')),
+                  t(e => !e);
+              }, [o, e]),
+              l = (0, s.useCallback)(() => {
+                const { scrollWidth: e, clientWidth: t } = o.current,
+                  n = e > t || o.current.querySelector('code').hasAttribute('style');
+                a(n);
+              }, [o]);
+            return (
+              B(o, l),
+              (0, s.useEffect)(() => {
+                l();
+              }, [e, l]),
+              (0, s.useEffect)(
+                () => (
+                  window.addEventListener('resize', l, { passive: !0 }),
+                  () => {
+                    window.removeEventListener('resize', l);
+                  }
+                ),
+                [l],
+              ),
+              { codeBlockRef: o, isEnabled: e, isCodeScrollable: n, toggle: i }
+            );
+          })(),
+          b =
+            (function (e) {
+              return e?.match(h)?.groups.title ?? '';
+            })(a) || o,
+          { lineClassNames: g, code: j } = v(t, { metastring: a, language: p, magicComments: m }),
+          L =
+            l ??
+            (function (e) {
+              return Boolean(e?.includes('showLineNumbers'));
+            })(a);
+        return (0, N.jsxs)(C, {
+          as: 'div',
+          className: (0, i.Z)(n, p && !n.includes(`language-${p}`) && `language-${p}`),
+          children: [
+            b && (0, N.jsx)('div', { className: k.codeBlockTitle, children: b }),
+            (0, N.jsxs)('div', {
+              className: k.codeBlockContent,
+              children: [
+                (0, N.jsx)(Z.y$, {
+                  theme: f,
+                  code: j,
+                  language: p ?? 'text',
+                  children: e => {
+                    let { className: t, style: n, tokens: s, getLineProps: a, getTokenProps: o } = e;
+                    return (0, N.jsx)('pre', {
+                      tabIndex: 0,
+                      ref: x.codeBlockRef,
+                      className: (0, i.Z)(t, k.codeBlock, 'thin-scrollbar'),
+                      style: n,
+                      children: (0, N.jsx)('code', {
+                        className: (0, i.Z)(k.codeBlockLines, L && k.codeBlockLinesWithNumbering),
+                        children: s.map((e, t) =>
+                          (0, N.jsx)(T, { line: e, getLineProps: a, getTokenProps: o, classNames: g[t], showLineNumbers: L }, t),
+                        ),
+                      }),
+                    });
+                  },
+                }),
+                (0, N.jsxs)('div', {
+                  className: k.buttonGroup,
+                  children: [
+                    (x.isEnabled || x.isCodeScrollable) &&
+                      (0, N.jsx)(z, { className: k.codeButton, onClick: () => x.toggle(), isEnabled: x.isEnabled }),
+                    (0, N.jsx)(M, { className: k.codeButton, code: j }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        });
+      }
+      function R(e) {
+        let { children: t, ...n } = e;
+        const a = (0, o.Z)(),
+          i = (function (e) {
+            return s.Children.toArray(e).some(e => (0, s.isValidElement)(e)) ? e : Array.isArray(e) ? e.join('') : e;
+          })(t),
+          l = 'string' == typeof i ? V : L;
+        return (0, N.jsx)(l, { ...n, children: i }, String(a));
+      }
+      function O(e) {
+        return (0, N.jsx)('code', { ...e });
+      }
+      var P = n(3692);
+      var $ = n(6043);
+      const D = { details: 'details_lb9f', isBrowser: 'isBrowser_bmU9', collapsibleContent: 'collapsibleContent_i85q' };
+      function W(e) {
+        return !!e && ('SUMMARY' === e.tagName || W(e.parentElement));
+      }
+      function F(e, t) {
+        return !!e && (e === t || F(e.parentElement, t));
+      }
+      function q(e) {
+        let { summary: t, children: n, ...a } = e;
+        const l = (0, o.Z)(),
+          c = (0, s.useRef)(null),
+          { collapsed: r, setCollapsed: d } = (0, $.u)({ initialState: !a.open }),
+          [u, m] = (0, s.useState)(a.open),
+          h = s.isValidElement(t) ? t : (0, N.jsx)('summary', { children: t ?? 'Details' });
+        return (0, N.jsxs)('details', {
+          ...a,
+          ref: c,
+          open: u,
+          'data-collapsed': r,
+          className: (0, i.Z)(D.details, l && D.isBrowser, a.className),
+          onMouseDown: e => {
+            W(e.target) && e.detail > 1 && e.preventDefault();
+          },
+          onClick: e => {
+            e.stopPropagation();
+            const t = e.target;
+            W(t) && F(t, c.current) && (e.preventDefault(), r ? (d(!1), m(!0)) : d(!0));
+          },
+          children: [
+            h,
+            (0, N.jsx)($.z, {
+              lazy: !1,
+              collapsed: r,
+              disableSSRStyle: !0,
+              onCollapseTransitionEnd: e => {
+                d(e), m(!e);
+              },
+              children: (0, N.jsx)('div', { className: D.collapsibleContent, children: n }),
+            }),
+          ],
+        });
+      }
+      const G = { details: 'details_b_Ee' },
+        J = 'alert alert--info';
+      function Y(e) {
+        let { ...t } = e;
+        return (0, N.jsx)(q, { ...t, className: (0, i.Z)(J, G.details, t.className) });
+      }
+      function Q(e) {
+        const t = s.Children.toArray(e.children),
+          n = t.find(e => s.isValidElement(e) && 'summary' === e.type),
+          a = (0, N.jsx)(N.Fragment, { children: t.filter(e => e !== n) });
+        return (0, N.jsx)(Y, { ...e, summary: n, children: a });
+      }
+      var X = n(2503);
+      function K(e) {
+        return (0, N.jsx)(X.Z, { ...e });
+      }
+      const ee = { containsTaskList: 'containsTaskList_mC6p' };
+      function te(e) {
+        if (void 0 !== e) return (0, i.Z)(e, e?.includes('contains-task-list') && ee.containsTaskList);
+      }
+      const ne = { img: 'img_ev3q' };
+      var se = n(9047),
+        ae = n(1875);
+      const oe = {
+        Head: a.Z,
+        details: Q,
+        Details: Q,
+        code: function (e) {
+          return (function (e) {
+            return void 0 !== e.children && s.Children.toArray(e.children).every(e => 'string' == typeof e && !e.includes('\n'));
+          })(e)
+            ? (0, N.jsx)(O, { ...e })
+            : (0, N.jsx)(R, { ...e });
+        },
+        a: function (e) {
+          return (0, N.jsx)(P.Z, { ...e });
+        },
+        pre: function (e) {
+          return (0, N.jsx)(N.Fragment, { children: e.children });
+        },
+        ul: function (e) {
+          return (0, N.jsx)('ul', { ...e, className: te(e.className) });
+        },
+        img: function (e) {
+          return (0, N.jsx)('img', { loading: 'lazy', ...e, className: ((t = e.className), (0, i.Z)(t, ne.img)) });
+          var t;
+        },
+        h1: e => (0, N.jsx)(K, { as: 'h1', ...e }),
+        h2: e => (0, N.jsx)(K, { as: 'h2', ...e }),
+        h3: e => (0, N.jsx)(K, { as: 'h3', ...e }),
+        h4: e => (0, N.jsx)(K, { as: 'h4', ...e }),
+        h5: e => (0, N.jsx)(K, { as: 'h5', ...e }),
+        h6: e => (0, N.jsx)(K, { as: 'h6', ...e }),
+        admonition: se.Z,
+        mermaid: ae.Z,
+      };
+    },
+    7594: (e, t) => {
+      function n(e) {
+        let t,
+          n = [];
+        for (let s of e.split(',').map(e => e.trim()))
+          if (/^-?\d+$/.test(s)) n.push(parseInt(s, 10));
+          else if ((t = s.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/))) {
+            let [e, s, a, o] = t;
+            if (s && o) {
+              (s = parseInt(s)), (o = parseInt(o));
+              const e = s < o ? 1 : -1;
+              ('-' !== a && '..' !== a && '\u2025' !== a) || (o += e);
+              for (let t = s; t !== o; t += e) n.push(t);
+            }
+          }
+        return n;
+      }
+      (t.default = n), (e.exports = n);
+    },
+    1151: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => l, a: () => i });
+      var s = n(7294);
+      const a = {},
+        o = s.createContext(a);
+      function i(e) {
+        const t = s.useContext(o);
+        return s.useMemo(
+          function () {
+            return 'function' == typeof e ? e(t) : { ...t, ...e };
+          },
+          [t, e],
+        );
+      }
+      function l(e) {
+        let t;
+        return (
+          (t = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(a)
+              : e.components || a
+            : i(e.components)),
+          s.createElement(o.Provider, { value: t }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/359ca393.e03a07f3.js b/docs/build/assets/js/359ca393.e03a07f3.js
new file mode 100644
index 0000000..1df24d3
--- /dev/null
+++ b/docs/build/assets/js/359ca393.e03a07f3.js
@@ -0,0 +1,9 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [241],
+  {
+    5745: s => {
+      s.exports = JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}');
+    },
+  },
+]);
diff --git a/docs/build/assets/js/39eaec8f.4f480351.js b/docs/build/assets/js/39eaec8f.4f480351.js
new file mode 100644
index 0000000..30454cf
--- /dev/null
+++ b/docs/build/assets/js/39eaec8f.4f480351.js
@@ -0,0 +1,415 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [873],
+  {
+    2783: (e, r, n) => {
+      n.r(r),
+        n.d(r, {
+          assets: () => N,
+          contentTitle: () => E,
+          default: () => C,
+          frontMatter: () => V,
+          metadata: () => T,
+          toc: () => _,
+        });
+      var t = n(5893),
+        a = n(1151),
+        i = n(7294),
+        l = n(512),
+        o = n(2466),
+        s = n(6550),
+        u = n(469),
+        c = n(1980),
+        d = n(7392),
+        h = n(12);
+      function p(e) {
+        return (
+          i.Children.toArray(e)
+            .filter(e => '\n' !== e)
+            .map(e => {
+              if (
+                !e ||
+                ((0, i.isValidElement)(e) &&
+                  (function (e) {
+                    const { props: r } = e;
+                    return !!r && 'object' == typeof r && 'value' in r;
+                  })(e))
+              )
+                return e;
+              throw new Error(
+                `Docusaurus error: Bad <Tabs> child <${'string' == typeof e.type ? e.type : e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
+              );
+            })
+            ?.filter(Boolean) ?? []
+        );
+      }
+      function m(e) {
+        const { values: r, children: n } = e;
+        return (0, i.useMemo)(() => {
+          const e =
+            r ??
+            (function (e) {
+              return p(e).map(e => {
+                let {
+                  props: { value: r, label: n, attributes: t, default: a },
+                } = e;
+                return { value: r, label: n, attributes: t, default: a };
+              });
+            })(n);
+          return (
+            (function (e) {
+              const r = (0, d.l)(e, (e, r) => e.value === r.value);
+              if (r.length > 0)
+                throw new Error(
+                  `Docusaurus error: Duplicate values "${r.map(e => e.value).join(', ')}" found in <Tabs>. Every value needs to be unique.`,
+                );
+            })(e),
+            e
+          );
+        }, [r, n]);
+      }
+      function f(e) {
+        let { value: r, tabValues: n } = e;
+        return n.some(e => e.value === r);
+      }
+      function v(e) {
+        let { queryString: r = !1, groupId: n } = e;
+        const t = (0, s.k6)(),
+          a = (function (e) {
+            let { queryString: r = !1, groupId: n } = e;
+            if ('string' == typeof r) return r;
+            if (!1 === r) return null;
+            if (!0 === r && !n)
+              throw new Error(
+                'Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".',
+              );
+            return n ?? null;
+          })({ queryString: r, groupId: n });
+        return [
+          (0, c._X)(a),
+          (0, i.useCallback)(
+            e => {
+              if (!a) return;
+              const r = new URLSearchParams(t.location.search);
+              r.set(a, e), t.replace({ ...t.location, search: r.toString() });
+            },
+            [a, t],
+          ),
+        ];
+      }
+      function b(e) {
+        const { defaultValue: r, queryString: n = !1, groupId: t } = e,
+          a = m(e),
+          [l, o] = (0, i.useState)(() =>
+            (function (e) {
+              let { defaultValue: r, tabValues: n } = e;
+              if (0 === n.length)
+                throw new Error('Docusaurus error: the <Tabs> component requires at least one <TabItem> children component');
+              if (r) {
+                if (!f({ value: r, tabValues: n }))
+                  throw new Error(
+                    `Docusaurus error: The <Tabs> has a defaultValue "${r}" but none of its children has the corresponding value. Available values are: ${n.map(e => e.value).join(', ')}. If you intend to show no default tab, use defaultValue={null} instead.`,
+                  );
+                return r;
+              }
+              const t = n.find(e => e.default) ?? n[0];
+              if (!t) throw new Error('Unexpected error: 0 tabValues');
+              return t.value;
+            })({ defaultValue: r, tabValues: a }),
+          ),
+          [s, c] = v({ queryString: n, groupId: t }),
+          [d, p] = (function (e) {
+            let { groupId: r } = e;
+            const n = (function (e) {
+                return e ? `docusaurus.tab.${e}` : null;
+              })(r),
+              [t, a] = (0, h.Nk)(n);
+            return [
+              t,
+              (0, i.useCallback)(
+                e => {
+                  n && a.set(e);
+                },
+                [n, a],
+              ),
+            ];
+          })({ groupId: t }),
+          b = (() => {
+            const e = s ?? d;
+            return f({ value: e, tabValues: a }) ? e : null;
+          })();
+        (0, u.Z)(() => {
+          b && o(b);
+        }, [b]);
+        return {
+          selectedValue: l,
+          selectValue: (0, i.useCallback)(
+            e => {
+              if (!f({ value: e, tabValues: a })) throw new Error(`Can't select invalid tab value=${e}`);
+              o(e), c(e), p(e);
+            },
+            [c, p, a],
+          ),
+          tabValues: a,
+        };
+      }
+      var g = n(2389);
+      const x = { tabList: 'tabList__CuJ', tabItem: 'tabItem_LNqP' };
+      function j(e) {
+        let { className: r, block: n, selectedValue: a, selectValue: i, tabValues: s } = e;
+        const u = [],
+          { blockElementScrollPositionUntilNextRender: c } = (0, o.o5)(),
+          d = e => {
+            const r = e.currentTarget,
+              n = u.indexOf(r),
+              t = s[n].value;
+            t !== a && (c(r), i(t));
+          },
+          h = e => {
+            let r = null;
+            switch (e.key) {
+              case 'Enter':
+                d(e);
+                break;
+              case 'ArrowRight': {
+                const n = u.indexOf(e.currentTarget) + 1;
+                r = u[n] ?? u[0];
+                break;
+              }
+              case 'ArrowLeft': {
+                const n = u.indexOf(e.currentTarget) - 1;
+                r = u[n] ?? u[u.length - 1];
+                break;
+              }
+            }
+            r?.focus();
+          };
+        return (0, t.jsx)('ul', {
+          role: 'tablist',
+          'aria-orientation': 'horizontal',
+          className: (0, l.Z)('tabs', { 'tabs--block': n }, r),
+          children: s.map(e => {
+            let { value: r, label: n, attributes: i } = e;
+            return (0, t.jsx)(
+              'li',
+              {
+                role: 'tab',
+                tabIndex: a === r ? 0 : -1,
+                'aria-selected': a === r,
+                ref: e => u.push(e),
+                onKeyDown: h,
+                onClick: d,
+                ...i,
+                className: (0, l.Z)('tabs__item', x.tabItem, i?.className, { 'tabs__item--active': a === r }),
+                children: n ?? r,
+              },
+              r,
+            );
+          }),
+        });
+      }
+      function w(e) {
+        let { lazy: r, children: n, selectedValue: a } = e;
+        const l = (Array.isArray(n) ? n : [n]).filter(Boolean);
+        if (r) {
+          const e = l.find(e => e.props.value === a);
+          return e ? (0, i.cloneElement)(e, { className: 'margin-top--md' }) : null;
+        }
+        return (0, t.jsx)('div', {
+          className: 'margin-top--md',
+          children: l.map((e, r) => (0, i.cloneElement)(e, { key: r, hidden: e.props.value !== a })),
+        });
+      }
+      function y(e) {
+        const r = b(e);
+        return (0, t.jsxs)('div', {
+          className: (0, l.Z)('tabs-container', x.tabList),
+          children: [(0, t.jsx)(j, { ...e, ...r }), (0, t.jsx)(w, { ...e, ...r })],
+        });
+      }
+      function k(e) {
+        const r = (0, g.Z)();
+        return (0, t.jsx)(y, { ...e, children: p(e.children) }, String(r));
+      }
+      const I = { tabItem: 'tabItem_Ymn6' };
+      function q(e) {
+        let { children: r, hidden: n, className: a } = e;
+        return (0, t.jsx)('div', { role: 'tabpanel', className: (0, l.Z)(I.tabItem, a), hidden: n, children: r });
+      }
+      const V = { sidebar_label: 'Installation', sidebar_position: 2 },
+        E = void 0,
+        T = {
+          id: 'Installation',
+          title: 'Installation',
+          description: 'Prerequisites',
+          source: '@site/docs/Installation.mdx',
+          sourceDirName: '.',
+          slug: '/Installation',
+          permalink: '/reanimated-color-picker/docs/Installation',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 2,
+          frontMatter: { sidebar_label: 'Installation', sidebar_position: 2 },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Introduction', permalink: '/reanimated-color-picker/docs/intro' },
+          next: { title: 'Usage', permalink: '/reanimated-color-picker/docs/Usage' },
+        },
+        N = {},
+        _ = [
+          { value: 'Prerequisites', id: 'prerequisites', level: 2 },
+          {
+            value: 'react-native-reanimated version <code>2.0.0</code> or higher.',
+            id: 'react-native-reanimated-version-200-or-higher',
+            level: 3,
+          },
+          {
+            value: 'react-native-gesture-handler version <code>2.0.0</code> or higher.',
+            id: 'react-native-gesture-handler-version-200-or-higher',
+            level: 3,
+          },
+          {
+            value: 'Expo managed workflow version <code>44</code> or higher is required.',
+            id: 'expo-managed-workflow-version-44-or-higher-is-required',
+            level: 4,
+          },
+          { value: 'Installation', id: 'installation', level: 2 },
+        ];
+      function S(e) {
+        const r = {
+          a: 'a',
+          admonition: 'admonition',
+          code: 'code',
+          h2: 'h2',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          ul: 'ul',
+          ...(0, a.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(r.h2, { id: 'prerequisites', children: 'Prerequisites' }),
+            '\n',
+            (0, t.jsxs)(r.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(r.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsxs)(r.h3, {
+                      id: 'react-native-reanimated-version-200-or-higher',
+                      children: [
+                        (0, t.jsx)(r.a, {
+                          href: 'https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation',
+                          children: 'react-native-reanimated',
+                        }),
+                        ' version ',
+                        (0, t.jsx)(r.code, { children: '2.0.0' }),
+                        ' or higher.',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, t.jsxs)(r.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsxs)(r.h3, {
+                      id: 'react-native-gesture-handler-version-200-or-higher',
+                      children: [
+                        (0, t.jsx)(r.a, {
+                          href: 'https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation',
+                          children: 'react-native-gesture-handler',
+                        }),
+                        ' version ',
+                        (0, t.jsx)(r.code, { children: '2.0.0' }),
+                        ' or higher.',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(r.admonition, {
+              title: 'For Expo users',
+              type: 'info',
+              children: (0, t.jsxs)(r.h4, {
+                id: 'expo-managed-workflow-version-44-or-higher-is-required',
+                children: [
+                  (0, t.jsx)(r.a, { href: 'https://docs.expo.dev/get-started/installation/', children: 'Expo managed workflow' }),
+                  ' version ',
+                  (0, t.jsx)(r.code, { children: '44' }),
+                  ' or higher is required.',
+                ],
+              }),
+            }),
+            '\n',
+            (0, t.jsx)(r.h2, { id: 'installation', children: 'Installation' }),
+            '\n',
+            (0, t.jsxs)(r.ul, {
+              children: ['\n', (0, t.jsx)(r.li, { children: 'Open a Terminal in the project root and run:' }), '\n'],
+            }),
+            '\n',
+            (0, t.jsxs)(k, {
+              children: [
+                (0, t.jsx)(q, {
+                  value: 'npm',
+                  label: 'npm',
+                  default: !0,
+                  children: (0, t.jsx)(r.pre, {
+                    children: (0, t.jsx)(r.code, { className: 'language-cli', children: 'npm i reanimated-color-picker\n' }),
+                  }),
+                }),
+                (0, t.jsx)(q, {
+                  value: 'yarn',
+                  label: 'yarn',
+                  children: (0, t.jsx)(r.pre, {
+                    children: (0, t.jsx)(r.code, { className: 'language-cli', children: 'yarn add reanimated-color-picker\n' }),
+                  }),
+                }),
+              ],
+            }),
+          ],
+        });
+      }
+      function C(e = {}) {
+        const { wrapper: r } = { ...(0, a.a)(), ...e.components };
+        return r ? (0, t.jsx)(r, { ...e, children: (0, t.jsx)(S, { ...e }) }) : S(e);
+      }
+    },
+    1151: (e, r, n) => {
+      n.d(r, { Z: () => o, a: () => l });
+      var t = n(7294);
+      const a = {},
+        i = t.createContext(a);
+      function l(e) {
+        const r = t.useContext(i);
+        return t.useMemo(
+          function () {
+            return 'function' == typeof e ? e(r) : { ...r, ...e };
+          },
+          [r, e],
+        );
+      }
+      function o(e) {
+        let r;
+        return (
+          (r = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(a)
+              : e.components || a
+            : l(e.components)),
+          t.createElement(i.Provider, { value: r }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/39eaec8f.fa4a8b07.js b/docs/build/assets/js/39eaec8f.fa4a8b07.js
deleted file mode 100644
index 09e32c2..0000000
--- a/docs/build/assets/js/39eaec8f.fa4a8b07.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[91],{7187:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>T,contentTitle:()=>N,default:()=>A,frontMatter:()=>E,metadata:()=>t,toc:()=>_});const t=JSON.parse('{"id":"Installation","title":"Installation","description":"Prerequisites","source":"@site/docs/Installation.mdx","sourceDirName":".","slug":"/Installation","permalink":"/reanimated-color-picker/docs/Installation","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_label":"Installation","sidebar_position":2},"sidebar":"tutorialSidebar","previous":{"title":"Introduction","permalink":"/reanimated-color-picker/docs/intro"},"next":{"title":"Usage","permalink":"/reanimated-color-picker/docs/Usage"}}');var a=n(4848),i=n(8453),s=n(6540),o=n(4164),l=n(3104),u=n(6347),c=n(205),d=n(7485),h=n(1682),p=n(679);function m(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:r}=e;return!!r&&"object"==typeof r&&"value"in r}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function f(e){const{values:r,children:n}=e;return(0,s.useMemo)((()=>{const e=r??function(e){return m(e).map((({props:{value:e,label:r,attributes:n,default:t}})=>({value:e,label:r,attributes:n,default:t})))}(n);return function(e){const r=(0,h.XI)(e,((e,r)=>e.value===r.value));if(r.length>0)throw new Error(`Docusaurus error: Duplicate values "${r.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[r,n])}function v({value:e,tabValues:r}){return r.some((r=>r.value===e))}function b({queryString:e=!1,groupId:r}){const n=(0,u.W6)(),t=function({queryString:e=!1,groupId:r}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!r)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return r??null}({queryString:e,groupId:r});return[(0,d.aZ)(t),(0,s.useCallback)((e=>{if(!t)return;const r=new URLSearchParams(n.location.search);r.set(t,e),n.replace({...n.location,search:r.toString()})}),[t,n])]}function g(e){const{defaultValue:r,queryString:n=!1,groupId:t}=e,a=f(e),[i,o]=(0,s.useState)((()=>function({defaultValue:e,tabValues:r}){if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!v({value:e,tabValues:r}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${r.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const n=r.find((e=>e.default))??r[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:r,tabValues:a}))),[l,u]=b({queryString:n,groupId:t}),[d,h]=function({groupId:e}){const r=function(e){return e?`docusaurus.tab.${e}`:null}(e),[n,t]=(0,p.Dv)(r);return[n,(0,s.useCallback)((e=>{r&&t.set(e)}),[r,t])]}({groupId:t}),m=(()=>{const e=l??d;return v({value:e,tabValues:a})?e:null})();(0,c.A)((()=>{m&&o(m)}),[m]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!v({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),u(e),h(e)}),[u,h,a]),tabValues:a}}var x=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function w({className:e,block:r,selectedValue:n,selectValue:t,tabValues:i}){const s=[],{blockElementScrollPositionUntilNextRender:u}=(0,l.a_)(),c=e=>{const r=e.currentTarget,a=s.indexOf(r),o=i[a].value;o!==n&&(u(r),t(o))},d=e=>{let r=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=s.indexOf(e.currentTarget)+1;r=s[n]??s[0];break}case"ArrowLeft":{const n=s.indexOf(e.currentTarget)-1;r=s[n]??s[s.length-1];break}}r?.focus()};return(0,a.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.A)("tabs",{"tabs--block":r},e),children:i.map((({value:e,label:r,attributes:t})=>(0,a.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{s.push(e)},onKeyDown:d,onClick:c,...t,className:(0,o.A)("tabs__item",j.tabItem,t?.className,{"tabs__item--active":n===e}),children:r??e},e)))})}function y({lazy:e,children:r,selectedValue:n}){const t=(Array.isArray(r)?r:[r]).filter(Boolean);if(e){const e=t.find((e=>e.props.value===n));return e?(0,s.cloneElement)(e,{className:(0,o.A)("margin-top--md",e.props.className)}):null}return(0,a.jsx)("div",{className:"margin-top--md",children:t.map(((e,r)=>(0,s.cloneElement)(e,{key:r,hidden:e.props.value!==n})))})}function I(e){const r=g(e);return(0,a.jsxs)("div",{className:(0,o.A)("tabs-container",j.tabList),children:[(0,a.jsx)(w,{...r,...e}),(0,a.jsx)(y,{...r,...e})]})}function k(e){const r=(0,x.A)();return(0,a.jsx)(I,{...e,children:m(e.children)},String(r))}const q={tabItem:"tabItem_Ymn6"};function V({children:e,hidden:r,className:n}){return(0,a.jsx)("div",{role:"tabpanel",className:(0,o.A)(q.tabItem,n),hidden:r,children:e})}const E={sidebar_label:"Installation",sidebar_position:2},N=void 0,T={},_=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"react-native-reanimated version <code>2.0.0</code> or higher.",id:"react-native-reanimated-version-200-or-higher",level:3},{value:"react-native-gesture-handler version <code>2.0.0</code> or higher.",id:"react-native-gesture-handler-version-200-or-higher",level:3},{value:"Expo managed workflow version <code>44</code> or higher is required.",id:"expo-managed-workflow-version-44-or-higher-is-required",level:4},{value:"Installation",id:"installation",level:2}];function S(e){const r={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsxs)(r.li,{children:["\n",(0,a.jsxs)(r.h3,{id:"react-native-reanimated-version-200-or-higher",children:[(0,a.jsx)(r.a,{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation",children:"react-native-reanimated"})," version ",(0,a.jsx)(r.code,{children:"2.0.0"})," or higher."]}),"\n"]}),"\n",(0,a.jsxs)(r.li,{children:["\n",(0,a.jsxs)(r.h3,{id:"react-native-gesture-handler-version-200-or-higher",children:[(0,a.jsx)(r.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/docs/installation",children:"react-native-gesture-handler"})," version ",(0,a.jsx)(r.code,{children:"2.0.0"})," or higher."]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(r.admonition,{title:"For Expo users",type:"info",children:(0,a.jsxs)(r.h4,{id:"expo-managed-workflow-version-44-or-higher-is-required",children:[(0,a.jsx)(r.a,{href:"https://docs.expo.dev/get-started/installation/",children:"Expo managed workflow"})," version ",(0,a.jsx)(r.code,{children:"44"})," or higher is required."]})}),"\n",(0,a.jsx)(r.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(r.ul,{children:["\n",(0,a.jsx)(r.li,{children:"Open a Terminal in the project root and run:"}),"\n"]}),"\n",(0,a.jsxs)(k,{children:[(0,a.jsx)(V,{value:"npm",label:"npm",default:!0,children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-cli",children:"npm i reanimated-color-picker\n"})})}),(0,a.jsx)(V,{value:"yarn",label:"yarn",children:(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-cli",children:"yarn add reanimated-color-picker\n"})})})]})]})}function A(e={}){const{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,a.jsx)(r,{...e,children:(0,a.jsx)(S,{...e})}):S(e)}},8453:(e,r,n)=>{n.d(r,{R:()=>s,x:()=>o});var t=n(6540);const a={},i=t.createContext(a);function s(e){const r=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function o(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),t.createElement(i.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/42602a95.2fa4cfe2.js b/docs/build/assets/js/42602a95.2fa4cfe2.js
deleted file mode 100644
index 78dfa1f..0000000
--- a/docs/build/assets/js/42602a95.2fa4cfe2.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[202],{2308:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Hue","description":"API documentation for Hue Slider components","slug":"/category/hue","permalink":"/reanimated-color-picker/docs/category/hue","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"Sliders","permalink":"/reanimated-color-picker/docs/category/sliders"},"next":{"title":"HueSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/4bdabec4.40ea22e5.js b/docs/build/assets/js/4bdabec4.40ea22e5.js
new file mode 100644
index 0000000..fe666b5
--- /dev/null
+++ b/docs/build/assets/js/4bdabec4.40ea22e5.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [202],
+  {
+    8920: e => {
+      e.exports = JSON.parse(
+        '{"title":"Preview","description":"API documentation for Preview components","slug":"/category/preview","permalink":"/reanimated-color-picker/docs/category/preview","navigation":{"previous":{"title":"OpacitySlider","permalink":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider"},"next":{"title":"Preview","permalink":"/reanimated-color-picker/docs/API/Preview/"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/56316f3f.075f3cb7.js b/docs/build/assets/js/56316f3f.075f3cb7.js
deleted file mode 100644
index fb5c728..0000000
--- a/docs/build/assets/js/56316f3f.075f3cb7.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[541],{5448:(e,i,n)=>{n.r(i),n.d(i,{assets:()=>s,contentTitle:()=>c,default:()=>h,frontMatter:()=>d,metadata:()=>t,toc:()=>o});const t=JSON.parse('{"id":"API/Preview/Preview","title":"<Preview />","description":"The preview of the selected and the initial color.","source":"@site/docs/API/Preview/Preview.md","sourceDirName":"API/Preview","slug":"/API/Preview/","permalink":"/reanimated-color-picker/docs/API/Preview/","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":0,"frontMatter":{"sidebar_position":0,"sidebar_label":"Preview","description":"The preview of the selected and the initial color."},"sidebar":"tutorialSidebar","previous":{"title":"Preview","permalink":"/reanimated-color-picker/docs/category/preview"},"next":{"title":"PreviewText","permalink":"/reanimated-color-picker/docs/API/Preview/PreviewText"}}');var l=n(4848),r=n(8453);const d={sidebar_position:0,sidebar_label:"Preview",description:"The preview of the selected and the initial color."},c="<Preview />",s={},o=[{value:"Props",id:"props",level:2},{value:"<code>colorFormat</code>",id:"colorformat",level:3},{value:"<code>hideInitialColor</code>",id:"hideinitialcolor",level:3},{value:"<code>hideText</code>",id:"hidetext",level:3},{value:"<code>disableOpacityTexture</code>",id:"disableopacitytexture",level:3},{value:"<code>style</code>",id:"style",level:3},{value:"<code>textStyle</code>",id:"textstyle",level:3}];function a(e){const i={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components},{Formats:t}=i;return t||function(e,i){throw new Error("Expected "+(i?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Formats",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.header,{children:(0,l.jsx)(i.h1,{id:"preview-",children:(0,l.jsx)(i.code,{children:"<Preview />"})})}),"\n",(0,l.jsx)(i.p,{children:(0,l.jsx)(i.img,{alt:"preview",src:n(5994).A+"",width:"300",height:"50"})}),"\n",(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"The preview of the selected and the initial color."}),"\n"]}),"\n",(0,l.jsx)(i.admonition,{type:"tip",children:(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsxs)(i.li,{children:["If you want only the preview text, you can use the ",(0,l.jsx)(i.a,{href:"./PreviewText",children:(0,l.jsx)(i.code,{children:"<PreviewText />"})})," component."]}),"\n"]})}),"\n",(0,l.jsx)(i.h2,{id:"props",children:"Props"}),"\n",(0,l.jsx)(i.h3,{id:"colorformat",children:(0,l.jsx)(i.code,{children:"colorFormat"})}),"\n",(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"Preview color's format."}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"type: string"})}),"\n",(0,l.jsxs)(i.li,{children:[(0,l.jsx)(i.code,{children:"values:"}),(0,l.jsx)(t,{})]}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"default: 'hex'"})}),"\n"]}),"\n",(0,l.jsx)(i.h3,{id:"hideinitialcolor",children:(0,l.jsx)(i.code,{children:"hideInitialColor"})}),"\n",(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"Hide the initial color preview part."}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(i.h3,{id:"hidetext",children:(0,l.jsx)(i.code,{children:"hideText"})}),"\n",(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"Hide preview texts."}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(i.h3,{id:"disableopacitytexture",children:(0,l.jsx)(i.code,{children:"disableOpacityTexture"})}),"\n",(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"Hide the preview background texture image that appears when the color has an opacity less than 1."}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(i.h3,{id:"style",children:(0,l.jsx)(i.code,{children:"style"})}),"\n",(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"Preview container style."}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(i.admonition,{title:"note",type:"info",children:(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"Certain style properties will be overridden."}),"\n"]})}),"\n",(0,l.jsx)(i.h3,{id:"textstyle",children:(0,l.jsx)(i.code,{children:"textStyle"})}),"\n",(0,l.jsxs)(i.ul,{children:["\n",(0,l.jsx)(i.li,{children:"Preview texts style."}),"\n",(0,l.jsx)(i.li,{children:(0,l.jsx)(i.code,{children:"type: TextStyle"})}),"\n"]})]})}function h(e={}){const{wrapper:i}={...(0,r.R)(),...e.components};return i?(0,l.jsx)(i,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}},5994:(e,i,n)=>{n.d(i,{A:()=>t});const t="data:image/png;base64,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"},8453:(e,i,n)=>{n.d(i,{R:()=>d,x:()=>c});var t=n(6540);const l={},r=t.createContext(l);function d(e){const i=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function c(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:d(e.components),t.createElement(r.Provider,{value:i},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/56316f3f.45150f4e.js b/docs/build/assets/js/56316f3f.45150f4e.js
new file mode 100644
index 0000000..b587017
--- /dev/null
+++ b/docs/build/assets/js/56316f3f.45150f4e.js
@@ -0,0 +1,248 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [257],
+  {
+    280: (e, i, n) => {
+      n.r(i),
+        n.d(i, {
+          assets: () => o,
+          contentTitle: () => d,
+          default: () => h,
+          frontMatter: () => r,
+          metadata: () => c,
+          toc: () => s,
+        });
+      var t = n(5893),
+        l = n(1151);
+      const r = {
+          sidebar_position: 0,
+          sidebar_label: 'Preview',
+          description: 'The preview of the selected and the initial color.',
+        },
+        d = '<Preview />',
+        c = {
+          id: 'API/Preview/Preview',
+          title: '<Preview />',
+          description: 'The preview of the selected and the initial color.',
+          source: '@site/docs/API/Preview/Preview.md',
+          sourceDirName: 'API/Preview',
+          slug: '/API/Preview/',
+          permalink: '/reanimated-color-picker/docs/API/Preview/',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 0,
+          frontMatter: {
+            sidebar_position: 0,
+            sidebar_label: 'Preview',
+            description: 'The preview of the selected and the initial color.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Preview', permalink: '/reanimated-color-picker/docs/category/preview' },
+          next: { title: 'PreviewText', permalink: '/reanimated-color-picker/docs/API/Preview/PreviewText' },
+        },
+        o = {},
+        s = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>colorFormat</code>', id: 'colorformat', level: 3 },
+          { value: '<code>hideInitialColor</code>', id: 'hideinitialcolor', level: 3 },
+          { value: '<code>hideText</code>', id: 'hidetext', level: 3 },
+          { value: '<code>disableOpacityTexture</code>', id: 'disableopacitytexture', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+          { value: '<code>textStyle</code>', id: 'textstyle', level: 3 },
+        ];
+      function a(e) {
+        const i = {
+            a: 'a',
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            p: 'p',
+            ul: 'ul',
+            ...(0, l.a)(),
+            ...e.components,
+          },
+          { Formats: r } = i;
+        return (
+          r ||
+            (function (e, i) {
+              throw new Error(
+                'Expected ' +
+                  (i ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Formats', !0),
+          (0, t.jsxs)(t.Fragment, {
+            children: [
+              (0, t.jsx)(i.h1, { id: 'preview-', children: (0, t.jsx)(i.code, { children: '<Preview />' }) }),
+              '\n',
+              (0, t.jsx)(i.p, {
+                children: (0, t.jsx)(i.img, { alt: 'preview', src: n(4783).Z + '', width: '300', height: '50' }),
+              }),
+              '\n',
+              (0, t.jsxs)(i.ul, {
+                children: ['\n', (0, t.jsx)(i.li, { children: 'The preview of the selected and the initial color.' }), '\n'],
+              }),
+              '\n',
+              (0, t.jsx)(i.admonition, {
+                type: 'tip',
+                children: (0, t.jsxs)(i.ul, {
+                  children: [
+                    '\n',
+                    (0, t.jsxs)(i.li, {
+                      children: [
+                        'If you want only the preview text, you can use the ',
+                        (0, t.jsx)(i.a, { href: './PreviewText', children: (0, t.jsx)(i.code, { children: '<PreviewText />' }) }),
+                        ' component.',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, t.jsx)(i.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, t.jsx)(i.h3, { id: 'colorformat', children: (0, t.jsx)(i.code, { children: 'colorFormat' }) }),
+              '\n',
+              (0, t.jsxs)(i.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(i.li, { children: "Preview color's format." }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsxs)(i.li, { children: [(0, t.jsx)(i.code, { children: 'values:' }), (0, t.jsx)(r, {})] }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: "default: 'hex'" }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(i.h3, { id: 'hideinitialcolor', children: (0, t.jsx)(i.code, { children: 'hideInitialColor' }) }),
+              '\n',
+              (0, t.jsxs)(i.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(i.li, { children: 'Hide the initial color preview part.' }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(i.h3, { id: 'hidetext', children: (0, t.jsx)(i.code, { children: 'hideText' }) }),
+              '\n',
+              (0, t.jsxs)(i.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(i.li, { children: 'Hide preview texts.' }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(i.h3, {
+                id: 'disableopacitytexture',
+                children: (0, t.jsx)(i.code, { children: 'disableOpacityTexture' }),
+              }),
+              '\n',
+              (0, t.jsxs)(i.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(i.li, {
+                    children: 'Hide the preview background texture image that appears when the color has an opacity less than 1.',
+                  }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(i.h3, { id: 'style', children: (0, t.jsx)(i.code, { children: 'style' }) }),
+              '\n',
+              (0, t.jsxs)(i.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(i.li, { children: 'Preview container style.' }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(i.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, t.jsxs)(i.ul, {
+                  children: ['\n', (0, t.jsx)(i.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+              '\n',
+              (0, t.jsx)(i.h3, { id: 'textstyle', children: (0, t.jsx)(i.code, { children: 'textStyle' }) }),
+              '\n',
+              (0, t.jsxs)(i.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(i.li, { children: 'Preview texts style.' }),
+                  '\n',
+                  (0, t.jsx)(i.li, { children: (0, t.jsx)(i.code, { children: 'type: TextStyle' }) }),
+                  '\n',
+                ],
+              }),
+            ],
+          })
+        );
+      }
+      function h(e = {}) {
+        const { wrapper: i } = { ...(0, l.a)(), ...e.components };
+        return i ? (0, t.jsx)(i, { ...e, children: (0, t.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    4783: (e, i, n) => {
+      n.d(i, { Z: () => t });
+      const t =
+        'data:image/png;base64,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';
+    },
+    1151: (e, i, n) => {
+      n.d(i, { Z: () => c, a: () => d });
+      var t = n(7294);
+      const l = {},
+        r = t.createContext(l);
+      function d(e) {
+        const i = t.useContext(r);
+        return t.useMemo(
+          function () {
+            return 'function' == typeof e ? e(i) : { ...i, ...e };
+          },
+          [i, e],
+        );
+      }
+      function c(e) {
+        let i;
+        return (
+          (i = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(l)
+              : e.components || l
+            : d(e.components)),
+          t.createElement(r.Provider, { value: i }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/58a57edf.072ec09f.js b/docs/build/assets/js/58a57edf.072ec09f.js
deleted file mode 100644
index dfaf396..0000000
--- a/docs/build/assets/js/58a57edf.072ec09f.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[888],{5529:(e,n,i)=>{i.d(n,{Ay:()=>s,RM:()=>t});var l=i(4848),d=i(8453);const t=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function r(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(r,{...e})}):r(e)}},7275:(e,n,i)=>{i.d(n,{A:()=>l});const l="data:image/png;base64,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"},7793:(e,n,i)=>{i.d(n,{A:()=>l});const l="data:image/png;base64,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"},7869:(e,n,i)=>{i.d(n,{Ay:()=>c,RM:()=>r});var l=i(4848),d=i(8453),t=i(5529);const r=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...t.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,d.R)(),...e.components},{Shapes:r}=n;return r||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"boundedthumb",children:(0,l.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"boundedThumb",src:i(7793).A+"",width:"180",height:"130"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbsize",children:(0,l.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbcolor",children:(0,l.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,l.jsxs)(n.admonition,{type:"info",children:[(0,l.jsx)(n.mdxAdmonitionTitle,{children:(0,l.jsx)(n.strong,{children:"*interactive"})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,l.jsx)(n.h3,{id:"sliderthickness",children:(0,l.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["The thickness is the ",(0,l.jsx)(n.code,{children:"width"})," of the slider in ",(0,l.jsx)(n.code,{children:"vertical"})," mode or the ",(0,l.jsx)(n.code,{children:"height"})," in ",(0,l.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbshape",children:(0,l.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"values:"}),(0,l.jsx)(r,{})]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbstyle",children:(0,l.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,l.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,l.jsx)(t.Ay,{}),"\n",(0,l.jsx)(n.h3,{id:"reverse",children:(0,l.jsx)(n.code,{children:"reverse"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"vertical",children:(0,l.jsx)(n.code,{children:"vertical"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"gestures",children:(0,l.jsx)(n.code,{children:"gestures"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,l.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,l.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"style",children:(0,l.jsx)(n.code,{children:"style"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{title:"note",type:"info",children:(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(s,{...e})}):s(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>s});var l=i(6540);const d={},t=l.createContext(d);function r(e){const n=l.useContext(t);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:r(e.components),l.createElement(t.Provider,{value:n},e.children)}},8883:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>j,frontMatter:()=>s,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"API/Sliders/RGB/RedSlider","title":"<RedSlider />","description":"A slider to change the color\'s red channel.","source":"@site/docs/API/Sliders/RGB/RedSlider.mdx","sourceDirName":"API/Sliders/RGB","slug":"/API/Sliders/RGB/RedSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6,"sidebar_label":"RedSlider","description":"A slider to change the color\'s red channel."},"sidebar":"tutorialSidebar","previous":{"title":"RGB","permalink":"/reanimated-color-picker/docs/category/rgb"},"next":{"title":"GreenSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"}}');var d=i(4848),t=i(8453),r=i(7869);const s={sidebar_position:6,sidebar_label:"RedSlider",description:"A slider to change the color's red channel."},c="<RedSlider />",h={},o=[{value:"A slider to change the color&#39;s red channel.",id:"a-slider-to-change-the-colors-red-channel",level:3},{value:"Props",id:"props",level:2},...r.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,t.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"redslider-",children:(0,d.jsx)(n.code,{children:"<RedSlider />"})})}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"red",src:i(7275).A+"",width:"256",height:"40"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsx)(n.h3,{id:"a-slider-to-change-the-colors-red-channel",children:"A slider to change the color's red channel."}),"\n"]}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"props",children:"Props"}),"\n","\n",(0,d.jsx)(r.Ay,{})]})}function j(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/58a57edf.66c25246.js b/docs/build/assets/js/58a57edf.66c25246.js
new file mode 100644
index 0000000..5a11aad
--- /dev/null
+++ b/docs/build/assets/js/58a57edf.66c25246.js
@@ -0,0 +1,610 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [943],
+  {
+    1087: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => c,
+          contentTitle: () => s,
+          default: () => x,
+          frontMatter: () => r,
+          metadata: () => h,
+          toc: () => o,
+        });
+      var l = i(5893),
+        t = i(1151),
+        d = i(51);
+      const r = { sidebar_position: 6, sidebar_label: 'RedSlider', description: "A slider to change the color's red channel." },
+        s = '<RedSlider />',
+        h = {
+          id: 'API/Sliders/RGB/RedSlider',
+          title: '<RedSlider />',
+          description: "A slider to change the color's red channel.",
+          source: '@site/docs/API/Sliders/RGB/RedSlider.mdx',
+          sourceDirName: 'API/Sliders/RGB',
+          slug: '/API/Sliders/RGB/RedSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 6,
+          frontMatter: {
+            sidebar_position: 6,
+            sidebar_label: 'RedSlider',
+            description: "A slider to change the color's red channel.",
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'RGB', permalink: '/reanimated-color-picker/docs/category/rgb' },
+          next: { title: 'GreenSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider' },
+        },
+        c = {},
+        o = [
+          { value: 'A slider to change the color&#39;s red channel.', id: 'a-slider-to-change-the-colors-red-channel', level: 3 },
+          { value: 'Props', id: 'props', level: 2 },
+        ];
+      function j(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h1, { id: 'redslider-', children: (0, l.jsx)(n.code, { children: '<RedSlider />' }) }),
+            '\n',
+            (0, l.jsx)(n.p, { children: (0, l.jsx)(n.img, { alt: 'red', src: i(1146).Z + '', width: '256', height: '40' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, l.jsx)(n.h3, {
+                      id: 'a-slider-to-change-the-colors-red-channel',
+                      children: "A slider to change the color's red channel.",
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            '\n',
+            '\n',
+            (0, l.jsx)(d.ZP, {}),
+          ],
+        });
+      }
+      function x(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(j, { ...e }) }) : j(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => r });
+      var l = i(5893),
+        t = i(1151);
+      function d(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h4, { id: 'thumbprops', children: (0, l.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, l.jsxs)(n.table, {
+              children: [
+                (0, l.jsx)(n.thead, {
+                  children: (0, l.jsxs)(n.tr, {
+                    children: [
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, l.jsxs)(n.tbody, {
+                  children: [
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, l.jsx)(n.code, { children: 'width' }) }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, l.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, { children: ['\n', (0, l.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, l.jsx)(n.pre, {
+              children: (0, l.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function r(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    51: (e, n, i) => {
+      i.d(n, { ZP: () => s });
+      var l = i(5893),
+        t = i(1151),
+        d = i(435);
+      function r(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, t.a)(),
+            ...e.components,
+          },
+          { Shapes: r } = n;
+        return (
+          r ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, l.jsxs)(l.Fragment, {
+            children: [
+              (0, l.jsx)(n.h3, { id: 'boundedthumb', children: (0, l.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, l.jsx)(n.p, {
+                children: (0, l.jsx)(n.img, { alt: 'boundedThumb', src: i(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbsize', children: (0, l.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbcolor', children: (0, l.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, l.jsx)(n.mdxAdmonitionTitle, { children: (0, l.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, l.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'sliderthickness', children: (0, l.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, l.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, l.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, l.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, l.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbshape', children: (0, l.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'values:' }), (0, l.jsx)(r, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbstyle', children: (0, l.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, l.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, l.jsx)(d.ZP, {}),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'reverse', children: (0, l.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'vertical', children: (0, l.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'gestures', children: (0, l.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, l.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'style', children: (0, l.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, l.jsxs)(n.ul, {
+                  children: ['\n', (0, l.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    2737: (e, n, i) => {
+      i.d(n, { Z: () => l });
+      const l =
+        'data:image/png;base64,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';
+    },
+    1146: (e, n, i) => {
+      i.d(n, { Z: () => l });
+      const l =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => s, a: () => r });
+      var l = i(7294);
+      const t = {},
+        d = l.createContext(t);
+      function r(e) {
+        const n = l.useContext(d);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function s(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(t)
+              : e.components || t
+            : r(e.components)),
+          l.createElement(d.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/5de8bf0b.62db067d.js b/docs/build/assets/js/5de8bf0b.62db067d.js
new file mode 100644
index 0000000..3dc11bf
--- /dev/null
+++ b/docs/build/assets/js/5de8bf0b.62db067d.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [928],
+  {
+    9119: e => {
+      e.exports = JSON.parse(
+        '{"title":"RGB","description":"API documentation for RGB Slider components","slug":"/category/rgb","permalink":"/reanimated-color-picker/docs/category/rgb","navigation":{"previous":{"title":"LuminanceCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"},"next":{"title":"RedSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/5e95c892.1cff72b0.js b/docs/build/assets/js/5e95c892.1cff72b0.js
new file mode 100644
index 0000000..060dfc9
--- /dev/null
+++ b/docs/build/assets/js/5e95c892.1cff72b0.js
@@ -0,0 +1,22 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [661],
+  {
+    1892: (e, s, r) => {
+      r.r(s), r.d(s, { default: () => l });
+      r(7294);
+      var c = r(512),
+        u = r(1944),
+        a = r(5281),
+        d = r(8790),
+        n = r(6040),
+        t = r(5893);
+      function l(e) {
+        return (0, t.jsx)(u.FG, {
+          className: (0, c.Z)(a.k.wrapper.docsPages),
+          children: (0, t.jsx)(n.Z, { children: (0, d.H)(e.route.routes) }),
+        });
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/5e95c892.72fff1a5.js b/docs/build/assets/js/5e95c892.72fff1a5.js
deleted file mode 100644
index 7c4e6ac..0000000
--- a/docs/build/assets/js/5e95c892.72fff1a5.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[647],{7121:(e,s,r)=>{r.r(s),r.d(s,{default:()=>l});r(6540);var c=r(4164),u=r(5500),a=r(7559),d=r(2831),n=r(1656),t=r(4848);function l(e){return(0,t.jsx)(u.e3,{className:(0,c.A)(a.G.wrapper.docsPages),children:(0,t.jsx)(n.A,{children:(0,d.v)(e.route.routes)})})}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/63def8f5.84f1a65b.js b/docs/build/assets/js/63def8f5.84f1a65b.js
deleted file mode 100644
index 4708cbf..0000000
--- a/docs/build/assets/js/63def8f5.84f1a65b.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[574],{12:(e,n,t)=>{t.d(n,{A:()=>l});const l=t.p+"assets/images/panel3-saturation-dafb918fc53688c9bceef0165d7e545c.png"},1251:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>x,frontMatter:()=>d,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"API/Panels/Panel3","title":"<Panel3 />","description":"The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.","source":"@site/docs/API/Panels/Panel3.mdx","sourceDirName":"API/Panels","slug":"/API/Panels/Panel3","permalink":"/reanimated-color-picker/docs/API/Panels/Panel3","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3,"sidebar_label":"Panel3","description":"The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors."},"sidebar":"tutorialSidebar","previous":{"title":"Panel2","permalink":"/reanimated-color-picker/docs/API/Panels/Panel2"},"next":{"title":"Panel4","permalink":"/reanimated-color-picker/docs/API/Panels/Panel4"}}');var i=t(4848),s=t(8453),r=t(5529);const d={sidebar_position:3,sidebar_label:"Panel3",description:"The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors."},c="<Panel3 />",h={},o=[{value:"Props",id:"props",level:2},{value:"<code>centerChannel</code>",id:"centerchannel",level:3},{value:"<code>rotate</code>",id:"rotate",level:3},{value:"<code>renderCenterLine</code>",id:"rendercenterline",level:3},{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...r.RM,{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},{value:"<code>style</code>",id:"style",level:3}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components},{Shapes:l}=n;return l||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"panel3-",children:(0,i.jsx)(n.code,{children:"<Panel3 />"})})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:(0,i.jsx)(n.strong,{children:'center channel: "saturation"'})}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:(0,i.jsx)(n.strong,{children:'center channel: "brightness"'})}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:(0,i.jsx)(n.strong,{children:'center channel: "hsl-saturation"'})})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.img,{alt:"panel3-saturation",src:t(12).A+"",width:"200",height:"200"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.img,{alt:"panel3-brightness",src:t(6505).A+"",width:"200",height:"200"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.img,{alt:"panel3-hsl-saturation",src:t(1505).A+"",width:"200",height:"200"})})]})})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and (saturation or brightness) of colors."}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Move thumb (handle) around the center to change the color's hue."}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Move thumb (handle) away or toward the center to change the saturation or the brightness of the color, depending on the ",(0,i.jsx)(n.code,{children:"verticalChannel"})," prop.."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.p,{children:["If you want to give your users more control over the color selection, you can add another slider next to this one that adjusts the opposite channel. For example, if ",(0,i.jsx)(n.code,{children:"centerChannel"})," is ",(0,i.jsx)(n.code,{children:'"saturation"'}),", you can add a ",(0,i.jsx)(n.a,{href:"../Sliders/HSB/BrightnessSlider",children:(0,i.jsx)(n.code,{children:"<BrightnessSlider />"})})," slider, and vice versa."]})}),"\n",(0,i.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,i.jsx)(n.h3,{id:"centerchannel",children:(0,i.jsx)(n.code,{children:"centerChannel"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Determines which color channel to adjust when moving the thumb towards or away from the center of the circular slider."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:'type: "saturation" | "brightness" | "hsl-saturation"'})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:'default: "saturation"'})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"rotate",children:(0,i.jsx)(n.code,{children:"rotate"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Specify a degree of rotation for the hue circle"}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 0"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"rendercenterline",children:(0,i.jsx)(n.code,{children:"renderCenterLine"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Controls whether to render a line from the center of the panel to the thumb (handle)."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"boundedthumb",children:(0,i.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel."}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the panel."]}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"false"}),", part of it will be outside of the panel bounds."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbsize",children:(0,i.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Panel's handle (thumb) size (height*width)."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbcolor",children:(0,i.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change thumb's color."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"default"}),": interactive*"]}),"\n"]}),"\n",(0,i.jsxs)(n.admonition,{type:"info",children:[(0,i.jsx)(n.mdxAdmonitionTitle,{children:(0,i.jsx)(n.strong,{children:"*interactive"})}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The thumb color will be changed depending on the contrast ratio if no color value is passed."}),"\n"]})]}),"\n",(0,i.jsx)(n.h3,{id:"thumbshape",children:(0,i.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change thumb's shape and appearance."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"values"}),": ",(0,i.jsx)(l,{})]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 'ring'"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbstyle",children:(0,i.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,i.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,i.jsx)(r.Ay,{}),"\n",(0,i.jsx)(n.h3,{id:"gestures",children:(0,i.jsx)(n.code,{children:"gestures"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,i.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"adaptspectrum",children:(0,i.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"style",children:(0,i.jsx)(n.code,{children:"style"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Panel's container style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{title:"note",type:"info",children:(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function x(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1505:(e,n,t)=>{t.d(n,{A:()=>l});const l=t.p+"assets/images/panel3-hsl-saturation-d7bb5c9c7d0865bcf4c0f7bc60f91534.png"},5529:(e,n,t)=>{t.d(n,{Ay:()=>d,RM:()=>s});var l=t(4848),i=t(8453);const s=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function r(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function d(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(r,{...e})}):r(e)}},6505:(e,n,t)=>{t.d(n,{A:()=>l});const l=t.p+"assets/images/panel3-brightness-968159b4b60646446d28a458e40cf53b.png"},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>d});var l=t(6540);const i={},s=l.createContext(i);function r(e){const n=l.useContext(s);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),l.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/63def8f5.b163646c.js b/docs/build/assets/js/63def8f5.b163646c.js
new file mode 100644
index 0000000..a1cd761
--- /dev/null
+++ b/docs/build/assets/js/63def8f5.b163646c.js
@@ -0,0 +1,710 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [371],
+  {
+    6443: (e, n, t) => {
+      t.r(n),
+        t.d(n, {
+          assets: () => h,
+          contentTitle: () => d,
+          default: () => x,
+          frontMatter: () => r,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var l = t(5893),
+        i = t(1151),
+        s = t(435);
+      const r = {
+          sidebar_position: 3,
+          sidebar_label: 'Panel3',
+          description:
+            'The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.',
+        },
+        d = '<Panel3 />',
+        c = {
+          id: 'API/Panels/Panel3',
+          title: '<Panel3 />',
+          description:
+            'The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.',
+          source: '@site/docs/API/Panels/Panel3.mdx',
+          sourceDirName: 'API/Panels',
+          slug: '/API/Panels/Panel3',
+          permalink: '/reanimated-color-picker/docs/API/Panels/Panel3',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 3,
+          frontMatter: {
+            sidebar_position: 3,
+            sidebar_label: 'Panel3',
+            description:
+              'The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Panel2', permalink: '/reanimated-color-picker/docs/API/Panels/Panel2' },
+          next: { title: 'Panel4', permalink: '/reanimated-color-picker/docs/API/Panels/Panel4' },
+        },
+        h = {},
+        o = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>centerChannel</code>', id: 'centerchannel', level: 3 },
+          { value: '<code>rotate</code>', id: 'rotate', level: 3 },
+          { value: '<code>renderCenterLine</code>', id: 'rendercenterline', level: 3 },
+          { value: '<code>boundedThumb</code>', id: 'boundedthumb', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>thumbScaleAnimationValue</code>', id: 'thumbscaleanimationvalue', level: 3 },
+          { value: '<code>thumbScaleAnimationDuration</code>', id: 'thumbscaleanimationduration', level: 3 },
+          { value: '<code>gestures</code>', id: 'gestures', level: 3 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+            a: 'a',
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            table: 'table',
+            tbody: 'tbody',
+            td: 'td',
+            th: 'th',
+            thead: 'thead',
+            tr: 'tr',
+            ul: 'ul',
+            ...(0, i.a)(),
+            ...e.components,
+          },
+          { Shapes: r } = n;
+        return (
+          r ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, l.jsxs)(l.Fragment, {
+            children: [
+              (0, l.jsx)(n.h1, { id: 'panel3-', children: (0, l.jsx)(n.code, { children: '<Panel3 />' }) }),
+              '\n',
+              (0, l.jsxs)(n.table, {
+                children: [
+                  (0, l.jsx)(n.thead, {
+                    children: (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.th, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.strong, { children: 'center channel: "saturation"' }),
+                        }),
+                        (0, l.jsx)(n.th, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.strong, { children: 'center channel: "brightness"' }),
+                        }),
+                        (0, l.jsx)(n.th, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.strong, { children: 'center channel: "hsl-saturation"' }),
+                        }),
+                      ],
+                    }),
+                  }),
+                  (0, l.jsx)(n.tbody, {
+                    children: (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.img, {
+                            alt: 'panel3-saturation',
+                            src: t(1576).Z + '',
+                            width: '200',
+                            height: '200',
+                          }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.img, {
+                            alt: 'panel3-brightness',
+                            src: t(2661).Z + '',
+                            width: '200',
+                            height: '200',
+                          }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.img, {
+                            alt: 'panel3-hsl-saturation',
+                            src: t(2687).Z + '',
+                            width: '200',
+                            height: '200',
+                          }),
+                        }),
+                      ],
+                    }),
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.p, {
+                        children:
+                          'The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and (saturation or brightness) of colors.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.p, { children: "Move thumb (handle) around the center to change the color's hue." }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsxs)(n.p, {
+                        children: [
+                          'Move thumb (handle) away or toward the center to change the saturation or the brightness of the color, depending on the ',
+                          (0, l.jsx)(n.code, { children: 'verticalChannel' }),
+                          ' prop..',
+                        ],
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                type: 'tip',
+                children: (0, l.jsxs)(n.p, {
+                  children: [
+                    'If you want to give your users more control over the color selection, you can add another slider next to this one that adjusts the opposite channel. For example, if ',
+                    (0, l.jsx)(n.code, { children: 'centerChannel' }),
+                    ' is ',
+                    (0, l.jsx)(n.code, { children: '"saturation"' }),
+                    ', you can add a ',
+                    (0, l.jsx)(n.a, {
+                      href: '../Sliders/HSB/BrightnessSlider',
+                      children: (0, l.jsx)(n.code, { children: '<BrightnessSlider />' }),
+                    }),
+                    ' slider, and vice versa.',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, l.jsx)(n.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'centerchannel', children: (0, l.jsx)(n.code, { children: 'centerChannel' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children:
+                      'Determines which color channel to adjust when moving the thumb towards or away from the center of the circular slider.',
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: (0, l.jsx)(n.code, { children: 'type: "saturation" | "brightness" | "hsl-saturation"' }),
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: "saturation"' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'rotate', children: (0, l.jsx)(n.code, { children: 'rotate' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Specify a degree of rotation for the hue circle' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 0' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'rendercenterline', children: (0, l.jsx)(n.code, { children: 'renderCenterLine' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: 'Controls whether to render a line from the center of the panel to the thumb (handle).',
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'boundedthumb', children: (0, l.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children:
+                      'Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.',
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the panel.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the panel bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbsize', children: (0, l.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Panel's handle (thumb) size (height*width)." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbcolor', children: (0, l.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Change thumb's color." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'default' }), ': interactive*'] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, l.jsx)(n.mdxAdmonitionTitle, { children: (0, l.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, l.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.li, {
+                        children: 'The thumb color will be changed depending on the contrast ratio if no color value is passed.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbshape', children: (0, l.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Change thumb's shape and appearance." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'values' }), ': ', (0, l.jsx)(r, {})] }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbstyle', children: (0, l.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, l.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, l.jsx)(s.ZP, {}),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'gestures', children: (0, l.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, l.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'adaptspectrum', children: (0, l.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'style', children: (0, l.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Panel's container style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, l.jsxs)(n.ul, {
+                  children: ['\n', (0, l.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function x(e = {}) {
+        const { wrapper: n } = { ...(0, i.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, t) => {
+      t.d(n, { ZP: () => r });
+      var l = t(5893),
+        i = t(1151);
+      function s(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, i.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h4, { id: 'thumbprops', children: (0, l.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, l.jsxs)(n.table, {
+              children: [
+                (0, l.jsx)(n.thead, {
+                  children: (0, l.jsxs)(n.tr, {
+                    children: [
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, l.jsxs)(n.tbody, {
+                  children: [
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, l.jsx)(n.code, { children: 'width' }) }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, l.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, { children: ['\n', (0, l.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, l.jsx)(n.pre, {
+              children: (0, l.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function r(e = {}) {
+        const { wrapper: n } = { ...(0, i.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(s, { ...e }) }) : s(e);
+      }
+    },
+    2661: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l = t.p + 'assets/images/panel3-brightness-968159b4b60646446d28a458e40cf53b.png';
+    },
+    2687: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l = t.p + 'assets/images/panel3-hsl-saturation-d7bb5c9c7d0865bcf4c0f7bc60f91534.png';
+    },
+    1576: (e, n, t) => {
+      t.d(n, { Z: () => l });
+      const l = t.p + 'assets/images/panel3-saturation-dafb918fc53688c9bceef0165d7e545c.png';
+    },
+    1151: (e, n, t) => {
+      t.d(n, { Z: () => d, a: () => r });
+      var l = t(7294);
+      const i = {},
+        s = l.createContext(i);
+      function r(e) {
+        const n = l.useContext(s);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function d(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(i)
+              : e.components || i
+            : r(e.components)),
+          l.createElement(s.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/702bc698.050574b1.js b/docs/build/assets/js/702bc698.050574b1.js
new file mode 100644
index 0000000..68978c7
--- /dev/null
+++ b/docs/build/assets/js/702bc698.050574b1.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [756],
+  {
+    1857: e => {
+      e.exports = JSON.parse(
+        '{"title":"API","description":"API documentation","slug":"/category/api","permalink":"/reanimated-color-picker/docs/category/api","navigation":{"previous":{"title":"Usage","permalink":"/reanimated-color-picker/docs/Usage"},"next":{"title":"ColorPicker Wrapper","permalink":"/reanimated-color-picker/docs/API/ColorPicker"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/7166dec0.29cabd74.js b/docs/build/assets/js/7166dec0.29cabd74.js
deleted file mode 100644
index 9892c84..0000000
--- a/docs/build/assets/js/7166dec0.29cabd74.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[107],{448:(e,t,i)=>{i.d(t,{A:()=>n});const n="data:image/png;base64,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"},4851:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>o,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"API/Preview/Swatches","title":"<Swatches />","description":"A list of color swatches is utilized for efficient color selection.","source":"@site/docs/API/Preview/Swatches.md","sourceDirName":"API/Preview","slug":"/API/Preview/Swatches","permalink":"/reanimated-color-picker/docs/API/Preview/Swatches","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3,"sidebar_label":"Swatches","description":"A list of color swatches is utilized for efficient color selection."},"sidebar":"tutorialSidebar","previous":{"title":"InputWidget","permalink":"/reanimated-color-picker/docs/API/Preview/InputWidget"},"next":{"title":"ExtraThumb","permalink":"/reanimated-color-picker/docs/API/Preview/ExtraThumb"}}');var s=i(4848),r=i(8453);const c={sidebar_position:3,sidebar_label:"Swatches",description:"A list of color swatches is utilized for efficient color selection."},l="<Swatches />",o={},d=[{value:"Props",id:"props",level:2},{value:"<code>colors</code>",id:"colors",level:3},{value:"<code>style</code>",id:"style",level:3},{value:"<code>swatchStyle</code>",id:"swatchstyle",level:3}];function a(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"swatches-",children:(0,s.jsx)(t.code,{children:"<Swatches />"})})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"swatches",src:i(448).A+"",width:"234",height:"50"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"A list of color swatches is utilized for efficient color selection."}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,s.jsx)(t.h3,{id:"colors",children:(0,s.jsx)(t.code,{children:"colors"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Custom swatches colors."}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"type: string[]"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"default: material colors"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"style",children:(0,s.jsx)(t.code,{children:"style"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Swatches container style."}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"swatchstyle",children:(0,s.jsx)(t.code,{children:"swatchStyle"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Swatch style."}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,s.jsx)(t.admonition,{title:"note",type:"info",children:(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,t,i)=>{i.d(t,{R:()=>c,x:()=>l});var n=i(6540);const s={},r=n.createContext(s);function c(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/7166dec0.40c52d8e.js b/docs/build/assets/js/7166dec0.40c52d8e.js
new file mode 100644
index 0000000..5a37cd0
--- /dev/null
+++ b/docs/build/assets/js/7166dec0.40c52d8e.js
@@ -0,0 +1,169 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [114],
+  {
+    5928: (e, t, i) => {
+      i.r(t),
+        i.d(t, {
+          assets: () => o,
+          contentTitle: () => c,
+          default: () => h,
+          frontMatter: () => r,
+          metadata: () => l,
+          toc: () => d,
+        });
+      var n = i(5893),
+        s = i(1151);
+      const r = {
+          sidebar_position: 3,
+          sidebar_label: 'Swatches',
+          description: 'A list of color swatches is utilized for efficient color selection.',
+        },
+        c = '<Swatches />',
+        l = {
+          id: 'API/Preview/Swatches',
+          title: '<Swatches />',
+          description: 'A list of color swatches is utilized for efficient color selection.',
+          source: '@site/docs/API/Preview/Swatches.md',
+          sourceDirName: 'API/Preview',
+          slug: '/API/Preview/Swatches',
+          permalink: '/reanimated-color-picker/docs/API/Preview/Swatches',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 3,
+          frontMatter: {
+            sidebar_position: 3,
+            sidebar_label: 'Swatches',
+            description: 'A list of color swatches is utilized for efficient color selection.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'InputWidget', permalink: '/reanimated-color-picker/docs/API/Preview/InputWidget' },
+          next: { title: 'ExtraThumb', permalink: '/reanimated-color-picker/docs/API/Preview/ExtraThumb' },
+        },
+        o = {},
+        d = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>colors</code>', id: 'colors', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+          { value: '<code>swatchStyle</code>', id: 'swatchstyle', level: 3 },
+        ];
+      function a(e) {
+        const t = {
+          admonition: 'admonition',
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, s.a)(),
+          ...e.components,
+        };
+        return (0, n.jsxs)(n.Fragment, {
+          children: [
+            (0, n.jsx)(t.h1, { id: 'swatches-', children: (0, n.jsx)(t.code, { children: '<Swatches />' }) }),
+            '\n',
+            (0, n.jsx)(t.p, {
+              children: (0, n.jsx)(t.img, { alt: 'swatches', src: i(3849).Z + '', width: '234', height: '50' }),
+            }),
+            '\n',
+            (0, n.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, n.jsx)(t.li, { children: 'A list of color swatches is utilized for efficient color selection.' }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, n.jsx)(t.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, n.jsx)(t.h3, { id: 'colors', children: (0, n.jsx)(t.code, { children: 'colors' }) }),
+            '\n',
+            (0, n.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, n.jsx)(t.li, { children: 'Custom swatches colors.' }),
+                '\n',
+                (0, n.jsx)(t.li, { children: (0, n.jsx)(t.code, { children: 'type: string[]' }) }),
+                '\n',
+                (0, n.jsx)(t.li, { children: (0, n.jsx)(t.code, { children: 'default: material colors' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, n.jsx)(t.h3, { id: 'style', children: (0, n.jsx)(t.code, { children: 'style' }) }),
+            '\n',
+            (0, n.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, n.jsx)(t.li, { children: 'Swatches container style.' }),
+                '\n',
+                (0, n.jsx)(t.li, { children: (0, n.jsx)(t.code, { children: 'type: ViewStyle' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, n.jsx)(t.h3, { id: 'swatchstyle', children: (0, n.jsx)(t.code, { children: 'swatchStyle' }) }),
+            '\n',
+            (0, n.jsxs)(t.ul, {
+              children: [
+                '\n',
+                (0, n.jsx)(t.li, { children: 'Swatch style.' }),
+                '\n',
+                (0, n.jsx)(t.li, { children: (0, n.jsx)(t.code, { children: 'type: ViewStyle' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, n.jsx)(t.admonition, {
+              title: 'note',
+              type: 'info',
+              children: (0, n.jsxs)(t.ul, {
+                children: ['\n', (0, n.jsx)(t.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+              }),
+            }),
+          ],
+        });
+      }
+      function h(e = {}) {
+        const { wrapper: t } = { ...(0, s.a)(), ...e.components };
+        return t ? (0, n.jsx)(t, { ...e, children: (0, n.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    3849: (e, t, i) => {
+      i.d(t, { Z: () => n });
+      const n =
+        'data:image/png;base64,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';
+    },
+    1151: (e, t, i) => {
+      i.d(t, { Z: () => l, a: () => c });
+      var n = i(7294);
+      const s = {},
+        r = n.createContext(s);
+      function c(e) {
+        const t = n.useContext(r);
+        return n.useMemo(
+          function () {
+            return 'function' == typeof e ? e(t) : { ...t, ...e };
+          },
+          [t, e],
+        );
+      }
+      function l(e) {
+        let t;
+        return (
+          (t = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(s)
+              : e.components || s
+            : c(e.components)),
+          n.createElement(r.Provider, { value: t }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/739c95ba.9edf9d13.js b/docs/build/assets/js/739c95ba.9edf9d13.js
new file mode 100644
index 0000000..12d9da9
--- /dev/null
+++ b/docs/build/assets/js/739c95ba.9edf9d13.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [617],
+  {
+    4029: e => {
+      e.exports = JSON.parse(
+        '{"title":"HSL","description":"API documentation for HSL Slider components","slug":"/category/hsl","permalink":"/reanimated-color-picker/docs/category/hsl","navigation":{"previous":{"title":"SaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"},"next":{"title":"HSLSaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/772.c9c858f4.js b/docs/build/assets/js/772.c9c858f4.js
new file mode 100644
index 0000000..a8ac037
--- /dev/null
+++ b/docs/build/assets/js/772.c9c858f4.js
@@ -0,0 +1,67 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [772],
+  {
+    5658: (e, t, n) => {
+      n.d(t, { Z: () => a });
+      n(7294);
+      var i = n(512),
+        o = n(5999),
+        s = n(2503),
+        r = n(5893);
+      function a(e) {
+        let { className: t } = e;
+        return (0, r.jsx)('main', {
+          className: (0, i.Z)('container margin-vert--xl', t),
+          children: (0, r.jsx)('div', {
+            className: 'row',
+            children: (0, r.jsxs)('div', {
+              className: 'col col--6 col--offset-3',
+              children: [
+                (0, r.jsx)(s.Z, {
+                  as: 'h1',
+                  className: 'hero__title',
+                  children: (0, r.jsx)(o.Z, {
+                    id: 'theme.NotFound.title',
+                    description: 'The title of the 404 page',
+                    children: 'Page Not Found',
+                  }),
+                }),
+                (0, r.jsx)('p', {
+                  children: (0, r.jsx)(o.Z, {
+                    id: 'theme.NotFound.p1',
+                    description: 'The first paragraph of the 404 page',
+                    children: 'We could not find what you were looking for.',
+                  }),
+                }),
+                (0, r.jsx)('p', {
+                  children: (0, r.jsx)(o.Z, {
+                    id: 'theme.NotFound.p2',
+                    description: 'The 2nd paragraph of the 404 page',
+                    children:
+                      'Please contact the owner of the site that linked you to the original URL and let them know their link is broken.',
+                  }),
+                }),
+              ],
+            }),
+          }),
+        });
+      }
+    },
+    1772: (e, t, n) => {
+      n.r(t), n.d(t, { default: () => d });
+      n(7294);
+      var i = n(5999),
+        o = n(1944),
+        s = n(6040),
+        r = n(5658),
+        a = n(5893);
+      function d() {
+        const e = (0, i.I)({ id: 'theme.NotFound.title', message: 'Page Not Found' });
+        return (0, a.jsxs)(a.Fragment, {
+          children: [(0, a.jsx)(o.d, { title: e }), (0, a.jsx)(s.Z, { children: (0, a.jsx)(r.Z, {}) })],
+        });
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/79d873be.14b90328.js b/docs/build/assets/js/79d873be.14b90328.js
deleted file mode 100644
index 7b2f960..0000000
--- a/docs/build/assets/js/79d873be.14b90328.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[982],{3813:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>x,frontMatter:()=>d,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"API/Sliders/HSB/BrightnessSlider","title":"<BrightnessSlider />","description":"A slider for adjusting the color brightness channel in the HSV color space.","source":"@site/docs/API/Sliders/HSB/BrightnessSlider.mdx","sourceDirName":"API/Sliders/HSB","slug":"/API/Sliders/HSB/BrightnessSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3,"sidebar_label":"BrightnessSlider","description":"A slider for adjusting the color brightness channel in the HSV color space."},"sidebar":"tutorialSidebar","previous":{"title":"HSB","permalink":"/reanimated-color-picker/docs/category/hsb"},"next":{"title":"SaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"}}');var t=l(4848),r=l(8453),s=l(7869);const d={sidebar_position:3,sidebar_label:"BrightnessSlider",description:"A slider for adjusting the color brightness channel in the HSV color space."},c="<BrightnessSlider />",h={},o=[{value:"A slider for adjusting the color brightness channel in the HSV color space.",id:"a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space",level:3},{value:"Props",id:"props",level:2},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},...s.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"brightnessslider-",children:(0,t.jsx)(n.code,{children:"<BrightnessSlider />"})})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"brightness",src:l(9137).A+"",width:"256",height:"40"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.h3,{id:"a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space",children:"A slider for adjusting the color brightness channel in the HSV color space."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(n.h3,{id:"adaptspectrum",children:(0,t.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n","\n",(0,t.jsx)(s.Ay,{})]})}function x(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},5529:(e,n,l)=>{l.d(n,{Ay:()=>d,RM:()=>r});var i=l(4848),t=l(8453);const r=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function s(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"renderthumb",children:(0,i.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Function which receives ",(0,i.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,i.jsxs)(n.li,{children:["Overrides ",(0,i.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"thumbprops",children:(0,i.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,i.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"positionStyle"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"StyleProp"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"width"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"height"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"adaptiveColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"currentColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"initialColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,i.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function d(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(s,{...e})}):s(e)}},7793:(e,n,l)=>{l.d(n,{A:()=>i});const i="data:image/png;base64,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"},7869:(e,n,l)=>{l.d(n,{Ay:()=>c,RM:()=>s});var i=l(4848),t=l(8453),r=l(5529);const s=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...r.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function d(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,t.R)(),...e.components},{Shapes:s}=n;return s||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"boundedthumb",children:(0,i.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"boundedThumb",src:l(7793).A+"",width:"180",height:"130"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbsize",children:(0,i.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbcolor",children:(0,i.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,i.jsxs)(n.admonition,{type:"info",children:[(0,i.jsx)(n.mdxAdmonitionTitle,{children:(0,i.jsx)(n.strong,{children:"*interactive"})}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,i.jsx)(n.h3,{id:"sliderthickness",children:(0,i.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The thickness is the ",(0,i.jsx)(n.code,{children:"width"})," of the slider in ",(0,i.jsx)(n.code,{children:"vertical"})," mode or the ",(0,i.jsx)(n.code,{children:"height"})," in ",(0,i.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbshape",children:(0,i.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"values:"}),(0,i.jsx)(s,{})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbstyle",children:(0,i.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,i.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,i.jsx)(r.Ay,{}),"\n",(0,i.jsx)(n.h3,{id:"reverse",children:(0,i.jsx)(n.code,{children:"reverse"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"vertical",children:(0,i.jsx)(n.code,{children:"vertical"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"gestures",children:(0,i.jsx)(n.code,{children:"gestures"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,i.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"style",children:(0,i.jsx)(n.code,{children:"style"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{title:"note",type:"info",children:(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>s,x:()=>d});var i=l(6540);const t={},r=i.createContext(t);function s(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:s(e.components),i.createElement(r.Provider,{value:n},e.children)}},9137:(e,n,l)=>{l.d(n,{A:()=>i});const i="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/79d873be.d3b401d6.js b/docs/build/assets/js/79d873be.d3b401d6.js
new file mode 100644
index 0000000..348e3dc
--- /dev/null
+++ b/docs/build/assets/js/79d873be.d3b401d6.js
@@ -0,0 +1,637 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [622],
+  {
+    508: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => h,
+          contentTitle: () => d,
+          default: () => j,
+          frontMatter: () => s,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var t = i(5893),
+        l = i(1151),
+        r = i(51);
+      const s = {
+          sidebar_position: 3,
+          sidebar_label: 'BrightnessSlider',
+          description: 'A slider for adjusting the color brightness channel in the HSV color space.',
+        },
+        d = '<BrightnessSlider />',
+        c = {
+          id: 'API/Sliders/HSB/BrightnessSlider',
+          title: '<BrightnessSlider />',
+          description: 'A slider for adjusting the color brightness channel in the HSV color space.',
+          source: '@site/docs/API/Sliders/HSB/BrightnessSlider.mdx',
+          sourceDirName: 'API/Sliders/HSB',
+          slug: '/API/Sliders/HSB/BrightnessSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 3,
+          frontMatter: {
+            sidebar_position: 3,
+            sidebar_label: 'BrightnessSlider',
+            description: 'A slider for adjusting the color brightness channel in the HSV color space.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'HSB', permalink: '/reanimated-color-picker/docs/category/hsb' },
+          next: { title: 'SaturationSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider' },
+        },
+        h = {},
+        o = [
+          {
+            value: 'A slider for adjusting the color brightness channel in the HSV color space.',
+            id: 'a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+        ];
+      function x(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h1, { id: 'brightnessslider-', children: (0, t.jsx)(n.code, { children: '<BrightnessSlider />' }) }),
+            '\n',
+            (0, t.jsx)(n.p, {
+              children: (0, t.jsx)(n.img, { alt: 'brightness', src: i(7790).Z + '', width: '256', height: '40' }),
+            }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsx)(n.h3, {
+                      id: 'a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space',
+                      children: 'A slider for adjusting the color brightness channel in the HSV color space.',
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, t.jsx)(n.h3, { id: 'adaptspectrum', children: (0, t.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsx)(n.li, {
+                  children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, t.jsx)(r.ZP, {}),
+          ],
+        });
+      }
+      function j(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(x, { ...e }) }) : x(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => s });
+      var t = i(5893),
+        l = i(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h3, { id: 'renderthumb', children: (0, t.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, t.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, t.jsxs)(n.li, { children: ['Overrides ', (0, t.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h4, { id: 'thumbprops', children: (0, t.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, t.jsxs)(n.table, {
+              children: [
+                (0, t.jsx)(n.thead, {
+                  children: (0, t.jsxs)(n.tr, {
+                    children: [
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, t.jsxs)(n.tbody, {
+                  children: [
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, t.jsx)(n.code, { children: 'width' }) }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, t.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, t.jsxs)(n.ul, { children: ['\n', (0, t.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, t.jsx)(n.pre, {
+              children: (0, t.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    51: (e, n, i) => {
+      i.d(n, { ZP: () => d });
+      var t = i(5893),
+        l = i(1151),
+        r = i(435);
+      function s(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, l.a)(),
+            ...e.components,
+          },
+          { Shapes: s } = n;
+        return (
+          s ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, t.jsxs)(t.Fragment, {
+            children: [
+              (0, t.jsx)(n.h3, { id: 'boundedthumb', children: (0, t.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, t.jsx)(n.p, {
+                children: (0, t.jsx)(n.img, { alt: 'boundedThumb', src: i(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbsize', children: (0, t.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbcolor', children: (0, t.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, t.jsx)(n.mdxAdmonitionTitle, { children: (0, t.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, t.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, t.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'sliderthickness', children: (0, t.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, t.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, t.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, t.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, t.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbshape', children: (0, t.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, t.jsxs)(n.li, { children: [(0, t.jsx)(n.code, { children: 'values:' }), (0, t.jsx)(s, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbstyle', children: (0, t.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, t.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, t.jsx)(r.ZP, {}),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'reverse', children: (0, t.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'vertical', children: (0, t.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'gestures', children: (0, t.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, t.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'style', children: (0, t.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, t.jsxs)(n.ul, {
+                  children: ['\n', (0, t.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(s, { ...e }) }) : s(e);
+      }
+    },
+    2737: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAACCCAYAAADv7uKCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAACRNSURBVHgB7X0JkB3Vee53ZrQMy0iD2SQw0lWKZaT4WQOyJJOXBzPgBAN+RnqPcuK8GKRX5TixnQjZVcQhi+SkEieuIqDYGLvsGAGuJOAyGsdB2CzWEmKwBEgEYoYtukIbisEaSUb7zMl/us/yn6WvYHQ1Glnng1Z3n63Pnf767+/83f0fICMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjY6RAIOOwkFLWaHUdLV166aClxorU9dJPSy8tq4QQ9cO2O4faOYRujMHlGE3ttYouWndgtKSFTs0oSQutx0Bv03o0W0ax9Ri2bfZHBeVUm2N0m6Olly/18WQrbat9Wh9qEThEyYeEpG4CB9U2UeYQJA6i3FbrclFpLs/lu/QDRRpYvlsfSKTxdg5ARuXLtd+fUchIgkisSHsTSiJ30vICStL+iJZ9KMlr0KGX02hZQMvtVF/lL0aC3LKbSDwKi+hsdKFV1VN2hQhGxFGrctHbMOsEjDkSgpXX+7ySNVthm6wc1ZesStkF6YpQm8J2rqwrvdJmLex2+Z/Z9vsk2JbU/3LrKoNtUzv+U/i5mdABGJE/QcsGWp6h5YHDVOvXS52WdTqthpLcS6nN22m9BJeOrmHUwKKC0tAkLI/qzpYio9DpVWfY7MuqzEZIHDdsVuoiRVHTH8loK9geEh3Tx7EkDS4w3hdbR+gLwK8nwY8tbIpIHhOZ0BxEvDm0uouWn9DyTZSWeKio62UF9u+5Gvv3z8O1v92BHyw1R6P/wxOt90PryU+8SJWF34aUsYmzbDRtMFJSP6S20IrABbGkI7MhObf0Ql98spLaEpyQiH+lV9dQWQT1qohrr3/vosiELqCt8mJabkBpjetoFp5ePQFPr5yCU9rbsOA24KLpwFcWvo2K4Y1WnzgZpAmZrgb4Ziyy9iHj3ba5HgqSD9JGi+lKaJm5/EhR1/0Gdk/AYLJbvA0Z9cpY5zKdW3EfLTjBoQd8K2i5jJY70UwyL7+vB088+ls4dKgNu0mRPPAVYOps4OukSs6uwZMaSEkN6VZC+mlcmtgzL3wLHhr4YFtom8ivACn9XD+fWchE8wKOdlWXiyvPjslKmTbilqWWOmm5YS7zyEJ3vuf93fSrFgkMdtEtpwMjDELI/kEpVorBloV9fU/WcQRgZP5PWlYetsLGjW1YvnwinnpqAnbubLPp48fvw6xZr+ODH9yGyZNLmfIgkfmVn/TQoM9hP2U9+RAwowe4lQ57M6131OHLBL1ddBCNOq8vhlC2xKc80rAiLOvq2JJS20Bh8lgbwreQMXn58WRAUlOKS4vox+lWZHQEwfal9+uEd+kV6Jw2azGtFuF4wSDm9fWtuRtDBBFaDeB+hsOR+c47p+DWW3uwefME0sJtDcu+9719mH3JXkyddHFx/2uhP3urKNfFvl4uITK3k1PkT2i9vz9wsWm3WuiaG43YbVe49aSfb912iXaM+25UmS61m0+57YzLbrBVYpD6OEDLYOG6k9p9p91mwrnPSlea8Fx3as3dbrE7L3bN+fWEXqdcgEguA3pt7UfntJnziN+34TiCFLL7zNMn3ffGG5v733Hd0vNwFi2PVhZSRP7oR/8PvvWtHuzY0YGBgcOPObZvPwPPrJ+Itc8C554NnN5RWrRChwpn7LZvBCZNLaXH+h+UZ6JYNPnVdotOaxElIc0+X1p4umDpattcTGE94bfNjiVbtNHX60HdX7NtbgqKQEoLD8Btq0Wy7caLCLallzYQlamuL9m+09Ci5UYcZ6CbTIdsHVjwDqspMs9DOQBcWVnoqquuxic/OR+vvlrDUPAzusa+fA/w0Gp9UPsPbMJTy4Er5wGz5+gkJjcKCLcarDiOJ4O5rGC3axHcjKXUHgpWRyXR8YUuHsoIp4u1zjbyqCFCLewr51hs+KpcJrwaXM+LRNkW9iO7cRxCDBZP7t42tG5WsuoupNxySieff/7/x8MPX4pm4KFV5IEmYu/dz89KiQOU9sQy4PepK6d0IPJYmEEjZDx8t4QSDchlPCMykR16CTTFhEAVUQU7pAgvIL+UPQYqWgtVu6+WfWK7azb0QpcpQv+ncCJ6OdRDkx3wn/Q5XHnlbw3ZKlfh5TrwtftZgrMy2E55m+kh5LU3pUZXXlGvvnk6aC0sryASd4Tg8NwzwsvqNp2TLAC/kGwLjlDVD1zCgWGYF3ctuIdoP4c/iDXpxuV3QhFaW2clUVYkC1x/fU/TyWzwUh349sOmJyyDtp+n7nyAHkye2hHfpaUxifDr8JMq4lu7tbSWDTLBb00O3rYQuqjkaoSSOWHjO4kjobBrXzAA8TM+0ya31ZFPhbXg23JfnJX/nWgWuhvlo+nYOqsB4He+04Ojicd+TMTeGKcr6fFfG4APMistDVkZgURo4WRi7Vvakh1Mi1vuh5Rh2lT4RYqVlIFdjunq9gTck7+QwPHFELbgWgm1d9ga70PZzolG6EVw71r4uOWWuRgOfG91wCN9irb0Ae+7jmWkbt3Vt/OoHCdy+NaRvwEEFtJLEUFVEdf24ZPWfzSeHgZyD3Js2QXb4m15V6cuM0xv27W3t2PunGuK9dq1z2DN2mei/A9ceRnOOWcitm7dVuRv2bINzYSWG+ORehL42c9ejP7+4XmI9GKdlteAaZOgO4bihGwnC/2rHwXOqAE764mKwiemSUOFlPDevrP/wHk90rIhpKNfX5Z3DsGto0hYylT7QZ91aX9IyA5ny1UNLH17XtJ7GCz0uedOxLIH7iWynlPs3/Cx34zK3L30Tsy57tpie+bMGW/fEL0zdKPqsfYjj0zFcOKfV+kNphbVagsNDmfMiQeABYI/Ch/IpaSI54UICBbpaRk3EZlmLim4Zo61LBIpfj98yyq8mr50adArj+qG0kfdQisCr1nzNP76b9LPbGbNvARTOy/A1F+ejaMMdT/fEKUqN91zz3ViOLHpdWAP6eZTx+oEfaJ/WqeHLdPZWQvIISqsrAzKy6Auf12UFzXQb9sFJSrsStku9zYIOOEgE5a/GpKRUlYKkpTGNn0J39I7IkIr63vlFZdVSgmF9vZTmy4fhgglKf4zSlXvZgw39pD7+zUi9bTJOkGfuH5Ku+hShLdbJ1xTWljAvW9RZbHDsl6KeuLq7+sDlINBMF9YLCVCi8ptrk/EWGrwkkjse/2I0vnbd679IRNaWVUlFR5Y9iB2796Nv/rLP8M99/4jLfcV+cryfupTHy/K7dr9c8yaNaNIv3He79k2VH11MZhtBdXGY4+txlFADeXL+j7Ui0bHAps0obmlPUhEP7kjYYqYlrVMYLfklESJCK8TK5SLCJ8cGkscqQRjTR2tDK3fnlww5eOLw9SUQXkJ/0UoIzLMJcRFx5AJ/bnPfQbLeh+0UkJZ6C996YuUtrwg+At9L+OPbvlz3PK5hdhMFvqee/8pakPlz5p1Cb5AF4PaVthN5D9KqCHlruNvzQ0nlORQ4G/Ov7WjHBQGpLLgZ1sCaYEQWOuqtixKwkvbj9TdIbggBLfBzj56bcK3+obEaT+yLzdadC1p/3XtxJeJe61ULUMmtLLAX77j63a/jwg8jqztuedOoO3dBanVskuvlfcihErbquVIKj+DkzmQC57pTBA1vHfLqrKSWWhnoznZKpjEDlN1sbjDmy0R1fXbEUh/fyjhxEfKrpu2mublUMRVMBIi423CntWArCIoJAK5kBro2QYbEVz4x/FaEZq/wUNq/bTS91YIVs9v1/c981rxleHfdEKp4iyv8HsZ9MdResiEVlZ3HA34DNQA0aSPUNRRDgx9qJfzjwVO1h4Oaz0Jp5wGvFGHvbVbpAhaMZzyxGZIIAl/YMkGkYWV1tY4IlZZz5cIodzhFOb0qxIW0Q/y1Lio1NhOFskgR6UPmdBKP99ww0ft/tw5Hyq8GUp6jFAo/Rzr5Zkzj43WOU+NRQNSqgFhQWjEhK0aKFpBq/c9ksq4oojVrqWe5ns8OAyrOR9FqjVnSVOCxL9YUra+3IslR7kd/ibh/Y4ha+g77vgGeTb+FI8+0mt64HkwRiDW06JuI697qVdf/TrGjt132C9Rmo1JitBmhKXX6hXSPf2+1TYozjw7tTZbJg14mabLp/S2t2Lpgu+5LckzA5HAVa4jWBWF7WEqUtKhDASA9AjAP86QCa0086f/4OZCMytfc9Wg7pY//ouG7Sjf9TA8VFFQhL4R4bsc6hvA887bhldemYLhwsX0HOdkdf1oEpjvAs+kLjyyxCeuZ/UkN45sI6WjgchqezqdFZdh3bC8tvZC91WE3YhlReoa4+2n8xP9DC5EbvO5oDIvvB7xoLDKgzEC8V1a0o+4P/vZFRhOXHwRkiftrBrwwsrYOhsrHN5tU2Q2FjQ2gdUQ8aZMlhFJ5ZrqkYhIGNeoEhVmCOpfJlxsxJLDpJ0wb9vpcFx9tNSizN/93TrOP38DhgNnkKz4lel6hw3kzqyRH5rkxpsbAy+H9Ir6YjZh52QizzvnzK4Fb+M1JGHQDbAaPMfZ0zTxOW1FlAu4YWH6Qoh/veu7xIn3PrQS/MfWSs/7MNuR1vJhysXAdxbr85O+IZdMCTV0WMA1HVnpyq9cTBVZ3Z5HU/dU0d04fDUtvPr8tX9TP2Wp+VEl4j6kLzeXc+K9D00CFVOQ8nYoK33VVU/gaOJDlwMXTkb07eAp46lXXSQ3VpVffHPIRiSt0hWClRdpq51spspmxikiIGvqZfyyXEx2lx52I/49MkHsuD33pzmhCE2yQ7nuvoryVdIY3//+Q0dNeigif0gFZ2K3fIP/cQXw4O3OZQfh5IFoQHBzGoWvIz0NHX4g6/mmGQnZQNRVie1hbGFTAzz/gXXov+DpMtm+KZ+6xHh7Rrq433QifiSrrPQ0pLS0wqOP/mPTSX1BDfid34AjKLM66mGKctctX+JI3NCihmJWVpRjxDWW2uwUzmZm39jrowVFRPgGhX/0tEV2+WGf0r+Cyxfh1aq4j9jStp+sJfP1t3sxUMh3HKzleIS20vNpUZ9cxdJDufFefvkuXH/9D9EMdL8fWPAxIu1YuMfXmmxjKO3XqCv3LQZ+uhH2JhoZceGt3ha4VubaG6E119vRR7C+HQRTwRLhk8J4MBlbcl5WsC1ZURfBJRM+O4yfVQ4GGnopjkdIsRTvEERqNTi8m5arKwt9+9srceed38Rppw3tQj+/Bnz6BuD//lq57/FJ70zvoTvCUmDF3WWaecAiwxsxHwhqQtg7PrfoCcbLRIKoGlRxMvk2OhVnzuXKoJSoKMsvGN6CsANLd9nA2l2g6n7h/1k9z0lnZ1dNtI5eNxIDNDZAve8na6ZgCNAhdFegjNGxomFh9c3hI4904rnnGn+q1da2D+9+9zb89ke2YVzrr7gwXaI6tt3CS+LpJlRMOh17zp9+QrhYdXz6idEVeYlYdrZ9XVbqYxXTUOhlsBU2tt1Ai8AAi21n49EJP96ci1MXxrYTLD+cykImpp/g8fD8eHlxPLy4D/ZJYV/f+vq0aTN76GcuQ5W+HEmQciXkwfkYIpT0IFIr2WHIXE3qW29VTxfXYdOmNjz44ASsXTsxij46e/a24jH6eeeVLzstv38fXnn+iqRMuJgGgRNrwB/2AIf1PABgUfTTBVleGE4srCLDxECT+wrjMAgtLVfErkw86PPvQGFvjA5P2XEZyZu4DxE6O2fOo7/LdDrpI85aq7lL6Nz29vWtXYUmQH8Nri7iPShj3TXv7buH7u/Gq5rUKiDiSXQNXHp1GSDx83NLr0Yqwqid1KfC6ibTBZsISLiIpFUTDXkRSMvtQT1ZkLHSh1rKAI1qHVpoF3VURvvcAqeihlZbc39CoEbW29Qry2prLuXbuw5PBBCx1ac3N6KMede8AfLTqzux7vFrcNbEDvQQiR9aCtz7ebps+ktiKaJbgkETVeh06cuJMGRuKsxuOAOWJzfMtrtgpG5XkbqUHLIgsyL2gCbygGCEFlxGyAa3/zSpDSn57FU83G7cxuEkhy9t8pQUGnQ3WkikfhZlMBqjq4+c2DMuq+M979uAsSdPwR/O7cCPeh3Z9Is+Tk4YN5t/S/bDDvBBmGzkGmA/DkF5GZX13GHqkywT1NzIj4QXpOrz1di7kZIPfA9IfY3if6PoSpotwWoWa5mnpPBApF5Kqx5aVtHyGZSuvSkYGlQ95UWZT2T+brH/eO98+uvXi1xDZsjA76xPtSUhHKGK82fIKHnHPY6X/m7WZqibeZ7ZshcEJwyDbqMIuQvz5kTofTD/8q+6RXxYhK46N9lE7GcW4C+Set1h/wr9m7PkqIDW1t0oLbaJuLSBlp2Io5eqscZJtKiXnFU95Q1RL0Ip9+AS7ft2bXfjOrLS88hKz/Fkh6eRzbaMvRQpT8bhdPWYWG6otaSygrYHR0F7O4SVHQNcbkB7NtQiXRR/fruvnnwzju4f6uGUnDD1uTQJ21EaeoC1kQn9NsDIrYLVmFlka6xIHSXB1+ull0i88bDtdlNb7cUsst20dNH9skbEq/nEg09Is7YzzKo8SK2/hSWyr60pn/Ksa0+o8kIWedK6CaWuUw4KmbsOgs0m608d4Wtkf5BXzgCLSCu7mWFT7juB9EyzrnxJYlnocH8aC4mMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMEwP5I9ljCP3xrfrwtksv5gPcEmp6iv4NZVCavl5g0yrgrXoceCYV985Lh//FtxdDD+XX36NgA8+oIDPqK/ABlFGTBgT7IFb4X2lXfamd+tI7/CI83odX7kDUvkk3H9v69dRxc6CZYYYOEnkTFJEP7OvCphfKkGA7txFz9gF7+3WAR1pO7SjjR6v5Cy+lKtfeDuyn/H9bDGwjcu+hejYYhw7MYWI/p2a+4tNZyHKfh+woguTS9qBqYlBgUM96ZYPnFs3qeBqCNQMeZSM1KSfPM3tmX3jlZKIFG+vGHoWXFeDR8DKhhwmWyAf2LsDL6zuwqQ/46QZHXhXvzkQmNVDkVgTup7zt68sgMKfXgBkLgLOXAs8SwZ9fQuXq5iguElNqTkMb/cVFUTLxbEICDep8Qy6hCwoztRsL/1L+K+EFrvGiHJltAX92Fj9ik6klvDrhhcPb9YPPKGRCDwOIzHOgYuY9/0QH1q2ke+Nen7zGTIZhJWSwoc5g/0ZgVx3YTO1M6gZ+iZpe93mgvtSv57UVkJtNZM8PUcZIF3otXXAmodOEdGv40YvALK2JhuQo6x9PpvoV/PjwTxHnuIsErC+Z0EcR2iovxq4dC7BiGVlZImOrTAdgU2fESxewAdCjWzil7d8BvEq6+iQ6xOzbgDOnA+sX+uUElyOsTROCzKaKMjIZ5RnLXJYwVtOl8Rnn/LVv4/2JJkxr3Aq73PQUQnEkUV7PyRXf8ufYdkcJesC3An3rF+D+O0nz1lGawZAO4a47YZUQzKodUAPGrwBnzAY+uI40dw3h/IOsV2FDzppK/w7BhUF1xGeRaC9FTtjWfDpy0otEe65d/7iOxDKQJpGF7nzP+7vp1y2iIUHXSIzmr+aCGZRipRhsWdjX92QdIxCWzE/+sIa1K7VG1plMg1rsocHga9tpeZ2295dlVZFTxwLnT6DlbGB8W8XdWZaDyS0PARN7gMtX0KCR1gfr8G/LzEpLrnVdEaNGpB4BSjMdlg0QaSYX8q18Wiz45JORVOB3AL8tX6q4NsLLyrTM7bRXpnParMUogxMeHxjEvL6+NXdjhIFO+jo8uaILP16pJYbQU1KYgZ/efqkO9K4CNm4vSd0I//OicrlmurtAzDKKbU8gMo8lz8iPr6CO7KiIJy1soEYYd52dloJMGfVZxYZ201Jot5hgbjXhx21OufEOIBVwsSqNx5MGUsHOfTdeOqZ0q/l7dU6bOY84fhuOI0ghu888fdJ9b7yxecTM4EVkvh3PPDEHjz+irbIWnYXV1duKyN/8ZyLzanLZ7aSzc+jwDW96kyzvi8D3/x24gKz2OR2sXbZWHo9xnaX0ePMH5Rk2F0ArW+iCEta7Iv1yLfom0qJcd6KIFV2OF2kfZVR/FfFT6W21r/KUz3qw4SLstmR1B3T6gLbIqfKDun3J9mWQZ9aW0GecdZ4icw3HEeiUtMmWQbz5060/wAgAkXkedu74Ah78Nv2FDzEHqnCS4/6HgW8tL4k8FPycLPlDz5ZtXjLZWWbBLhxF6kkfJ6tPF8CevpjMnOAtwaKkR0Fk6Am2FKFlsT/ICO0TSXgEi0npk5/nD8CRdcCrJ4N9vi2KYw6wdNOHFnY2unEcQgwWT9iOObRuXoR/uoue7Cn5wAdO9Kd+i9L+9h7gsR+jKfh7kiqfovZ273dp5pBKU79OXpX3UF9Gh8Mg7q5wilNNtunP0WoyJFLgQzjfl8xVbOy488sYxezSuLo2LfsPUiS4byTU6tnL0TzchOfW1bBrpzdgsk/uvnY/SY2NaCqeofZuvl/v+F4K7NlA1pyeQk66SScEHgTu1RBsJlmRKG13pOfsc6l8SyYccNyRJxEOHNllFVxSsUMvvlykrWluUBlHCG2dF+DxFfBdZfrPv3wl8HKTyWzwdB249WH4dwS9/hn155xP0KBPWenQRcI9ICYn7Lu2mtLti+SknX75dIkU2X3nYOpiaHwc6fVd/ZcJ3Rx049/JB7yrP76bvlwnzbsaRxX/QDLmqToimTOo3g0hS/3umxDJgUBK+ET17aITA/wukM4PWtX/VpO90SWQSjfELbdjZEI3B4vw3PogSZPiH76HYcHXVsO/nes+vEWDwtOvi/M8Yko2eT3P5ATW1lkE1QPEutYdo6qGeUDi3y/iowhElyW4TFHIhD5CFHKjf0cNGzfo8ybceVhD3oifDZNHUVnop16Db11pvY/6dRK58dpqNqlAIEZDJWGUqcswTxP5IwwzH1aiQd6GPaSItlxelV72tbprkz3lZKUyoY8c3dhYh/U388fSz/VhWPHVlYgtIXVqDw0O3zVH76Zv+uHbpvb1znBM4L0fIrVt5VQM5QV/3ucPH8M+pOFfFp788VLKSyIT+shxXUFofp4V9pI77fmXMKzo2+678Qz21YGTp+sdbc+SWthZZPuunLA5ZVlZJR14ezFdG0sU3xHHW0pR2eWHj8eb/Ppoe3s75s65plj39b2Mx364yuaNo7SZMy8p0ubOuRbnnDMRW7duw7LeB3Gco6MYDJr3HgrQxpZtGHbspkFg3+vA7Mkskfp1gNLGX+qn8fel9bZMWfeiLH8B1Lbgpfj616ewn4coz1GZlwzf8eA9EMwu+71qmoU+99yJWPbAvejsvBC7d+/GH31uIf7qL//M5rePOxVf/tIXcffSOwsymzKziOTHOUhD97Nbuf4Db92OYwJlpcOR2+Be7bpL3dqFtbqC1fGIIr3SbO3IVm2FhaedeSpYbQkuUSRrXQTHMxcf33JCp2kW+lOf/DheeOFF3PLHf1HsP/bYajz6SC96e/8Fa9Y+Y8vdccfX7f6smTMKq83zj0OoQSE9Rha+1du7H8cEu/eCsbLEIbrgxtb8dBna3JRYQGReYwudFgOVDdhUTlpfp4vKtlI9EEx4NFFDTyXLvJYRcwvJiS102+3svMArt4XdineRlc5oNrStShljyRZtjoUtq8lpjbv7jpDNYJ9okK99Re7SeDkR9NX/F1Fu2C6iPnDr3jRCt7efil27fu6lKVIrPX1CoCCKxMiAhPuQQEG4FSNvWdKUlV517hjzpAWrz9WtD6d1/aOFwsQpaP4BrKN/I5KLYCnRNEIr8ir9zDGVrHNf3zCP9IcfdXR0wH0uhXJ90lgcE7S36Q1GnFHjgf11Vsjvq+/JK6WTccq5pjT5mGqpUOR2K36i57/m79qRrI5/uYVthwIp/EqxaYRes+ZpfOADlxeDQ4UbPvabhcVW3o5fcPRjbIJE50zAMUHn2XHaqNMYoYMBo5TBjSWknA9DZC4tYmkgkRYffunDK22/jkzm+WjaoPCOr3wD48a1Y9l37sXmLa/j3edOwKd//+bCcv+CYz0mTOzCG+Qas3qU/vT0+wsrPdyDw05zITnvReHhGDBPLI2J5S47XT4acLl/uYvPFwehFQ3dbj641XaxOXyPhWsrkPzwexfa/+Knoon4wl/fhi/f8Y1CT28NiKwGg1N/ebaXZjwixznWY3INxbsc6ssP89dXZFakfmUjhg1XXESSYyzshWW8Lm1TgO1LdCFOUE5in9iCbXNNYr8zjOhqvA1VdlQmttOeb3us5FGqJYlC058UKv/y1l98q8zxXVw4FeVADN7Jx1WXYVjR0wlLGK4j1HscO1fqHW5Vw5u+W/sqxBcY7k0OH9WyIT4Ov3z4loxS/Pq+gw/RXn70fYQQQtTR1kZWeopOYZboghpw/mQMC9Q3hh9+LxytmHVWfmhvUIi0IGXwVKvg9PUHYgKxqg7BPca+jBGVpat65JcTtl1TLxO6OejFhZ3uxPNzfPUwWek//zD4m3GWGO1dwGuLERFCMGoxCcHD38GUkK49Z18N5Z0/RCRlCC8Z+6N9q54mekpfI2hTZgvdVCzBe7uYt0NBa80LyEJ2z8ZRxScuB2aYOwEjgxoMtl9MfphV4N0q1yWVfIcZ9Iv+zpbK8B0VuOEgR5p01V+gSM/Ch3mpfRGV56OAHDmpiSASEJlPuh2/2g2rpRXMA4vrf52IfZSkx4wa8Dv6LuAxgY79rh5g0+1abjAHsoWE7xJzfgXJy8vQc+FoFDZa5fNI5XPrHtr/cPjnSsigfb8vmdDNwxK879J+nDeFnWf2x//EbwAXNpnUKozBFz8SjuDKlfraezT5n19b0rAJaf/h/mkR8F8GdcJBZZW19T+qjTW02w6jkPoSJSwNWyd0+VlCqxBbyBgyCisNzMc1c+FLD5R/8ZPJnfaZG4H/3SRN/RGSMXfcAJzaxs6yJkALpZ03H3h1cWmdPbMo4gtAmLpGQEvmrInJBxnaztKaVskLU0oCzCb7tfl+5XGjFl27pgS30EtxPEKKpRghIFL3YlzH7ei5hqeyc0QbH74cuJmIePoQwwZ21YC/o/oLfr1sW0jfwiqcdQWweSk5/++xXbD5FXE2TKAaGd3pE2pZRCmmMBIN88ailEblG7VbJWVsemdnV020jl43EgM0NkC97ydrpmAEQYfQXWFj25kwWyYyUasmhIp592/PAs+8CDz9YuNGT2krgzbOI+t+8eQyfJeJmafWqs0iXh6VnUBkHktd+NdLgDFSTzshy3h2evoJN21FGdNObatpKKSOcadi2g22lrHtzJQUh8xCnT8o4phyPBYdjz9npqWonooinrLiQNRWHBvPn/5CFmtVzz4p7OtbX582bWYP/bxltFvDSIeUKyEPzscIg5IeROq5eH/PCvob17B2hclBNDD7X9OBy7vKSEsq8uhrOmijjT7aVkYeVWQeN7Ykrr1xs8GQsaJn95Qx7R7vYYdjOlcE/TAD2FBDi1IIFFlSRgNJacuw3w00kBzhUI5rbhnVjtsK38DjQ1jj42hg/Ts7Z86jW890OjkjzlrTH7ifDERvX9/aVRjB0MFnluHZJ7rwFJH64D7fSkfRSBFY8op1anvMSaSZry7P5o/mlqF0TbRRHnl0dJxWThYEG3lUksUfNJMGkQwZoL5xC22tpji8hTYRQ8NIoqkJg/xIo/7ERFWW3i9XbjeWMxlHDCL2bdi14yZ87y7grf50gMRU4MRGhOb7HaS4folI/OpS4PnPU8JOPUOW0PLCSA5YmcGlhyV0ITtEQWRFaiVBijC6wkgOoSWHJpTaB5KzVcWSo3Fo3PRMWqm8dFjeg7YfeRasow66yy0kUj+L//eZRXhpXQ3ryFrvSTiU7G1fxi5Ym29bJRKSBJlEevk0ekK5aj6wtdeRtrgLB7KEywyzJVl7xXHVFx868qhXpxx8uq9bYNtNRdOI3XqpfjQWKVU/ndcOB40iW+jhg41/p4I6vrKOLOp64L82aPkBZ3WF9MPfhhb5XWSRzyQSj6f1f3yVrPLfwQY296QFs8zcWptBoSdJTMBzvW4tB4XOQusA5yI1WFPWlgcpF8F+ehB3OMtcNRCM7wR+e5nQwwxN7G6o8GFv7ahhe52IXS+ncFOLmmTTeEbUPIVjSR+Pp0HhaVTtrKnAm33AK2SN19MDk8GdaYLyiTWLbZkm+xiUxxltNLReWst1ITHsxJtadsCPsh/e+tN5vmwwEsFJD+7dOFw7qVkDhN3PhD6GYORWwefMLLI1W+DNeknwbcqak4vvpd7ETLKCEVM6wvL8UUGe2h9j8yWRVxR5rVpLjyoHhk47S+uucwQq0iSRSBxM6lqZcK1Bl/fLOisvWDsS/oy0jtDxHUDY/YyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjJGD/wawHL6B/hNrmQAAAABJRU5ErkJggg==';
+    },
+    7790: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => d, a: () => s });
+      var t = i(7294);
+      const l = {},
+        r = t.createContext(l);
+      function s(e) {
+        const n = t.useContext(r);
+        return t.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function d(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(l)
+              : e.components || l
+            : s(e.components)),
+          t.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/84f4edb4.3674461d.js b/docs/build/assets/js/84f4edb4.3674461d.js
deleted file mode 100644
index b8e3515..0000000
--- a/docs/build/assets/js/84f4edb4.3674461d.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[100],{9003:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"HSB","description":"API documentation for HSB Slider components","slug":"/category/hsb","permalink":"/reanimated-color-picker/docs/category/hsb","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"HueCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"},"next":{"title":"BrightnessSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/8771582a.504eedc5.js b/docs/build/assets/js/8771582a.504eedc5.js
new file mode 100644
index 0000000..a3fd7a3
--- /dev/null
+++ b/docs/build/assets/js/8771582a.504eedc5.js
@@ -0,0 +1,183 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [287],
+  {
+    462: (e, n, s) => {
+      s.r(n),
+        s.d(n, {
+          assets: () => t,
+          contentTitle: () => o,
+          default: () => c,
+          frontMatter: () => i,
+          metadata: () => l,
+          toc: () => d,
+        });
+      var r = s(5893),
+        A = s(1151);
+      const i = {
+          sidebar_position: 4,
+          sidebar_label: 'Panel5',
+          description: 'This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.',
+        },
+        o = '<Panel5 />',
+        l = {
+          id: 'API/Panels/Panel5',
+          title: '<Panel5 />',
+          description: 'This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.',
+          source: '@site/docs/API/Panels/Panel5.mdx',
+          sourceDirName: 'API/Panels',
+          slug: '/API/Panels/Panel5',
+          permalink: '/reanimated-color-picker/docs/API/Panels/Panel5',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 4,
+          frontMatter: {
+            sidebar_position: 4,
+            sidebar_label: 'Panel5',
+            description: 'This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Panel4', permalink: '/reanimated-color-picker/docs/API/Panels/Panel4' },
+          next: { title: 'Sliders', permalink: '/reanimated-color-picker/docs/category/sliders' },
+        },
+        t = {},
+        d = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>gestures</code>', id: 'gestures', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+          { value: '<code>selectionStyle</code>', id: 'selectionstyle', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+          admonition: 'admonition',
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, A.a)(),
+          ...e.components,
+        };
+        return (0, r.jsxs)(r.Fragment, {
+          children: [
+            (0, r.jsx)(n.h1, { id: 'panel5-', children: (0, r.jsx)(n.code, { children: '<Panel5 />' }) }),
+            '\n',
+            (0, r.jsx)(n.p, { children: (0, r.jsx)(n.img, { alt: 'panel5', src: s(8589).Z + '', width: '240', height: '200' }) }),
+            '\n',
+            (0, r.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, r.jsx)(n.li, { children: 'This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.' }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, r.jsx)(n.admonition, {
+              type: 'danger',
+              children: (0, r.jsx)(n.p, {
+                children:
+                  'This panel is limited to displaying only a fixed range of colors, and therefore cannot show all colors.',
+              }),
+            }),
+            '\n',
+            (0, r.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, r.jsx)(n.h3, { id: 'gestures', children: (0, r.jsx)(n.code, { children: 'gestures' }) }),
+            '\n',
+            (0, r.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, r.jsxs)(n.li, {
+                  children: [
+                    'An array of gestures or composed gestures from ',
+                    (0, r.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                    '.',
+                  ],
+                }),
+                '\n',
+                (0, r.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                '\n',
+                (0, r.jsx)(n.li, { children: (0, r.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                '\n',
+                (0, r.jsx)(n.li, { children: (0, r.jsx)(n.code, { children: 'default: []' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, r.jsx)(n.h3, { id: 'style', children: (0, r.jsx)(n.code, { children: 'style' }) }),
+            '\n',
+            (0, r.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, r.jsx)(n.li, { children: "Panel's container style." }),
+                '\n',
+                (0, r.jsx)(n.li, { children: (0, r.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, r.jsx)(n.h3, { id: 'selectionstyle', children: (0, r.jsx)(n.code, { children: 'selectionStyle' }) }),
+            '\n',
+            (0, r.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, r.jsx)(n.li, { children: 'The style of the square that indicates the selected color.' }),
+                '\n',
+                (0, r.jsx)(n.li, { children: (0, r.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, r.jsx)(n.admonition, {
+              title: 'note',
+              type: 'info',
+              children: (0, r.jsxs)(n.ul, {
+                children: ['\n', (0, r.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+              }),
+            }),
+          ],
+        });
+      }
+      function c(e = {}) {
+        const { wrapper: n } = { ...(0, A.a)(), ...e.components };
+        return n ? (0, r.jsx)(n, { ...e, children: (0, r.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    8589: (e, n, s) => {
+      s.d(n, { Z: () => r });
+      const r =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADICAYAAADWfGxSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASKSURBVHgB7dzLapwFGMbxdw5NJjM0R5MekiYxtLUUBHEhFnHRvRtv2BsoxYU7EQVpa2tSKB6nNpnPjZfwLvrg73cBH3Pg/727Z7QaVkM1en3xujqdn59Xp4uLi+r0vn++/9v3fd8/39OnT6vTuIBYAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZg0/HnX1Wn0Yvr1Wn75bPqdGfU+87aHP1YnU7rRXVa7bdOntXqRrVazavVyd1qNducVqffF1vVyQWGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYNM6OKxWy4PqtPH6XXW6MVmvTtuTi+r00eh5dVr2TpTV0L2JtVmt9u/13qSNN2vV6dV4UZ1cYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2HX34sDoNf96uTrvfX1ano8W16nRz/Kw6fVq9lvvV6vK4Wl3tjarT8Wer6rT5alqdfpr2jpS5wBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBsOhzfq1Yvz6rTYue8Ot1an1enk8l31enj6rXcq1ZvD3s3rFa9E2p195NqNTzfqE5PljaxgP8IGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIJNa/9utVr0bmwdzH6oTsez3k2s08lmdbqzt1+tbvVuitWDanV1NFSn8dbj6nRQf1Wn7V97N7ZcYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2Hd3v3cR69KJa7Xz7qDrdn82q04PJN9VpOPuiWh0tq9XG39VpPO3dxBpdPqxOi8k/1en0Zu/zXGAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAINv16q1qdnfa+E3ZPdqvT/mxUnWa3ezfFRoe9m13DrXfVaq9306k2q9f4TnVam/T+fofzy+rkAkMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUOw6ePr1eqDk2o1/7J3w2prrVqt7Z5Vq52d6jTa7t1gGnavqtOwqFajce/vt35tVZ2OFr3Pc4EhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAh2OjJm2GoRuu/tT6u1n6pVjd6J7ZqvvFzdVpbX1arWe8G0zDvfV5d6/1DhvmsOr0der/vyz/eVicXGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIL9C+bjhZjLoiutAAAAAElFTkSuQmCC';
+    },
+    1151: (e, n, s) => {
+      s.d(n, { Z: () => l, a: () => o });
+      var r = s(7294);
+      const A = {},
+        i = r.createContext(A);
+      function o(e) {
+        const n = r.useContext(i);
+        return r.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function l(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(A)
+              : e.components || A
+            : o(e.components)),
+          r.createElement(i.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/8771582a.73eb78a1.js b/docs/build/assets/js/8771582a.73eb78a1.js
deleted file mode 100644
index d2f3f1d..0000000
--- a/docs/build/assets/js/8771582a.73eb78a1.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[56],{8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var r=s(6540);const A={},i=r.createContext(A);function o(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(A):e.components||A:o(e.components),r.createElement(i.Provider,{value:n},e.children)}},9375:(e,n,s)=>{s.d(n,{A:()=>r});const r="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADICAYAAADWfGxSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASKSURBVHgB7dzLapwFGMbxdw5NJjM0R5MekiYxtLUUBHEhFnHRvRtv2BsoxYU7EQVpa2tSKB6nNpnPjZfwLvrg73cBH3Pg/727Z7QaVkM1en3xujqdn59Xp4uLi+r0vn++/9v3fd8/39OnT6vTuIBYAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZg0/HnX1Wn0Yvr1Wn75bPqdGfU+87aHP1YnU7rRXVa7bdOntXqRrVazavVyd1qNducVqffF1vVyQWGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYNM6OKxWy4PqtPH6XXW6MVmvTtuTi+r00eh5dVr2TpTV0L2JtVmt9u/13qSNN2vV6dV4UZ1cYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2HX34sDoNf96uTrvfX1ano8W16nRz/Kw6fVq9lvvV6vK4Wl3tjarT8Wer6rT5alqdfpr2jpS5wBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBsOhzfq1Yvz6rTYue8Ot1an1enk8l31enj6rXcq1ZvD3s3rFa9E2p195NqNTzfqE5PljaxgP8IGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIJNa/9utVr0bmwdzH6oTsez3k2s08lmdbqzt1+tbvVuitWDanV1NFSn8dbj6nRQf1Wn7V97N7ZcYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2Hd3v3cR69KJa7Xz7qDrdn82q04PJN9VpOPuiWh0tq9XG39VpPO3dxBpdPqxOi8k/1en0Zu/zXGAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAINv16q1qdnfa+E3ZPdqvT/mxUnWa3ezfFRoe9m13DrXfVaq9306k2q9f4TnVam/T+fofzy+rkAkMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUOw6ePr1eqDk2o1/7J3w2prrVqt7Z5Vq52d6jTa7t1gGnavqtOwqFajce/vt35tVZ2OFr3Pc4EhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAh2OjJm2GoRuu/tT6u1n6pVjd6J7ZqvvFzdVpbX1arWe8G0zDvfV5d6/1DhvmsOr0der/vyz/eVicXGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIL9C+bjhZjLoiutAAAAAElFTkSuQmCC"},9567:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>t,contentTitle:()=>l,default:()=>c,frontMatter:()=>o,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"API/Panels/Panel5","title":"<Panel5 />","description":"This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.","source":"@site/docs/API/Panels/Panel5.mdx","sourceDirName":"API/Panels","slug":"/API/Panels/Panel5","permalink":"/reanimated-color-picker/docs/API/Panels/Panel5","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4,"sidebar_label":"Panel5","description":"This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."},"sidebar":"tutorialSidebar","previous":{"title":"Panel4","permalink":"/reanimated-color-picker/docs/API/Panels/Panel4"},"next":{"title":"Sliders","permalink":"/reanimated-color-picker/docs/category/sliders"}}');var A=s(4848),i=s(8453);const o={sidebar_position:4,sidebar_label:"Panel5",description:"This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."},l="<Panel5 />",t={},d=[{value:"Props",id:"props",level:2},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3},{value:"<code>selectionStyle</code>",id:"selectionstyle",level:3}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,i.R)(),...e.components};return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(n.header,{children:(0,A.jsx)(n.h1,{id:"panel5-",children:(0,A.jsx)(n.code,{children:"<Panel5 />"})})}),"\n",(0,A.jsx)(n.p,{children:(0,A.jsx)(n.img,{alt:"panel5",src:s(9375).A+"",width:"240",height:"200"})}),"\n",(0,A.jsxs)(n.ul,{children:["\n",(0,A.jsx)(n.li,{children:"This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."}),"\n"]}),"\n",(0,A.jsx)(n.admonition,{type:"danger",children:(0,A.jsx)(n.p,{children:"This panel is limited to displaying only a fixed range of colors, and therefore cannot show all colors."})}),"\n",(0,A.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,A.jsx)(n.h3,{id:"gestures",children:(0,A.jsx)(n.code,{children:"gestures"})}),"\n",(0,A.jsxs)(n.ul,{children:["\n",(0,A.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,A.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,A.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,A.jsx)(n.li,{children:(0,A.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,A.jsx)(n.li,{children:(0,A.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,A.jsx)(n.h3,{id:"style",children:(0,A.jsx)(n.code,{children:"style"})}),"\n",(0,A.jsxs)(n.ul,{children:["\n",(0,A.jsx)(n.li,{children:"Panel's container style."}),"\n",(0,A.jsx)(n.li,{children:(0,A.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,A.jsx)(n.h3,{id:"selectionstyle",children:(0,A.jsx)(n.code,{children:"selectionStyle"})}),"\n",(0,A.jsxs)(n.ul,{children:["\n",(0,A.jsx)(n.li,{children:"The style of the square that indicates the selected color."}),"\n",(0,A.jsx)(n.li,{children:(0,A.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,A.jsx)(n.admonition,{title:"note",type:"info",children:(0,A.jsxs)(n.ul,{children:["\n",(0,A.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,A.jsx)(n,{...e,children:(0,A.jsx)(a,{...e})}):a(e)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/8bf99691.1b4d3a70.js b/docs/build/assets/js/8bf99691.1b4d3a70.js
deleted file mode 100644
index 4f985c6..0000000
--- a/docs/build/assets/js/8bf99691.1b4d3a70.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[201],{2993:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>l,default:()=>x,frontMatter:()=>s,metadata:()=>a,toc:()=>d});const a=JSON.parse('{"id":"Examples","title":"Examples","description":"- ### Bare workflow - typescript","source":"@site/docs/Examples.mdx","sourceDirName":".","slug":"/Examples","permalink":"/reanimated-color-picker/docs/Examples","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":7,"frontMatter":{"sidebar_position":7},"sidebar":"tutorialSidebar","previous":{"title":"ColorKit","permalink":"/reanimated-color-picker/docs/ColorKit"}}');var o=n(4848),t=n(8453),i=n(6642);const s={sidebar_position:7},l="Examples",c={},d=[{value:"Bare workflow - typescript",id:"bare-workflow---typescript",level:3},{value:"Expo managed workflow",id:"expo-managed-workflow",level:3},{value:"Expo snack",id:"expo-snack",level:3}];function p(e){const r={a:"a",admonition:"admonition",h1:"h1",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,t.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.header,{children:(0,o.jsx)(r.h1,{id:"examples",children:"Examples"})}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:["\n",(0,o.jsx)(r.h3,{id:"bare-workflow---typescript",children:(0,o.jsx)(r.a,{href:"https://github.com/alabsi91/reanimated-color-picker/tree/main/Example",children:"Bare workflow - typescript"})}),"\n"]}),"\n",(0,o.jsxs)(r.li,{children:["\n",(0,o.jsx)(r.h3,{id:"expo-managed-workflow",children:(0,o.jsx)(r.a,{href:"https://github.com/alabsi91/reanimated-color-picker/tree/main/ExampleExpo",children:"Expo managed workflow"})}),"\n"]}),"\n",(0,o.jsxs)(r.li,{children:["\n",(0,o.jsx)(r.h3,{id:"expo-snack",children:(0,o.jsx)(r.a,{href:"https://snack.expo.dev/@alabsi91/reanimated-color-picker",children:"Expo snack"})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(r.admonition,{title:"note",type:"info",children:(0,o.jsx)(r.p,{children:"if the example is not loading, please try to refresh the page."})}),"\n","\n",(0,o.jsx)(i.A,{})]})}function x(e={}){const{wrapper:r}={...(0,t.R)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},6642:(e,r,n)=>{n.d(r,{A:()=>o});n(6540);var a=n(4848);function o(){return(0,a.jsx)("div",{"data-snack-id":"@alabsi91/reanimated-color-picker","data-snack-platform":"web","data-snack-preview":"true","data-snack-theme":"dark","data-snack-loading":"lazy",style:{overflow:"hidden",background:"#212121",border:"1px solid var(--color-border)",borderRadius:"4px",height:"800px",width:"100%"}})}},8453:(e,r,n)=>{n.d(r,{R:()=>i,x:()=>s});var a=n(6540);const o={},t=a.createContext(o);function i(e){const r=a.useContext(t);return a.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function s(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),a.createElement(t.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/8bf99691.f30381ff.js b/docs/build/assets/js/8bf99691.f30381ff.js
new file mode 100644
index 0000000..fcaa37f
--- /dev/null
+++ b/docs/build/assets/js/8bf99691.f30381ff.js
@@ -0,0 +1,173 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [405],
+  {
+    3306: (e, n, r) => {
+      r.r(n),
+        r.d(n, {
+          assets: () => c,
+          contentTitle: () => s,
+          default: () => m,
+          frontMatter: () => i,
+          metadata: () => l,
+          toc: () => d,
+        });
+      var o = r(5893),
+        t = r(1151),
+        a = r(7391);
+      const i = { sidebar_position: 7 },
+        s = 'Examples',
+        l = {
+          id: 'Examples',
+          title: 'Examples',
+          description: '- ### Bare workflow - typescript',
+          source: '@site/docs/Examples.mdx',
+          sourceDirName: '.',
+          slug: '/Examples',
+          permalink: '/reanimated-color-picker/docs/Examples',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 7,
+          frontMatter: { sidebar_position: 7 },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'ColorKit', permalink: '/reanimated-color-picker/docs/ColorKit' },
+        },
+        c = {},
+        d = [
+          { value: 'Bare workflow - typescript', id: 'bare-workflow---typescript', level: 3 },
+          { value: 'Expo managed workflow', id: 'expo-managed-workflow', level: 3 },
+          { value: 'Expo snack', id: 'expo-snack', level: 3 },
+        ];
+      function p(e) {
+        const n = {
+          a: 'a',
+          admonition: 'admonition',
+          h1: 'h1',
+          h3: 'h3',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, o.jsxs)(o.Fragment, {
+          children: [
+            (0, o.jsx)(n.h1, { id: 'examples', children: 'Examples' }),
+            '\n',
+            (0, o.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, o.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, o.jsx)(n.h3, {
+                      id: 'bare-workflow---typescript',
+                      children: (0, o.jsx)(n.a, {
+                        href: 'https://github.com/alabsi91/reanimated-color-picker/tree/main/Example',
+                        children: 'Bare workflow - typescript',
+                      }),
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, o.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, o.jsx)(n.h3, {
+                      id: 'expo-managed-workflow',
+                      children: (0, o.jsx)(n.a, {
+                        href: 'https://github.com/alabsi91/reanimated-color-picker/tree/main/ExampleExpo',
+                        children: 'Expo managed workflow',
+                      }),
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, o.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, o.jsx)(n.h3, {
+                      id: 'expo-snack',
+                      children: (0, o.jsx)(n.a, {
+                        href: 'https://snack.expo.dev/@alabsi91/reanimated-color-picker',
+                        children: 'Expo snack',
+                      }),
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, o.jsx)(n.admonition, {
+              title: 'note',
+              type: 'info',
+              children: (0, o.jsx)(n.p, { children: 'if the example is not loading, please try to refresh the page.' }),
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, o.jsx)(a.Z, {}),
+          ],
+        });
+      }
+      function m(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, o.jsx)(n, { ...e, children: (0, o.jsx)(p, { ...e }) }) : p(e);
+      }
+    },
+    7391: (e, n, r) => {
+      r.d(n, { Z: () => t });
+      r(7294);
+      var o = r(5893);
+      function t() {
+        return (0, o.jsx)('div', {
+          'data-snack-id': '@alabsi91/reanimated-color-picker',
+          'data-snack-platform': 'web',
+          'data-snack-preview': 'true',
+          'data-snack-theme': 'dark',
+          'data-snack-loading': 'lazy',
+          style: {
+            overflow: 'hidden',
+            background: '#212121',
+            border: '1px solid var(--color-border)',
+            borderRadius: '4px',
+            height: '800px',
+            width: '100%',
+          },
+        });
+      }
+    },
+    1151: (e, n, r) => {
+      r.d(n, { Z: () => s, a: () => i });
+      var o = r(7294);
+      const t = {},
+        a = o.createContext(t);
+      function i(e) {
+        const n = o.useContext(a);
+        return o.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function s(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(t)
+              : e.components || t
+            : i(e.components)),
+          o.createElement(a.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/8d402cb0.2d42b477.js b/docs/build/assets/js/8d402cb0.2d42b477.js
new file mode 100644
index 0000000..b86f3aa
--- /dev/null
+++ b/docs/build/assets/js/8d402cb0.2d42b477.js
@@ -0,0 +1,639 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [529],
+  {
+    7757: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => h,
+          contentTitle: () => d,
+          default: () => j,
+          frontMatter: () => s,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var t = i(5893),
+        l = i(1151),
+        r = i(51);
+      const s = {
+          sidebar_position: 0,
+          sidebar_label: 'HSLSaturationSlider',
+          description: 'A slider for adjusting the color saturation channel in the HSL color space.',
+        },
+        d = '<HSLSaturationSlider />',
+        c = {
+          id: 'API/Sliders/HSL/HSLSaturationSlider',
+          title: '<HSLSaturationSlider />',
+          description: 'A slider for adjusting the color saturation channel in the HSL color space.',
+          source: '@site/docs/API/Sliders/HSL/HSLSaturationSlider.mdx',
+          sourceDirName: 'API/Sliders/HSL',
+          slug: '/API/Sliders/HSL/HSLSaturationSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 0,
+          frontMatter: {
+            sidebar_position: 0,
+            sidebar_label: 'HSLSaturationSlider',
+            description: 'A slider for adjusting the color saturation channel in the HSL color space.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'HSL', permalink: '/reanimated-color-picker/docs/category/hsl' },
+          next: { title: 'LuminanceSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider' },
+        },
+        h = {},
+        o = [
+          {
+            value: 'A slider for adjusting the color saturation channel in the HSL color space.',
+            id: 'a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h1, {
+              id: 'hslsaturationslider-',
+              children: (0, t.jsx)(n.code, { children: '<HSLSaturationSlider />' }),
+            }),
+            '\n',
+            (0, t.jsx)(n.p, {
+              children: (0, t.jsx)(n.img, { alt: 'hsl_saturation', src: i(6574).Z + '', width: '256', height: '40' }),
+            }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsx)(n.h3, {
+                      id: 'a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space',
+                      children: 'A slider for adjusting the color saturation channel in the HSL color space.',
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, t.jsx)(n.h3, { id: 'adaptspectrum', children: (0, t.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsx)(n.li, {
+                  children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, t.jsx)(r.ZP, {}),
+          ],
+        });
+      }
+      function j(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => s });
+      var t = i(5893),
+        l = i(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h3, { id: 'renderthumb', children: (0, t.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, t.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, t.jsxs)(n.li, { children: ['Overrides ', (0, t.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h4, { id: 'thumbprops', children: (0, t.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, t.jsxs)(n.table, {
+              children: [
+                (0, t.jsx)(n.thead, {
+                  children: (0, t.jsxs)(n.tr, {
+                    children: [
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, t.jsxs)(n.tbody, {
+                  children: [
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, t.jsx)(n.code, { children: 'width' }) }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, t.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, t.jsxs)(n.ul, { children: ['\n', (0, t.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, t.jsx)(n.pre, {
+              children: (0, t.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    51: (e, n, i) => {
+      i.d(n, { ZP: () => d });
+      var t = i(5893),
+        l = i(1151),
+        r = i(435);
+      function s(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, l.a)(),
+            ...e.components,
+          },
+          { Shapes: s } = n;
+        return (
+          s ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, t.jsxs)(t.Fragment, {
+            children: [
+              (0, t.jsx)(n.h3, { id: 'boundedthumb', children: (0, t.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, t.jsx)(n.p, {
+                children: (0, t.jsx)(n.img, { alt: 'boundedThumb', src: i(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbsize', children: (0, t.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbcolor', children: (0, t.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, t.jsx)(n.mdxAdmonitionTitle, { children: (0, t.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, t.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, t.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'sliderthickness', children: (0, t.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, t.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, t.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, t.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, t.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbshape', children: (0, t.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, t.jsxs)(n.li, { children: [(0, t.jsx)(n.code, { children: 'values:' }), (0, t.jsx)(s, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbstyle', children: (0, t.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, t.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, t.jsx)(r.ZP, {}),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'reverse', children: (0, t.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'vertical', children: (0, t.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'gestures', children: (0, t.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, t.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'style', children: (0, t.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, t.jsxs)(n.ul, {
+                  children: ['\n', (0, t.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(s, { ...e }) }) : s(e);
+      }
+    },
+    2737: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAACCCAYAAADv7uKCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAACRNSURBVHgB7X0JkB3Vee53ZrQMy0iD2SQw0lWKZaT4WQOyJJOXBzPgBAN+RnqPcuK8GKRX5TixnQjZVcQhi+SkEieuIqDYGLvsGAGuJOAyGsdB2CzWEmKwBEgEYoYtukIbisEaSUb7zMl/us/yn6WvYHQ1Glnng1Z3n63Pnf767+/83f0fICMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjY6RAIOOwkFLWaHUdLV166aClxorU9dJPSy8tq4QQ9cO2O4faOYRujMHlGE3ttYouWndgtKSFTs0oSQutx0Bv03o0W0ax9Ri2bfZHBeVUm2N0m6Olly/18WQrbat9Wh9qEThEyYeEpG4CB9U2UeYQJA6i3FbrclFpLs/lu/QDRRpYvlsfSKTxdg5ARuXLtd+fUchIgkisSHsTSiJ30vICStL+iJZ9KMlr0KGX02hZQMvtVF/lL0aC3LKbSDwKi+hsdKFV1VN2hQhGxFGrctHbMOsEjDkSgpXX+7ySNVthm6wc1ZesStkF6YpQm8J2rqwrvdJmLex2+Z/Z9vsk2JbU/3LrKoNtUzv+U/i5mdABGJE/QcsGWp6h5YHDVOvXS52WdTqthpLcS6nN22m9BJeOrmHUwKKC0tAkLI/qzpYio9DpVWfY7MuqzEZIHDdsVuoiRVHTH8loK9geEh3Tx7EkDS4w3hdbR+gLwK8nwY8tbIpIHhOZ0BxEvDm0uouWn9DyTZSWeKio62UF9u+5Gvv3z8O1v92BHyw1R6P/wxOt90PryU+8SJWF34aUsYmzbDRtMFJSP6S20IrABbGkI7MhObf0Ql98spLaEpyQiH+lV9dQWQT1qohrr3/vosiELqCt8mJabkBpjetoFp5ePQFPr5yCU9rbsOA24KLpwFcWvo2K4Y1WnzgZpAmZrgb4Ziyy9iHj3ba5HgqSD9JGi+lKaJm5/EhR1/0Gdk/AYLJbvA0Z9cpY5zKdW3EfLTjBoQd8K2i5jJY70UwyL7+vB088+ls4dKgNu0mRPPAVYOps4OukSs6uwZMaSEkN6VZC+mlcmtgzL3wLHhr4YFtom8ivACn9XD+fWchE8wKOdlWXiyvPjslKmTbilqWWOmm5YS7zyEJ3vuf93fSrFgkMdtEtpwMjDELI/kEpVorBloV9fU/WcQRgZP5PWlYetsLGjW1YvnwinnpqAnbubLPp48fvw6xZr+ODH9yGyZNLmfIgkfmVn/TQoM9hP2U9+RAwowe4lQ57M6131OHLBL1ddBCNOq8vhlC2xKc80rAiLOvq2JJS20Bh8lgbwreQMXn58WRAUlOKS4vox+lWZHQEwfal9+uEd+kV6Jw2azGtFuF4wSDm9fWtuRtDBBFaDeB+hsOR+c47p+DWW3uwefME0sJtDcu+9719mH3JXkyddHFx/2uhP3urKNfFvl4uITK3k1PkT2i9vz9wsWm3WuiaG43YbVe49aSfb912iXaM+25UmS61m0+57YzLbrBVYpD6OEDLYOG6k9p9p91mwrnPSlea8Fx3as3dbrE7L3bN+fWEXqdcgEguA3pt7UfntJnziN+34TiCFLL7zNMn3ffGG5v733Hd0vNwFi2PVhZSRP7oR/8PvvWtHuzY0YGBgcOPObZvPwPPrJ+Itc8C554NnN5RWrRChwpn7LZvBCZNLaXH+h+UZ6JYNPnVdotOaxElIc0+X1p4umDpattcTGE94bfNjiVbtNHX60HdX7NtbgqKQEoLD8Btq0Wy7caLCLallzYQlamuL9m+09Ci5UYcZ6CbTIdsHVjwDqspMs9DOQBcWVnoqquuxic/OR+vvlrDUPAzusa+fA/w0Gp9UPsPbMJTy4Er5wGz5+gkJjcKCLcarDiOJ4O5rGC3axHcjKXUHgpWRyXR8YUuHsoIp4u1zjbyqCFCLewr51hs+KpcJrwaXM+LRNkW9iO7cRxCDBZP7t42tG5WsuoupNxySieff/7/x8MPX4pm4KFV5IEmYu/dz89KiQOU9sQy4PepK6d0IPJYmEEjZDx8t4QSDchlPCMykR16CTTFhEAVUQU7pAgvIL+UPQYqWgtVu6+WfWK7azb0QpcpQv+ncCJ6OdRDkx3wn/Q5XHnlbw3ZKlfh5TrwtftZgrMy2E55m+kh5LU3pUZXXlGvvnk6aC0sryASd4Tg8NwzwsvqNp2TLAC/kGwLjlDVD1zCgWGYF3ctuIdoP4c/iDXpxuV3QhFaW2clUVYkC1x/fU/TyWzwUh349sOmJyyDtp+n7nyAHkye2hHfpaUxifDr8JMq4lu7tbSWDTLBb00O3rYQuqjkaoSSOWHjO4kjobBrXzAA8TM+0ya31ZFPhbXg23JfnJX/nWgWuhvlo+nYOqsB4He+04Ojicd+TMTeGKcr6fFfG4APMistDVkZgURo4WRi7Vvakh1Mi1vuh5Rh2lT4RYqVlIFdjunq9gTck7+QwPHFELbgWgm1d9ga70PZzolG6EVw71r4uOWWuRgOfG91wCN9irb0Ae+7jmWkbt3Vt/OoHCdy+NaRvwEEFtJLEUFVEdf24ZPWfzSeHgZyD3Js2QXb4m15V6cuM0xv27W3t2PunGuK9dq1z2DN2mei/A9ceRnOOWcitm7dVuRv2bINzYSWG+ORehL42c9ejP7+4XmI9GKdlteAaZOgO4bihGwnC/2rHwXOqAE764mKwiemSUOFlPDevrP/wHk90rIhpKNfX5Z3DsGto0hYylT7QZ91aX9IyA5ny1UNLH17XtJ7GCz0uedOxLIH7iWynlPs3/Cx34zK3L30Tsy57tpie+bMGW/fEL0zdKPqsfYjj0zFcOKfV+kNphbVagsNDmfMiQeABYI/Ch/IpaSI54UICBbpaRk3EZlmLim4Zo61LBIpfj98yyq8mr50adArj+qG0kfdQisCr1nzNP76b9LPbGbNvARTOy/A1F+ejaMMdT/fEKUqN91zz3ViOLHpdWAP6eZTx+oEfaJ/WqeHLdPZWQvIISqsrAzKy6Auf12UFzXQb9sFJSrsStku9zYIOOEgE5a/GpKRUlYKkpTGNn0J39I7IkIr63vlFZdVSgmF9vZTmy4fhgglKf4zSlXvZgw39pD7+zUi9bTJOkGfuH5Ku+hShLdbJ1xTWljAvW9RZbHDsl6KeuLq7+sDlINBMF9YLCVCi8ptrk/EWGrwkkjse/2I0vnbd679IRNaWVUlFR5Y9iB2796Nv/rLP8M99/4jLfcV+cryfupTHy/K7dr9c8yaNaNIv3He79k2VH11MZhtBdXGY4+txlFADeXL+j7Ui0bHAps0obmlPUhEP7kjYYqYlrVMYLfklESJCK8TK5SLCJ8cGkscqQRjTR2tDK3fnlww5eOLw9SUQXkJ/0UoIzLMJcRFx5AJ/bnPfQbLeh+0UkJZ6C996YuUtrwg+At9L+OPbvlz3PK5hdhMFvqee/8pakPlz5p1Cb5AF4PaVthN5D9KqCHlruNvzQ0nlORQ4G/Ov7WjHBQGpLLgZ1sCaYEQWOuqtixKwkvbj9TdIbggBLfBzj56bcK3+obEaT+yLzdadC1p/3XtxJeJe61ULUMmtLLAX77j63a/jwg8jqztuedOoO3dBanVskuvlfcihErbquVIKj+DkzmQC57pTBA1vHfLqrKSWWhnoznZKpjEDlN1sbjDmy0R1fXbEUh/fyjhxEfKrpu2mublUMRVMBIi423CntWArCIoJAK5kBro2QYbEVz4x/FaEZq/wUNq/bTS91YIVs9v1/c981rxleHfdEKp4iyv8HsZ9MdResiEVlZ3HA34DNQA0aSPUNRRDgx9qJfzjwVO1h4Oaz0Jp5wGvFGHvbVbpAhaMZzyxGZIIAl/YMkGkYWV1tY4IlZZz5cIodzhFOb0qxIW0Q/y1Lio1NhOFskgR6UPmdBKP99ww0ft/tw5Hyq8GUp6jFAo/Rzr5Zkzj43WOU+NRQNSqgFhQWjEhK0aKFpBq/c9ksq4oojVrqWe5ns8OAyrOR9FqjVnSVOCxL9YUra+3IslR7kd/ibh/Y4ha+g77vgGeTb+FI8+0mt64HkwRiDW06JuI697qVdf/TrGjt132C9Rmo1JitBmhKXX6hXSPf2+1TYozjw7tTZbJg14mabLp/S2t2Lpgu+5LckzA5HAVa4jWBWF7WEqUtKhDASA9AjAP86QCa0086f/4OZCMytfc9Wg7pY//ouG7Sjf9TA8VFFQhL4R4bsc6hvA887bhldemYLhwsX0HOdkdf1oEpjvAs+kLjyyxCeuZ/UkN45sI6WjgchqezqdFZdh3bC8tvZC91WE3YhlReoa4+2n8xP9DC5EbvO5oDIvvB7xoLDKgzEC8V1a0o+4P/vZFRhOXHwRkiftrBrwwsrYOhsrHN5tU2Q2FjQ2gdUQ8aZMlhFJ5ZrqkYhIGNeoEhVmCOpfJlxsxJLDpJ0wb9vpcFx9tNSizN/93TrOP38DhgNnkKz4lel6hw3kzqyRH5rkxpsbAy+H9Ir6YjZh52QizzvnzK4Fb+M1JGHQDbAaPMfZ0zTxOW1FlAu4YWH6Qoh/veu7xIn3PrQS/MfWSs/7MNuR1vJhysXAdxbr85O+IZdMCTV0WMA1HVnpyq9cTBVZ3Z5HU/dU0d04fDUtvPr8tX9TP2Wp+VEl4j6kLzeXc+K9D00CFVOQ8nYoK33VVU/gaOJDlwMXTkb07eAp46lXXSQ3VpVffHPIRiSt0hWClRdpq51spspmxikiIGvqZfyyXEx2lx52I/49MkHsuD33pzmhCE2yQ7nuvoryVdIY3//+Q0dNeigif0gFZ2K3fIP/cQXw4O3OZQfh5IFoQHBzGoWvIz0NHX4g6/mmGQnZQNRVie1hbGFTAzz/gXXov+DpMtm+KZ+6xHh7Rrq433QifiSrrPQ0pLS0wqOP/mPTSX1BDfid34AjKLM66mGKctctX+JI3NCihmJWVpRjxDWW2uwUzmZm39jrowVFRPgGhX/0tEV2+WGf0r+Cyxfh1aq4j9jStp+sJfP1t3sxUMh3HKzleIS20vNpUZ9cxdJDufFefvkuXH/9D9EMdL8fWPAxIu1YuMfXmmxjKO3XqCv3LQZ+uhH2JhoZceGt3ha4VubaG6E119vRR7C+HQRTwRLhk8J4MBlbcl5WsC1ZURfBJRM+O4yfVQ4GGnopjkdIsRTvEERqNTi8m5arKwt9+9srceed38Rppw3tQj+/Bnz6BuD//lq57/FJ70zvoTvCUmDF3WWaecAiwxsxHwhqQtg7PrfoCcbLRIKoGlRxMvk2OhVnzuXKoJSoKMsvGN6CsANLd9nA2l2g6n7h/1k9z0lnZ1dNtI5eNxIDNDZAve8na6ZgCNAhdFegjNGxomFh9c3hI4904rnnGn+q1da2D+9+9zb89ke2YVzrr7gwXaI6tt3CS+LpJlRMOh17zp9+QrhYdXz6idEVeYlYdrZ9XVbqYxXTUOhlsBU2tt1Ai8AAi21n49EJP96ci1MXxrYTLD+cykImpp/g8fD8eHlxPLy4D/ZJYV/f+vq0aTN76GcuQ5W+HEmQciXkwfkYIpT0IFIr2WHIXE3qW29VTxfXYdOmNjz44ASsXTsxij46e/a24jH6eeeVLzstv38fXnn+iqRMuJgGgRNrwB/2AIf1PABgUfTTBVleGE4srCLDxECT+wrjMAgtLVfErkw86PPvQGFvjA5P2XEZyZu4DxE6O2fOo7/LdDrpI85aq7lL6Nz29vWtXYUmQH8Nri7iPShj3TXv7buH7u/Gq5rUKiDiSXQNXHp1GSDx83NLr0Yqwqid1KfC6ibTBZsISLiIpFUTDXkRSMvtQT1ZkLHSh1rKAI1qHVpoF3VURvvcAqeihlZbc39CoEbW29Qry2prLuXbuw5PBBCx1ac3N6KMede8AfLTqzux7vFrcNbEDvQQiR9aCtz7ebps+ktiKaJbgkETVeh06cuJMGRuKsxuOAOWJzfMtrtgpG5XkbqUHLIgsyL2gCbygGCEFlxGyAa3/zSpDSn57FU83G7cxuEkhy9t8pQUGnQ3WkikfhZlMBqjq4+c2DMuq+M979uAsSdPwR/O7cCPeh3Z9Is+Tk4YN5t/S/bDDvBBmGzkGmA/DkF5GZX13GHqkywT1NzIj4QXpOrz1di7kZIPfA9IfY3if6PoSpotwWoWa5mnpPBApF5Kqx5aVtHyGZSuvSkYGlQ95UWZT2T+brH/eO98+uvXi1xDZsjA76xPtSUhHKGK82fIKHnHPY6X/m7WZqibeZ7ZshcEJwyDbqMIuQvz5kTofTD/8q+6RXxYhK46N9lE7GcW4C+Set1h/wr9m7PkqIDW1t0oLbaJuLSBlp2Io5eqscZJtKiXnFU95Q1RL0Ip9+AS7ft2bXfjOrLS88hKz/Fkh6eRzbaMvRQpT8bhdPWYWG6otaSygrYHR0F7O4SVHQNcbkB7NtQiXRR/fruvnnwzju4f6uGUnDD1uTQJ21EaeoC1kQn9NsDIrYLVmFlka6xIHSXB1+ull0i88bDtdlNb7cUsst20dNH9skbEq/nEg09Is7YzzKo8SK2/hSWyr60pn/Ksa0+o8kIWedK6CaWuUw4KmbsOgs0m608d4Wtkf5BXzgCLSCu7mWFT7juB9EyzrnxJYlnocH8aC4mMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMEwP5I9ljCP3xrfrwtksv5gPcEmp6iv4NZVCavl5g0yrgrXoceCYV985Lh//FtxdDD+XX36NgA8+oIDPqK/ABlFGTBgT7IFb4X2lXfamd+tI7/CI83odX7kDUvkk3H9v69dRxc6CZYYYOEnkTFJEP7OvCphfKkGA7txFz9gF7+3WAR1pO7SjjR6v5Cy+lKtfeDuyn/H9bDGwjcu+hejYYhw7MYWI/p2a+4tNZyHKfh+woguTS9qBqYlBgUM96ZYPnFs3qeBqCNQMeZSM1KSfPM3tmX3jlZKIFG+vGHoWXFeDR8DKhhwmWyAf2LsDL6zuwqQ/46QZHXhXvzkQmNVDkVgTup7zt68sgMKfXgBkLgLOXAs8SwZ9fQuXq5iguElNqTkMb/cVFUTLxbEICDep8Qy6hCwoztRsL/1L+K+EFrvGiHJltAX92Fj9ik6klvDrhhcPb9YPPKGRCDwOIzHOgYuY9/0QH1q2ke+Nen7zGTIZhJWSwoc5g/0ZgVx3YTO1M6gZ+iZpe93mgvtSv57UVkJtNZM8PUcZIF3otXXAmodOEdGv40YvALK2JhuQo6x9PpvoV/PjwTxHnuIsErC+Z0EcR2iovxq4dC7BiGVlZImOrTAdgU2fESxewAdCjWzil7d8BvEq6+iQ6xOzbgDOnA+sX+uUElyOsTROCzKaKMjIZ5RnLXJYwVtOl8Rnn/LVv4/2JJkxr3Aq73PQUQnEkUV7PyRXf8ufYdkcJesC3An3rF+D+O0nz1lGawZAO4a47YZUQzKodUAPGrwBnzAY+uI40dw3h/IOsV2FDzppK/w7BhUF1xGeRaC9FTtjWfDpy0otEe65d/7iOxDKQJpGF7nzP+7vp1y2iIUHXSIzmr+aCGZRipRhsWdjX92QdIxCWzE/+sIa1K7VG1plMg1rsocHga9tpeZ2295dlVZFTxwLnT6DlbGB8W8XdWZaDyS0PARN7gMtX0KCR1gfr8G/LzEpLrnVdEaNGpB4BSjMdlg0QaSYX8q18Wiz45JORVOB3AL8tX6q4NsLLyrTM7bRXpnParMUogxMeHxjEvL6+NXdjhIFO+jo8uaILP16pJYbQU1KYgZ/efqkO9K4CNm4vSd0I//OicrlmurtAzDKKbU8gMo8lz8iPr6CO7KiIJy1soEYYd52dloJMGfVZxYZ201Jot5hgbjXhx21OufEOIBVwsSqNx5MGUsHOfTdeOqZ0q/l7dU6bOY84fhuOI0ghu888fdJ9b7yxecTM4EVkvh3PPDEHjz+irbIWnYXV1duKyN/8ZyLzanLZ7aSzc+jwDW96kyzvi8D3/x24gKz2OR2sXbZWHo9xnaX0ePMH5Rk2F0ArW+iCEta7Iv1yLfom0qJcd6KIFV2OF2kfZVR/FfFT6W21r/KUz3qw4SLstmR1B3T6gLbIqfKDun3J9mWQZ9aW0GecdZ4icw3HEeiUtMmWQbz5060/wAgAkXkedu74Ah78Nv2FDzEHqnCS4/6HgW8tL4k8FPycLPlDz5ZtXjLZWWbBLhxF6kkfJ6tPF8CevpjMnOAtwaKkR0Fk6Am2FKFlsT/ICO0TSXgEi0npk5/nD8CRdcCrJ4N9vi2KYw6wdNOHFnY2unEcQgwWT9iOObRuXoR/uoue7Cn5wAdO9Kd+i9L+9h7gsR+jKfh7kiqfovZ273dp5pBKU79OXpX3UF9Gh8Mg7q5wilNNtunP0WoyJFLgQzjfl8xVbOy488sYxezSuLo2LfsPUiS4byTU6tnL0TzchOfW1bBrpzdgsk/uvnY/SY2NaCqeofZuvl/v+F4K7NlA1pyeQk66SScEHgTu1RBsJlmRKG13pOfsc6l8SyYccNyRJxEOHNllFVxSsUMvvlykrWluUBlHCG2dF+DxFfBdZfrPv3wl8HKTyWzwdB249WH4dwS9/hn155xP0KBPWenQRcI9ICYn7Lu2mtLti+SknX75dIkU2X3nYOpiaHwc6fVd/ZcJ3Rx049/JB7yrP76bvlwnzbsaRxX/QDLmqToimTOo3g0hS/3umxDJgUBK+ET17aITA/wukM4PWtX/VpO90SWQSjfELbdjZEI3B4vw3PogSZPiH76HYcHXVsO/nes+vEWDwtOvi/M8Yko2eT3P5ATW1lkE1QPEutYdo6qGeUDi3y/iowhElyW4TFHIhD5CFHKjf0cNGzfo8ybceVhD3oifDZNHUVnop16Db11pvY/6dRK58dpqNqlAIEZDJWGUqcswTxP5IwwzH1aiQd6GPaSItlxelV72tbprkz3lZKUyoY8c3dhYh/U388fSz/VhWPHVlYgtIXVqDw0O3zVH76Zv+uHbpvb1znBM4L0fIrVt5VQM5QV/3ucPH8M+pOFfFp788VLKSyIT+shxXUFofp4V9pI77fmXMKzo2+678Qz21YGTp+sdbc+SWthZZPuunLA5ZVlZJR14ezFdG0sU3xHHW0pR2eWHj8eb/Ppoe3s75s65plj39b2Mx364yuaNo7SZMy8p0ubOuRbnnDMRW7duw7LeB3Gco6MYDJr3HgrQxpZtGHbspkFg3+vA7Mkskfp1gNLGX+qn8fel9bZMWfeiLH8B1Lbgpfj616ewn4coz1GZlwzf8eA9EMwu+71qmoU+99yJWPbAvejsvBC7d+/GH31uIf7qL//M5rePOxVf/tIXcffSOwsymzKziOTHOUhD97Nbuf4Db92OYwJlpcOR2+Be7bpL3dqFtbqC1fGIIr3SbO3IVm2FhaedeSpYbQkuUSRrXQTHMxcf33JCp2kW+lOf/DheeOFF3PLHf1HsP/bYajz6SC96e/8Fa9Y+Y8vdccfX7f6smTMKq83zj0OoQSE9Rha+1du7H8cEu/eCsbLEIbrgxtb8dBna3JRYQGReYwudFgOVDdhUTlpfp4vKtlI9EEx4NFFDTyXLvJYRcwvJiS102+3svMArt4XdineRlc5oNrStShljyRZtjoUtq8lpjbv7jpDNYJ9okK99Re7SeDkR9NX/F1Fu2C6iPnDr3jRCt7efil27fu6lKVIrPX1CoCCKxMiAhPuQQEG4FSNvWdKUlV517hjzpAWrz9WtD6d1/aOFwsQpaP4BrKN/I5KLYCnRNEIr8ir9zDGVrHNf3zCP9IcfdXR0wH0uhXJ90lgcE7S36Q1GnFHjgf11Vsjvq+/JK6WTccq5pjT5mGqpUOR2K36i57/m79qRrI5/uYVthwIp/EqxaYRes+ZpfOADlxeDQ4UbPvabhcVW3o5fcPRjbIJE50zAMUHn2XHaqNMYoYMBo5TBjSWknA9DZC4tYmkgkRYffunDK22/jkzm+WjaoPCOr3wD48a1Y9l37sXmLa/j3edOwKd//+bCcv+CYz0mTOzCG+Qas3qU/vT0+wsrPdyDw05zITnvReHhGDBPLI2J5S47XT4acLl/uYvPFwehFQ3dbj641XaxOXyPhWsrkPzwexfa/+Knoon4wl/fhi/f8Y1CT28NiKwGg1N/ebaXZjwixznWY3INxbsc6ssP89dXZFakfmUjhg1XXESSYyzshWW8Lm1TgO1LdCFOUE5in9iCbXNNYr8zjOhqvA1VdlQmttOeb3us5FGqJYlC058UKv/y1l98q8zxXVw4FeVADN7Jx1WXYVjR0wlLGK4j1HscO1fqHW5Vw5u+W/sqxBcY7k0OH9WyIT4Ov3z4loxS/Pq+gw/RXn70fYQQQtTR1kZWeopOYZboghpw/mQMC9Q3hh9+LxytmHVWfmhvUIi0IGXwVKvg9PUHYgKxqg7BPca+jBGVpat65JcTtl1TLxO6OejFhZ3uxPNzfPUwWek//zD4m3GWGO1dwGuLERFCMGoxCcHD38GUkK49Z18N5Z0/RCRlCC8Z+6N9q54mekpfI2hTZgvdVCzBe7uYt0NBa80LyEJ2z8ZRxScuB2aYOwEjgxoMtl9MfphV4N0q1yWVfIcZ9Iv+zpbK8B0VuOEgR5p01V+gSM/Ch3mpfRGV56OAHDmpiSASEJlPuh2/2g2rpRXMA4vrf52IfZSkx4wa8Dv6LuAxgY79rh5g0+1abjAHsoWE7xJzfgXJy8vQc+FoFDZa5fNI5XPrHtr/cPjnSsigfb8vmdDNwxK879J+nDeFnWf2x//EbwAXNpnUKozBFz8SjuDKlfraezT5n19b0rAJaf/h/mkR8F8GdcJBZZW19T+qjTW02w6jkPoSJSwNWyd0+VlCqxBbyBgyCisNzMc1c+FLD5R/8ZPJnfaZG4H/3SRN/RGSMXfcAJzaxs6yJkALpZ03H3h1cWmdPbMo4gtAmLpGQEvmrInJBxnaztKaVskLU0oCzCb7tfl+5XGjFl27pgS30EtxPEKKpRghIFL3YlzH7ei5hqeyc0QbH74cuJmIePoQwwZ21YC/o/oLfr1sW0jfwiqcdQWweSk5/++xXbD5FXE2TKAaGd3pE2pZRCmmMBIN88ailEblG7VbJWVsemdnV020jl43EgM0NkC97ydrpmAEQYfQXWFj25kwWyYyUasmhIp592/PAs+8CDz9YuNGT2krgzbOI+t+8eQyfJeJmafWqs0iXh6VnUBkHktd+NdLgDFSTzshy3h2evoJN21FGdNObatpKKSOcadi2g22lrHtzJQUh8xCnT8o4phyPBYdjz9npqWonooinrLiQNRWHBvPn/5CFmtVzz4p7OtbX582bWYP/bxltFvDSIeUKyEPzscIg5IeROq5eH/PCvob17B2hclBNDD7X9OBy7vKSEsq8uhrOmijjT7aVkYeVWQeN7Ykrr1xs8GQsaJn95Qx7R7vYYdjOlcE/TAD2FBDi1IIFFlSRgNJacuw3w00kBzhUI5rbhnVjtsK38DjQ1jj42hg/Ts7Z86jW890OjkjzlrTH7ifDERvX9/aVRjB0MFnluHZJ7rwFJH64D7fSkfRSBFY8op1anvMSaSZry7P5o/mlqF0TbRRHnl0dJxWThYEG3lUksUfNJMGkQwZoL5xC22tpji8hTYRQ8NIoqkJg/xIo/7ERFWW3i9XbjeWMxlHDCL2bdi14yZ87y7grf50gMRU4MRGhOb7HaS4folI/OpS4PnPU8JOPUOW0PLCSA5YmcGlhyV0ITtEQWRFaiVBijC6wkgOoSWHJpTaB5KzVcWSo3Fo3PRMWqm8dFjeg7YfeRasow66yy0kUj+L//eZRXhpXQ3ryFrvSTiU7G1fxi5Ym29bJRKSBJlEevk0ekK5aj6wtdeRtrgLB7KEywyzJVl7xXHVFx868qhXpxx8uq9bYNtNRdOI3XqpfjQWKVU/ndcOB40iW+jhg41/p4I6vrKOLOp64L82aPkBZ3WF9MPfhhb5XWSRzyQSj6f1f3yVrPLfwQY296QFs8zcWptBoSdJTMBzvW4tB4XOQusA5yI1WFPWlgcpF8F+ehB3OMtcNRCM7wR+e5nQwwxN7G6o8GFv7ahhe52IXS+ncFOLmmTTeEbUPIVjSR+Pp0HhaVTtrKnAm33AK2SN19MDk8GdaYLyiTWLbZkm+xiUxxltNLReWst1ITHsxJtadsCPsh/e+tN5vmwwEsFJD+7dOFw7qVkDhN3PhD6GYORWwefMLLI1W+DNeknwbcqak4vvpd7ETLKCEVM6wvL8UUGe2h9j8yWRVxR5rVpLjyoHhk47S+uucwQq0iSRSBxM6lqZcK1Bl/fLOisvWDsS/oy0jtDxHUDY/YyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjJGD/wawHL6B/hNrmQAAAABJRU5ErkJggg==';
+    },
+    6574: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t = i.p + 'assets/images/hsl_saturation-640380a560465175a49e9a4f74d54f0a.png';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => d, a: () => s });
+      var t = i(7294);
+      const l = {},
+        r = t.createContext(l);
+      function s(e) {
+        const n = t.useContext(r);
+        return t.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function d(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(l)
+              : e.components || l
+            : s(e.components)),
+          t.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/8d402cb0.4ccae590.js b/docs/build/assets/js/8d402cb0.4ccae590.js
deleted file mode 100644
index df5aac3..0000000
--- a/docs/build/assets/js/8d402cb0.4ccae590.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[176],{3791:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"API/Sliders/HSL/HSLSaturationSlider","title":"<HSLSaturationSlider />","description":"A slider for adjusting the color saturation channel in the HSL color space.","source":"@site/docs/API/Sliders/HSL/HSLSaturationSlider.mdx","sourceDirName":"API/Sliders/HSL","slug":"/API/Sliders/HSL/HSLSaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":0,"frontMatter":{"sidebar_position":0,"sidebar_label":"HSLSaturationSlider","description":"A slider for adjusting the color saturation channel in the HSL color space."},"sidebar":"tutorialSidebar","previous":{"title":"HSL","permalink":"/reanimated-color-picker/docs/category/hsl"},"next":{"title":"LuminanceSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"}}');var t=i(4848),r=i(8453),d=i(7869);const s={sidebar_position:0,sidebar_label:"HSLSaturationSlider",description:"A slider for adjusting the color saturation channel in the HSL color space."},c="<HSLSaturationSlider />",h={},o=[{value:"A slider for adjusting the color saturation channel in the HSL color space.",id:"a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space",level:3},{value:"Props",id:"props",level:2},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},...d.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"hslsaturationslider-",children:(0,t.jsx)(n.code,{children:"<HSLSaturationSlider />"})})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"hsl_saturation",src:i(4028).A+"",width:"256",height:"40"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.h3,{id:"a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space",children:"A slider for adjusting the color saturation channel in the HSL color space."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(n.h3,{id:"adaptspectrum",children:(0,t.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n","\n",(0,t.jsx)(d.Ay,{})]})}function u(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},4028:(e,n,i)=>{i.d(n,{A:()=>l});const l=i.p+"assets/images/hsl_saturation-640380a560465175a49e9a4f74d54f0a.png"},5529:(e,n,i)=>{i.d(n,{Ay:()=>s,RM:()=>r});var l=i(4848),t=i(8453);const r=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function d(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},7793:(e,n,i)=>{i.d(n,{A:()=>l});const l="data:image/png;base64,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"},7869:(e,n,i)=>{i.d(n,{Ay:()=>c,RM:()=>d});var l=i(4848),t=i(8453),r=i(5529);const d=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...r.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,t.R)(),...e.components},{Shapes:d}=n;return d||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"boundedthumb",children:(0,l.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"boundedThumb",src:i(7793).A+"",width:"180",height:"130"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbsize",children:(0,l.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbcolor",children:(0,l.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,l.jsxs)(n.admonition,{type:"info",children:[(0,l.jsx)(n.mdxAdmonitionTitle,{children:(0,l.jsx)(n.strong,{children:"*interactive"})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,l.jsx)(n.h3,{id:"sliderthickness",children:(0,l.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["The thickness is the ",(0,l.jsx)(n.code,{children:"width"})," of the slider in ",(0,l.jsx)(n.code,{children:"vertical"})," mode or the ",(0,l.jsx)(n.code,{children:"height"})," in ",(0,l.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbshape",children:(0,l.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"values:"}),(0,l.jsx)(d,{})]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbstyle",children:(0,l.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,l.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,l.jsx)(r.Ay,{}),"\n",(0,l.jsx)(n.h3,{id:"reverse",children:(0,l.jsx)(n.code,{children:"reverse"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"vertical",children:(0,l.jsx)(n.code,{children:"vertical"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"gestures",children:(0,l.jsx)(n.code,{children:"gestures"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,l.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,l.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"style",children:(0,l.jsx)(n.code,{children:"style"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{title:"note",type:"info",children:(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(s,{...e})}):s(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>d,x:()=>s});var l=i(6540);const t={},r=l.createContext(t);function d(e){const n=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:d(e.components),l.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/90e27583.36e02f53.js b/docs/build/assets/js/90e27583.36e02f53.js
deleted file mode 100644
index 28e0628..0000000
--- a/docs/build/assets/js/90e27583.36e02f53.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[794],{540:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>x,frontMatter:()=>c,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"id":"API/Preview/ExtraThumb","title":"<ExtraThumb />","description":"Adds an extra thumb to the Panel3 component.","source":"@site/docs/API/Preview/ExtraThumb.mdx","sourceDirName":"API/Preview","slug":"/API/Preview/ExtraThumb","permalink":"/reanimated-color-picker/docs/API/Preview/ExtraThumb","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":19,"frontMatter":{"sidebar_position":19,"sidebar_label":"ExtraThumb","description":"Adds an extra thumb to the Panel3 component."},"sidebar":"tutorialSidebar","previous":{"title":"Swatches","permalink":"/reanimated-color-picker/docs/API/Preview/Swatches"},"next":{"title":"ColorKit","permalink":"/reanimated-color-picker/docs/ColorKit"}}');var i=r(4848),t=r(8453),l=r(5529);const c={sidebar_position:19,sidebar_label:"ExtraThumb",description:"Adds an extra thumb to the Panel3 component."},o="<ExtraThumb />",d={},h=[{value:"Usage",id:"usage",level:2},{value:"Props",id:"props",level:2},{value:"<code>colorTransform</code>",id:"colortransform",level:3},{value:"<code>hueTransform</code>",id:"huetransform",level:3},{value:"<code>saturationTransform</code>",id:"saturationtransform",level:3},{value:"<code>brightnessTransform</code>",id:"brightnesstransform",level:3},{value:"<code>onChange</code>",id:"onchange",level:3},{value:"<code>onChangeJS</code>",id:"onchangejs",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>renderCenterLine</code>",id:"rendercenterline",level:3},...l.RM];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components},{Shapes:s}=n;return s||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"extrathumb-",children:(0,i.jsx)(n.code,{children:"<ExtraThumb />"})})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"panel3-extraThumbs",src:r(6643).A+"",width:"318",height:"318"})}),"\n",(0,i.jsxs)(n.p,{children:["Adds an extra thumb to the ",(0,i.jsx)(n.code,{children:"Panel3"})," component."]}),"\n",(0,i.jsx)(n.admonition,{title:"Note",type:"info",children:(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["This component is used exclusively in the ",(0,i.jsx)(n.code,{children:"Panel3"})," component."]}),"\n",(0,i.jsx)(n.li,{children:"It serves as an indicator for the desired color and does not respond to any gestures."}),"\n"]})}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"<Panel3 style={styles.panelStyle} renderCenterLine adaptSpectrum>\n  <ExtraThumb thumbShape='circle' hueTransform={120} />\n  <ExtraThumb thumbShape='circle' hueTransform={140} />\n  <ExtraThumb thumbShape='circle' hueTransform={160} />\n  {/* using colorTransform to transform the hue channel */}\n  <ExtraThumb\n    thumbShape='circle'\n    colorTransform={color => {\n      'worklet';\n      return colorKit.runOnUI().spin(color, 180).hsv().object();\n    }}\n  />\n  <ExtraThumb thumbShape='circle' hueTransform={200} />\n  <ExtraThumb thumbShape='circle' hueTransform={220} />\n  <ExtraThumb thumbShape='circle' hueTransform={240} />\n</Panel3>\n"})}),"\n",(0,i.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,i.jsx)(n.h3,{id:"colortransform",children:(0,i.jsx)(n.code,{children:"colorTransform"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"A Worklet function to transform or modify the color in the HSV (Hue, Saturation, Value) color space, taking an HSVA color object as input and returning a new HSVA color object. The returned object determines the thumb's position inside the panel."}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"(color: HSVObject) => HSVObject"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"huetransform",children:(0,i.jsx)(n.code,{children:"hueTransform"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An alternative to ",(0,i.jsx)(n.code,{children:"colorTransform"})," for transforming the hue channel, where the transform amount can be a ",(0,i.jsx)(n.code,{children:"number"})," or a ",(0,i.jsx)(n.code,{children:"string"}),", allowing negative values. For example, it can be expressed as ",(0,i.jsx)(n.code,{children:"'50%'"})," or ",(0,i.jsx)(n.code,{children:"50"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"string | number"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"saturationtransform",children:(0,i.jsx)(n.code,{children:"saturationTransform"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An alternative to ",(0,i.jsx)(n.code,{children:"colorTransform"})," for transforming the saturation channel, where the transform amount can be a ",(0,i.jsx)(n.code,{children:"number"})," or a ",(0,i.jsx)(n.code,{children:"string"}),", allowing negative values. For example, it can be expressed as ",(0,i.jsx)(n.code,{children:"'50%'"})," or ",(0,i.jsx)(n.code,{children:"50"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"string | number"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"brightnesstransform",children:(0,i.jsx)(n.code,{children:"brightnessTransform"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An alternative to ",(0,i.jsx)(n.code,{children:"colorTransform"})," for transforming the brightness channel, where the transform amount can be a ",(0,i.jsx)(n.code,{children:"number"})," or a ",(0,i.jsx)(n.code,{children:"string"}),", allowing negative values. For example, it can be expressed as ",(0,i.jsx)(n.code,{children:"'50%'"})," or ",(0,i.jsx)(n.code,{children:"50"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"string | number"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"onchange",children:(0,i.jsx)(n.code,{children:"onChange"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Triggers every time the user modifies the color, allowing you to get the transformed color through a worklet function passed as a callback."}),"\n",(0,i.jsxs)(n.li,{children:["Accepts ",(0,i.jsx)(n.code,{children:"worklet"})," function only. For non-",(0,i.jsx)(n.code,{children:"worklet"})," functions, use ",(0,i.jsx)(n.code,{children:"onChangeJS"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["The passed color object has the following properties: ",(0,i.jsx)(n.code,{children:"hex"}),", ",(0,i.jsx)(n.code,{children:"rgb"}),", ",(0,i.jsx)(n.code,{children:"rgba"}),", ",(0,i.jsx)(n.code,{children:"hsv"}),", ",(0,i.jsx)(n.code,{children:"hsva"}),", ",(0,i.jsx)(n.code,{children:"hwb"}),", ",(0,i.jsx)(n.code,{children:"hwba"}),", ",(0,i.jsx)(n.code,{children:"hsl"}),", and ",(0,i.jsx)(n.code,{children:"hsla"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"(color: object) => void"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"onchangejs",children:(0,i.jsx)(n.code,{children:"onChangeJS"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Triggers every time the user modifies the color, allowing you to get the transformed color through a worklet function passed as a callback."}),"\n",(0,i.jsxs)(n.li,{children:["Accepts none-",(0,i.jsx)(n.code,{children:"worklet"})," function. For ",(0,i.jsx)(n.code,{children:"worklet"})," functions, use ",(0,i.jsx)(n.code,{children:"onChange"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["The passed color object has the following properties: ",(0,i.jsx)(n.code,{children:"hex"}),", ",(0,i.jsx)(n.code,{children:"rgb"}),", ",(0,i.jsx)(n.code,{children:"rgba"}),", ",(0,i.jsx)(n.code,{children:"hsv"}),", ",(0,i.jsx)(n.code,{children:"hsva"}),", ",(0,i.jsx)(n.code,{children:"hwb"}),", ",(0,i.jsx)(n.code,{children:"hwba"}),", ",(0,i.jsx)(n.code,{children:"hsl"}),", and ",(0,i.jsx)(n.code,{children:"hsla"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"(color: object) => void"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["To prevent performance issues, it is best to avoid using ",(0,i.jsx)(n.code,{children:"setState"})," in the ",(0,i.jsx)(n.code,{children:"onChange"})," callback."]}),"\n",(0,i.jsxs)(n.li,{children:["It is highly recommended to utilize the ",(0,i.jsx)(n.code,{children:"useSharedValue"})," function from the ",(0,i.jsx)(n.code,{children:"react-native-reanimated"})," library."]}),"\n"]})}),"\n",(0,i.jsx)(n.h3,{id:"thumbsize",children:(0,i.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb size (height*width)."}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"number"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," inherit from ",(0,i.jsx)(n.code,{children:"Panel3"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbcolor",children:(0,i.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change thumb's color."}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," inherit from ",(0,i.jsx)(n.code,{children:"Panel3"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbshape",children:(0,i.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change thumb's shape and appearance."}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Values:"})," ",(0,i.jsx)(s,{})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," inherit from ",(0,i.jsx)(n.code,{children:"Panel3"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbstyle",children:(0,i.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"ViewStyle"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," inherit from ",(0,i.jsx)(n.code,{children:"Panel3"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,i.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"ViewStyle"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," inherit from ",(0,i.jsx)(n.code,{children:"Panel3"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"rendercenterline",children:(0,i.jsx)(n.code,{children:"renderCenterLine"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Controls whether to render a line from the center of the panel to the thumb (handle)."}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type:"})," ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," inherit from ",(0,i.jsx)(n.code,{children:"Panel3"})]}),"\n"]}),"\n","\n",(0,i.jsx)(l.Ay,{})]})}function x(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},5529:(e,n,r)=>{r.d(n,{Ay:()=>c,RM:()=>t});var s=r(4848),i=r(8453);const t=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function l(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h3,{id:"renderthumb",children:(0,s.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["Function which receives ",(0,s.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,s.jsxs)(n.li,{children:["Overrides ",(0,s.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,s.jsx)(n.h4,{id:"thumbprops",children:(0,s.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,s.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"positionStyle"})}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"StyleProp"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"width"})}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,s.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"height"})}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,s.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"adaptiveColor"})}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"SharedValue<string>"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"currentColor"})}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"SharedValue<string>"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"initialColor"})}),(0,s.jsx)(n.td,{style:{textAlign:"center"},children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,s.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function c(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},6643:(e,n,r)=>{r.d(n,{A:()=>s});const s=r.p+"assets/images/panel3-extraThumbs-10b8ca0c3a22276a2024ccb2ec38524b.png"},8453:(e,n,r)=>{r.d(n,{R:()=>l,x:()=>c});var s=r(6540);const i={},t=s.createContext(i);function l(e){const n=s.useContext(t);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(t.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/90e27583.4a3037b6.js b/docs/build/assets/js/90e27583.4a3037b6.js
new file mode 100644
index 0000000..f31ff31
--- /dev/null
+++ b/docs/build/assets/js/90e27583.4a3037b6.js
@@ -0,0 +1,770 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [839],
+  {
+    5692: (e, n, r) => {
+      r.r(n),
+        r.d(n, {
+          assets: () => d,
+          contentTitle: () => c,
+          default: () => x,
+          frontMatter: () => l,
+          metadata: () => o,
+          toc: () => h,
+        });
+      var i = r(5893),
+        s = r(1151),
+        t = r(435);
+      const l = {
+          sidebar_position: 19,
+          sidebar_label: 'ExtraThumb',
+          description: 'Adds an extra thumb to the Panel3 component.',
+        },
+        c = '<ExtraThumb />',
+        o = {
+          id: 'API/Preview/ExtraThumb',
+          title: '<ExtraThumb />',
+          description: 'Adds an extra thumb to the Panel3 component.',
+          source: '@site/docs/API/Preview/ExtraThumb.mdx',
+          sourceDirName: 'API/Preview',
+          slug: '/API/Preview/ExtraThumb',
+          permalink: '/reanimated-color-picker/docs/API/Preview/ExtraThumb',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 19,
+          frontMatter: {
+            sidebar_position: 19,
+            sidebar_label: 'ExtraThumb',
+            description: 'Adds an extra thumb to the Panel3 component.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Swatches', permalink: '/reanimated-color-picker/docs/API/Preview/Swatches' },
+          next: { title: 'ColorKit', permalink: '/reanimated-color-picker/docs/ColorKit' },
+        },
+        d = {},
+        h = [
+          { value: 'Usage', id: 'usage', level: 2 },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>colorTransform</code>', id: 'colortransform', level: 3 },
+          { value: '<code>hueTransform</code>', id: 'huetransform', level: 3 },
+          { value: '<code>saturationTransform</code>', id: 'saturationtransform', level: 3 },
+          { value: '<code>brightnessTransform</code>', id: 'brightnesstransform', level: 3 },
+          { value: '<code>onChange</code>', id: 'onchange', level: 3 },
+          { value: '<code>onChangeJS</code>', id: 'onchangejs', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>renderCenterLine</code>', id: 'rendercenterline', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            p: 'p',
+            pre: 'pre',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, s.a)(),
+            ...e.components,
+          },
+          { Shapes: l } = n;
+        return (
+          l ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, i.jsxs)(i.Fragment, {
+            children: [
+              (0, i.jsx)(n.h1, { id: 'extrathumb-', children: (0, i.jsx)(n.code, { children: '<ExtraThumb />' }) }),
+              '\n',
+              (0, i.jsx)(n.p, {
+                children: (0, i.jsx)(n.img, { alt: 'panel3-extraThumbs', src: r(3955).Z + '', width: '318', height: '318' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.p, {
+                children: ['Adds an extra thumb to the ', (0, i.jsx)(n.code, { children: 'Panel3' }), ' component.'],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                title: 'Note',
+                type: 'info',
+                children: (0, i.jsxs)(n.ul, {
+                  children: [
+                    '\n',
+                    (0, i.jsxs)(n.li, {
+                      children: [
+                        'This component is used exclusively in the ',
+                        (0, i.jsx)(n.code, { children: 'Panel3' }),
+                        ' component.',
+                      ],
+                    }),
+                    '\n',
+                    (0, i.jsx)(n.li, {
+                      children: 'It serves as an indicator for the desired color and does not respond to any gestures.',
+                    }),
+                    '\n',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, i.jsx)(n.h2, { id: 'usage', children: 'Usage' }),
+              '\n',
+              (0, i.jsx)(n.pre, {
+                children: (0, i.jsx)(n.code, {
+                  className: 'language-jsx',
+                  children:
+                    "<Panel3 style={styles.panelStyle} renderCenterLine adaptSpectrum>\r\n  <ExtraThumb thumbShape='circle' hueTransform={120} />\r\n  <ExtraThumb thumbShape='circle' hueTransform={140} />\r\n  <ExtraThumb thumbShape='circle' hueTransform={160} />\r\n  {/* using colorTransform to transform the hue channel */}\r\n  <ExtraThumb\r\n    thumbShape='circle'\r\n    colorTransform={color => {\r\n      'worklet';\r\n      return colorKit.runOnUI().spin(color, 180).hsv().object();\r\n    }}\r\n  />\r\n  <ExtraThumb thumbShape='circle' hueTransform={200} />\r\n  <ExtraThumb thumbShape='circle' hueTransform={220} />\r\n  <ExtraThumb thumbShape='circle' hueTransform={240} />\r\n</Panel3>\n",
+                }),
+              }),
+              '\n',
+              (0, i.jsx)(n.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'colortransform', children: (0, i.jsx)(n.code, { children: 'colorTransform' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      "A Worklet function to transform or modify the color in the HSV (Hue, Saturation, Value) color space, taking an HSVA color object as input and returning a new HSVA color object. The returned object determines the thumb's position inside the panel.",
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Type:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: '(color: HSVObject) => HSVObject' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'huetransform', children: (0, i.jsx)(n.code, { children: 'hueTransform' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'An alternative to ',
+                      (0, i.jsx)(n.code, { children: 'colorTransform' }),
+                      ' for transforming the hue channel, where the transform amount can be a ',
+                      (0, i.jsx)(n.code, { children: 'number' }),
+                      ' or a ',
+                      (0, i.jsx)(n.code, { children: 'string' }),
+                      ', allowing negative values. For example, it can be expressed as ',
+                      (0, i.jsx)(n.code, { children: "'50%'" }),
+                      ' or ',
+                      (0, i.jsx)(n.code, { children: '50' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Type:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: 'string | number' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'saturationtransform', children: (0, i.jsx)(n.code, { children: 'saturationTransform' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'An alternative to ',
+                      (0, i.jsx)(n.code, { children: 'colorTransform' }),
+                      ' for transforming the saturation channel, where the transform amount can be a ',
+                      (0, i.jsx)(n.code, { children: 'number' }),
+                      ' or a ',
+                      (0, i.jsx)(n.code, { children: 'string' }),
+                      ', allowing negative values. For example, it can be expressed as ',
+                      (0, i.jsx)(n.code, { children: "'50%'" }),
+                      ' or ',
+                      (0, i.jsx)(n.code, { children: '50' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Type:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: 'string | number' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'brightnesstransform', children: (0, i.jsx)(n.code, { children: 'brightnessTransform' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'An alternative to ',
+                      (0, i.jsx)(n.code, { children: 'colorTransform' }),
+                      ' for transforming the brightness channel, where the transform amount can be a ',
+                      (0, i.jsx)(n.code, { children: 'number' }),
+                      ' or a ',
+                      (0, i.jsx)(n.code, { children: 'string' }),
+                      ', allowing negative values. For example, it can be expressed as ',
+                      (0, i.jsx)(n.code, { children: "'50%'" }),
+                      ' or ',
+                      (0, i.jsx)(n.code, { children: '50' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Type:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: 'string | number' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'onchange', children: (0, i.jsx)(n.code, { children: 'onChange' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'Triggers every time the user modifies the color, allowing you to get the transformed color through a worklet function passed as a callback.',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'Accepts ',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' function only. For non-',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' functions, use ',
+                      (0, i.jsx)(n.code, { children: 'onChangeJS' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The passed color object has the following properties: ',
+                      (0, i.jsx)(n.code, { children: 'hex' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsv' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsva' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsl' }),
+                      ', and ',
+                      (0, i.jsx)(n.code, { children: 'hsla' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Type:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: '(color: object) => void' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: 'undefined' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'onchangejs', children: (0, i.jsx)(n.code, { children: 'onChangeJS' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'Triggers every time the user modifies the color, allowing you to get the transformed color through a worklet function passed as a callback.',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'Accepts none-',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' function. For ',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' functions, use ',
+                      (0, i.jsx)(n.code, { children: 'onChange' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The passed color object has the following properties: ',
+                      (0, i.jsx)(n.code, { children: 'hex' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsv' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsva' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsl' }),
+                      ', and ',
+                      (0, i.jsx)(n.code, { children: 'hsla' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Type:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: '(color: object) => void' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' ',
+                      (0, i.jsx)(n.code, { children: 'undefined' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                type: 'tip',
+                children: (0, i.jsxs)(n.ul, {
+                  children: [
+                    '\n',
+                    (0, i.jsxs)(n.li, {
+                      children: [
+                        'To prevent performance issues, it is best to avoid using ',
+                        (0, i.jsx)(n.code, { children: 'setState' }),
+                        ' in the ',
+                        (0, i.jsx)(n.code, { children: 'onChange' }),
+                        ' callback.',
+                      ],
+                    }),
+                    '\n',
+                    (0, i.jsxs)(n.li, {
+                      children: [
+                        'It is highly recommended to utilize the ',
+                        (0, i.jsx)(n.code, { children: 'useSharedValue' }),
+                        ' function from the ',
+                        (0, i.jsx)(n.code, { children: 'react-native-reanimated' }),
+                        ' library.',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbsize', children: (0, i.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Thumb size (height*width).' }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [(0, i.jsx)(n.strong, { children: 'Type:' }), ' ', (0, i.jsx)(n.code, { children: 'number' })],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' inherit from ',
+                      (0, i.jsx)(n.code, { children: 'Panel3' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbcolor', children: (0, i.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Change thumb's color." }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [(0, i.jsx)(n.strong, { children: 'Type:' }), ' ', (0, i.jsx)(n.code, { children: 'string' })],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' inherit from ',
+                      (0, i.jsx)(n.code, { children: 'Panel3' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbshape', children: (0, i.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Change thumb's shape and appearance." }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [(0, i.jsx)(n.strong, { children: 'Type:' }), ' ', (0, i.jsx)(n.code, { children: 'string' })],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.strong, { children: 'Values:' }), ' ', (0, i.jsx)(l, {})] }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' inherit from ',
+                      (0, i.jsx)(n.code, { children: 'Panel3' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbstyle', children: (0, i.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [(0, i.jsx)(n.strong, { children: 'Type:' }), ' ', (0, i.jsx)(n.code, { children: 'ViewStyle' })],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' inherit from ',
+                      (0, i.jsx)(n.code, { children: 'Panel3' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, i.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [(0, i.jsx)(n.strong, { children: 'Type:' }), ' ', (0, i.jsx)(n.code, { children: 'ViewStyle' })],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' inherit from ',
+                      (0, i.jsx)(n.code, { children: 'Panel3' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'rendercenterline', children: (0, i.jsx)(n.code, { children: 'renderCenterLine' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: 'Controls whether to render a line from the center of the panel to the thumb (handle).',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [(0, i.jsx)(n.strong, { children: 'Type:' }), ' ', (0, i.jsx)(n.code, { children: 'boolean' })],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      (0, i.jsx)(n.strong, { children: 'Default:' }),
+                      ' inherit from ',
+                      (0, i.jsx)(n.code, { children: 'Panel3' }),
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, i.jsx)(t.ZP, {}),
+            ],
+          })
+        );
+      }
+      function x(e = {}) {
+        const { wrapper: n } = { ...(0, s.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, r) => {
+      r.d(n, { ZP: () => l });
+      var i = r(5893),
+        s = r(1151);
+      function t(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, s.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h3, { id: 'renderthumb', children: (0, i.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, i.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: ['Overrides ', (0, i.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h4, { id: 'thumbprops', children: (0, i.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, i.jsxs)(n.table, {
+              children: [
+                (0, i.jsx)(n.thead, {
+                  children: (0, i.jsxs)(n.tr, {
+                    children: [
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, i.jsxs)(n.tbody, {
+                  children: [
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, i.jsx)(n.code, { children: 'width' }) }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, i.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, i.jsx)(n.pre, {
+              children: (0, i.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function l(e = {}) {
+        const { wrapper: n } = { ...(0, s.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(t, { ...e }) }) : t(e);
+      }
+    },
+    3955: (e, n, r) => {
+      r.d(n, { Z: () => i });
+      const i = r.p + 'assets/images/panel3-extraThumbs-10b8ca0c3a22276a2024ccb2ec38524b.png';
+    },
+    1151: (e, n, r) => {
+      r.d(n, { Z: () => c, a: () => l });
+      var i = r(7294);
+      const s = {},
+        t = i.createContext(s);
+      function l(e) {
+        const n = i.useContext(t);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function c(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(s)
+              : e.components || s
+            : l(e.components)),
+          i.createElement(t.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/9180b37b.28ec37b5.js b/docs/build/assets/js/9180b37b.28ec37b5.js
deleted file mode 100644
index 048841c..0000000
--- a/docs/build/assets/js/9180b37b.28ec37b5.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[419],{435:(e,n,i)=>{i.d(n,{A:()=>l});const l=i.p+"assets/images/HueCircular-3b05147e1c8a1622bff99e7baa3db115.png"},5529:(e,n,i)=>{i.d(n,{Ay:()=>c,RM:()=>r});var l=i(4848),t=i(8453);const r=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function d(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function c(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>d,x:()=>c});var l=i(6540);const t={},r=l.createContext(t);function d(e){const n=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:d(e.components),l.createElement(r.Provider,{value:n},e.children)}},9108:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>h,contentTitle:()=>s,default:()=>u,frontMatter:()=>c,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"API/Sliders/Hue/HueCircular","title":"<HueCircular />","description":"A slider to change the color\'s hue.","source":"@site/docs/API/Sliders/Hue/HueCircular.mdx","sourceDirName":"API/Sliders/Hue","slug":"/API/Sliders/Hue/HueCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1,"sidebar_label":"HueCircular","description":"A slider to change the color\'s hue."},"sidebar":"tutorialSidebar","previous":{"title":"HueSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"},"next":{"title":"HSB","permalink":"/reanimated-color-picker/docs/category/hsb"}}');var t=i(4848),r=i(8453),d=i(5529);const c={sidebar_position:1,sidebar_label:"HueCircular",description:"A slider to change the color's hue."},s="<HueCircular />",h={},o=[{value:"A circular slider to change the color&#39;s hue.",id:"a-circular-slider-to-change-the-colors-hue",level:3},{value:"Props",id:"props",level:2},{value:"<code>rotate</code>",id:"rotate",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},{value:"<code>style</code>",id:"style",level:3},{value:"<code>containerStyle</code>",id:"containerstyle",level:3}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Shapes:l}=n;return l||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"huecircular-",children:(0,t.jsx)(n.code,{children:"<HueCircular />"})})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"HueCircular",src:i(435).A+"",width:"200",height:"200"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.h3,{id:"a-circular-slider-to-change-the-colors-hue",children:"A circular slider to change the color's hue."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(n.h3,{id:"rotate",children:(0,t.jsx)(n.code,{children:"rotate"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Specify a degree of rotation for the hue circle."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 0"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbsize",children:(0,t.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbcolor",children:(0,t.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsx)(n.mdxAdmonitionTitle,{children:(0,t.jsx)(n.strong,{children:"*interactive"})}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"sliderthickness",children:(0,t.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The thickness of the slider."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbshape",children:(0,t.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"values:"}),(0,t.jsx)(l,{})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbstyle",children:(0,t.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,t.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"renderthumb",children:(0,t.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Function which receives ",(0,t.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,t.jsxs)(n.li,{children:["Overrides ",(0,t.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,t.jsx)(d.Ay,{}),"\n",(0,t.jsx)(n.h3,{id:"adaptspectrum",children:(0,t.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"style",children:(0,t.jsx)(n.code,{children:"style"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{title:"note",type:"info",children:(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})}),"\n",(0,t.jsx)(n.h3,{id:"containerstyle",children:(0,t.jsx)(n.code,{children:"containerStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The style of the container that wraps the given children."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/9180b37b.d8341b90.js b/docs/build/assets/js/9180b37b.d8341b90.js
new file mode 100644
index 0000000..e8a44c1
--- /dev/null
+++ b/docs/build/assets/js/9180b37b.d8341b90.js
@@ -0,0 +1,551 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [998],
+  {
+    779: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => h,
+          contentTitle: () => c,
+          default: () => u,
+          frontMatter: () => d,
+          metadata: () => s,
+          toc: () => o,
+        });
+      var l = i(5893),
+        t = i(1151),
+        r = i(435);
+      const d = { sidebar_position: 1, sidebar_label: 'HueCircular', description: "A slider to change the color's hue." },
+        c = '<HueCircular />',
+        s = {
+          id: 'API/Sliders/Hue/HueCircular',
+          title: '<HueCircular />',
+          description: "A slider to change the color's hue.",
+          source: '@site/docs/API/Sliders/Hue/HueCircular.mdx',
+          sourceDirName: 'API/Sliders/Hue',
+          slug: '/API/Sliders/Hue/HueCircular',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 1,
+          frontMatter: { sidebar_position: 1, sidebar_label: 'HueCircular', description: "A slider to change the color's hue." },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'HueSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider' },
+          next: { title: 'HSB', permalink: '/reanimated-color-picker/docs/category/hsb' },
+        },
+        h = {},
+        o = [
+          {
+            value: 'A circular slider to change the color&#39;s hue.',
+            id: 'a-circular-slider-to-change-the-colors-hue',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>rotate</code>', id: 'rotate', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>sliderThickness</code>', id: 'sliderthickness', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>renderThumb</code>', id: 'renderthumb', level: 3 },
+          { value: '<code>thumbScaleAnimationValue</code>', id: 'thumbscaleanimationvalue', level: 3 },
+          { value: '<code>thumbScaleAnimationDuration</code>', id: 'thumbscaleanimationduration', level: 3 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+          { value: '<code>containerStyle</code>', id: 'containerstyle', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, t.a)(),
+            ...e.components,
+          },
+          { Shapes: d } = n;
+        return (
+          d ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, l.jsxs)(l.Fragment, {
+            children: [
+              (0, l.jsx)(n.h1, { id: 'huecircular-', children: (0, l.jsx)(n.code, { children: '<HueCircular />' }) }),
+              '\n',
+              (0, l.jsx)(n.p, {
+                children: (0, l.jsx)(n.img, { alt: 'HueCircular', src: i(1628).Z + '', width: '200', height: '200' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.h3, {
+                        id: 'a-circular-slider-to-change-the-colors-hue',
+                        children: "A circular slider to change the color's hue.",
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'rotate', children: (0, l.jsx)(n.code, { children: 'rotate' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Specify a degree of rotation for the hue circle.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 0' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbsize', children: (0, l.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbcolor', children: (0, l.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, l.jsx)(n.mdxAdmonitionTitle, { children: (0, l.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, l.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'sliderthickness', children: (0, l.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'The thickness of the slider.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbshape', children: (0, l.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'values:' }), (0, l.jsx)(d, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbstyle', children: (0, l.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, l.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'Function which receives ',
+                      (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                      ' and returns a custom thumb component.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, l.jsx)(r.ZP, {}),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'adaptspectrum', children: (0, l.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'style', children: (0, l.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, l.jsxs)(n.ul, {
+                  children: ['\n', (0, l.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'containerstyle', children: (0, l.jsx)(n.code, { children: 'containerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'The style of the container that wraps the given children.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+            ],
+          })
+        );
+      }
+      function u(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => d });
+      var l = i(5893),
+        t = i(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h4, { id: 'thumbprops', children: (0, l.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, l.jsxs)(n.table, {
+              children: [
+                (0, l.jsx)(n.thead, {
+                  children: (0, l.jsxs)(n.tr, {
+                    children: [
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, l.jsxs)(n.tbody, {
+                  children: [
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, l.jsx)(n.code, { children: 'width' }) }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, l.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, { children: ['\n', (0, l.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, l.jsx)(n.pre, {
+              children: (0, l.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    1628: (e, n, i) => {
+      i.d(n, { Z: () => l });
+      const l = i.p + 'assets/images/HueCircular-3b05147e1c8a1622bff99e7baa3db115.png';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => c, a: () => d });
+      var l = i(7294);
+      const t = {},
+        r = l.createContext(t);
+      function d(e) {
+        const n = l.useContext(r);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function c(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(t)
+              : e.components || t
+            : d(e.components)),
+          l.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/932438b4.2530e524.js b/docs/build/assets/js/932438b4.2530e524.js
new file mode 100644
index 0000000..c599fbf
--- /dev/null
+++ b/docs/build/assets/js/932438b4.2530e524.js
@@ -0,0 +1,614 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [390],
+  {
+    4108: (e, n, l) => {
+      l.r(n),
+        l.d(n, {
+          assets: () => h,
+          contentTitle: () => s,
+          default: () => x,
+          frontMatter: () => d,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var i = l(5893),
+        t = l(1151),
+        r = l(51);
+      const d = { sidebar_position: 8, sidebar_label: 'BlueSlider', description: "A slider to change the color's blue channel." },
+        s = '<BlueSlider />',
+        c = {
+          id: 'API/Sliders/RGB/BlueSlider',
+          title: '<BlueSlider />',
+          description: "A slider to change the color's blue channel.",
+          source: '@site/docs/API/Sliders/RGB/BlueSlider.mdx',
+          sourceDirName: 'API/Sliders/RGB',
+          slug: '/API/Sliders/RGB/BlueSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 8,
+          frontMatter: {
+            sidebar_position: 8,
+            sidebar_label: 'BlueSlider',
+            description: "A slider to change the color's blue channel.",
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'GreenSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider' },
+          next: { title: 'OpacitySlider', permalink: '/reanimated-color-picker/docs/API/Sliders/OpacitySlider' },
+        },
+        h = {},
+        o = [
+          {
+            value: 'A slider to change the color&#39;s blue channel.',
+            id: 'a-slider-to-change-the-colors-blue-channel',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+        ];
+      function j(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h1, { id: 'blueslider-', children: (0, i.jsx)(n.code, { children: '<BlueSlider />' }) }),
+            '\n',
+            (0, i.jsx)(n.p, { children: (0, i.jsx)(n.img, { alt: 'blue', src: l(7759).Z + '', width: '256', height: '40' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, i.jsx)(n.h3, {
+                      id: 'a-slider-to-change-the-colors-blue-channel',
+                      children: "A slider to change the color's blue channel.",
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            '\n',
+            '\n',
+            (0, i.jsx)(r.ZP, {}),
+          ],
+        });
+      }
+      function x(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(j, { ...e }) }) : j(e);
+      }
+    },
+    435: (e, n, l) => {
+      l.d(n, { ZP: () => d });
+      var i = l(5893),
+        t = l(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h3, { id: 'renderthumb', children: (0, i.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, i.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: ['Overrides ', (0, i.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h4, { id: 'thumbprops', children: (0, i.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, i.jsxs)(n.table, {
+              children: [
+                (0, i.jsx)(n.thead, {
+                  children: (0, i.jsxs)(n.tr, {
+                    children: [
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, i.jsxs)(n.tbody, {
+                  children: [
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, i.jsx)(n.code, { children: 'width' }) }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, i.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, i.jsx)(n.pre, {
+              children: (0, i.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    51: (e, n, l) => {
+      l.d(n, { ZP: () => s });
+      var i = l(5893),
+        t = l(1151),
+        r = l(435);
+      function d(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, t.a)(),
+            ...e.components,
+          },
+          { Shapes: d } = n;
+        return (
+          d ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, i.jsxs)(i.Fragment, {
+            children: [
+              (0, i.jsx)(n.h3, { id: 'boundedthumb', children: (0, i.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, i.jsx)(n.p, {
+                children: (0, i.jsx)(n.img, { alt: 'boundedThumb', src: l(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbsize', children: (0, i.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbcolor', children: (0, i.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, i.jsx)(n.mdxAdmonitionTitle, { children: (0, i.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, i.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'sliderthickness', children: (0, i.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, i.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, i.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, i.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, i.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbshape', children: (0, i.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.code, { children: 'values:' }), (0, i.jsx)(d, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbstyle', children: (0, i.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, i.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, i.jsx)(r.ZP, {}),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'reverse', children: (0, i.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'vertical', children: (0, i.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'gestures', children: (0, i.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, i.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'style', children: (0, i.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, i.jsxs)(n.ul, {
+                  children: ['\n', (0, i.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    7759: (e, n, l) => {
+      l.d(n, { Z: () => i });
+      const i =
+        'data:image/png;base64,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';
+    },
+    2737: (e, n, l) => {
+      l.d(n, { Z: () => i });
+      const i =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, l) => {
+      l.d(n, { Z: () => s, a: () => d });
+      var i = l(7294);
+      const t = {},
+        r = i.createContext(t);
+      function d(e) {
+        const n = i.useContext(r);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function s(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(t)
+              : e.components || t
+            : d(e.components)),
+          i.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/932438b4.f4616486.js b/docs/build/assets/js/932438b4.f4616486.js
deleted file mode 100644
index 0e38fd6..0000000
--- a/docs/build/assets/js/932438b4.f4616486.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[514],{5529:(e,n,l)=>{l.d(n,{Ay:()=>s,RM:()=>d});var t=l(4848),i=l(8453);const d=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function r(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h3,{id:"renderthumb",children:(0,t.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Function which receives ",(0,t.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,t.jsxs)(n.li,{children:["Overrides ",(0,t.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"thumbprops",children:(0,t.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,t.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"positionStyle"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"StyleProp"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"width"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"number"})}),(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,t.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"height"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"number"})}),(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,t.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"adaptiveColor"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"SharedValue<string>"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"currentColor"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"SharedValue<string>"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"initialColor"})}),(0,t.jsx)(n.td,{style:{textAlign:"center"},children:(0,t.jsx)(n.code,{children:"string"})}),(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,t.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},5783:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>j,frontMatter:()=>s,metadata:()=>t,toc:()=>o});const t=JSON.parse('{"id":"API/Sliders/RGB/BlueSlider","title":"<BlueSlider />","description":"A slider to change the color\'s blue channel.","source":"@site/docs/API/Sliders/RGB/BlueSlider.mdx","sourceDirName":"API/Sliders/RGB","slug":"/API/Sliders/RGB/BlueSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":8,"frontMatter":{"sidebar_position":8,"sidebar_label":"BlueSlider","description":"A slider to change the color\'s blue channel."},"sidebar":"tutorialSidebar","previous":{"title":"GreenSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"},"next":{"title":"OpacitySlider","permalink":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider"}}');var i=l(4848),d=l(8453),r=l(7869);const s={sidebar_position:8,sidebar_label:"BlueSlider",description:"A slider to change the color's blue channel."},c="<BlueSlider />",h={},o=[{value:"A slider to change the color&#39;s blue channel.",id:"a-slider-to-change-the-colors-blue-channel",level:3},{value:"Props",id:"props",level:2},...r.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,d.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"blueslider-",children:(0,i.jsx)(n.code,{children:"<BlueSlider />"})})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"blue",src:l(6584).A+"",width:"256",height:"40"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h3,{id:"a-slider-to-change-the-colors-blue-channel",children:"A slider to change the color's blue channel."}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"props",children:"Props"}),"\n","\n",(0,i.jsx)(r.Ay,{})]})}function j(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},6584:(e,n,l)=>{l.d(n,{A:()=>t});const t="data:image/png;base64,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"},7793:(e,n,l)=>{l.d(n,{A:()=>t});const t="data:image/png;base64,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"},7869:(e,n,l)=>{l.d(n,{Ay:()=>c,RM:()=>r});var t=l(4848),i=l(8453),d=l(5529);const r=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,i.R)(),...e.components},{Shapes:r}=n;return r||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h3,{id:"boundedthumb",children:(0,t.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"boundedThumb",src:l(7793).A+"",width:"180",height:"130"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,t.jsxs)(n.li,{children:["When set to ",(0,t.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,t.jsxs)(n.li,{children:["When set to ",(0,t.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbsize",children:(0,t.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbcolor",children:(0,t.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsx)(n.mdxAdmonitionTitle,{children:(0,t.jsx)(n.strong,{children:"*interactive"})}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"sliderthickness",children:(0,t.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The thickness is the ",(0,t.jsx)(n.code,{children:"width"})," of the slider in ",(0,t.jsx)(n.code,{children:"vertical"})," mode or the ",(0,t.jsx)(n.code,{children:"height"})," in ",(0,t.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbshape",children:(0,t.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"values:"}),(0,t.jsx)(r,{})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbstyle",children:(0,t.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,t.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,t.jsx)(d.Ay,{}),"\n",(0,t.jsx)(n.h3,{id:"reverse",children:(0,t.jsx)(n.code,{children:"reverse"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"vertical",children:(0,t.jsx)(n.code,{children:"vertical"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"gestures",children:(0,t.jsx)(n.code,{children:"gestures"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,t.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"style",children:(0,t.jsx)(n.code,{children:"style"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{title:"note",type:"info",children:(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(s,{...e})}):s(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>r,x:()=>s});var t=l(6540);const i={},d=t.createContext(i);function r(e){const n=t.useContext(d);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(d.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/935f2afb.5d5bf7e1.js b/docs/build/assets/js/935f2afb.5d5bf7e1.js
new file mode 100644
index 0000000..1ebc900
--- /dev/null
+++ b/docs/build/assets/js/935f2afb.5d5bf7e1.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [53],
+  {
+    1109: e => {
+      e.exports = JSON.parse(
+        '{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction","href":"/reanimated-color-picker/docs/intro","docId":"intro","unlisted":false},{"type":"link","label":"Installation","href":"/reanimated-color-picker/docs/Installation","docId":"Installation","unlisted":false},{"type":"link","label":"Usage","href":"/reanimated-color-picker/docs/Usage","docId":"Usage","unlisted":false},{"type":"category","label":"API","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ColorPicker Wrapper","href":"/reanimated-color-picker/docs/API/ColorPicker","docId":"API/ColorPicker","unlisted":false},{"type":"category","label":"Panels","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Panel1","href":"/reanimated-color-picker/docs/API/Panels/Panel1","docId":"API/Panels/Panel1","unlisted":false},{"type":"link","label":"Panel2","href":"/reanimated-color-picker/docs/API/Panels/Panel2","docId":"API/Panels/Panel2","unlisted":false},{"type":"link","label":"Panel3","href":"/reanimated-color-picker/docs/API/Panels/Panel3","docId":"API/Panels/Panel3","unlisted":false},{"type":"link","label":"Panel4","href":"/reanimated-color-picker/docs/API/Panels/Panel4","docId":"API/Panels/Panel4","unlisted":false},{"type":"link","label":"Panel5","href":"/reanimated-color-picker/docs/API/Panels/Panel5","docId":"API/Panels/Panel5","unlisted":false}],"href":"/reanimated-color-picker/docs/category/panels"},{"type":"category","label":"Sliders","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Hue","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"HueSlider","href":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider","docId":"API/Sliders/Hue/HueSlider","unlisted":false},{"type":"link","label":"HueCircular","href":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular","docId":"API/Sliders/Hue/HueCircular","unlisted":false}],"href":"/reanimated-color-picker/docs/category/hue"},{"type":"category","label":"HSB","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"BrightnessSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider","docId":"API/Sliders/HSB/BrightnessSlider","unlisted":false},{"type":"link","label":"SaturationSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider","docId":"API/Sliders/HSB/SaturationSlider","unlisted":false}],"href":"/reanimated-color-picker/docs/category/hsb"},{"type":"category","label":"HSL","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"HSLSaturationSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider","docId":"API/Sliders/HSL/HSLSaturationSlider","unlisted":false},{"type":"link","label":"LuminanceSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider","docId":"API/Sliders/HSL/LuminanceSlider","unlisted":false},{"type":"link","label":"LuminanceCircular","href":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular","docId":"API/Sliders/HSL/LuminanceCircular","unlisted":false}],"href":"/reanimated-color-picker/docs/category/hsl"},{"type":"category","label":"RGB","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"RedSlider","href":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider","docId":"API/Sliders/RGB/RedSlider","unlisted":false},{"type":"link","label":"GreenSlider","href":"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider","docId":"API/Sliders/RGB/GreenSlider","unlisted":false},{"type":"link","label":"BlueSlider","href":"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider","docId":"API/Sliders/RGB/BlueSlider","unlisted":false}],"href":"/reanimated-color-picker/docs/category/rgb"},{"type":"link","label":"OpacitySlider","href":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider","docId":"API/Sliders/OpacitySlider","unlisted":false}],"href":"/reanimated-color-picker/docs/category/sliders"},{"type":"category","label":"Preview","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Preview","href":"/reanimated-color-picker/docs/API/Preview/","docId":"API/Preview/Preview","unlisted":false},{"type":"link","label":"PreviewText","href":"/reanimated-color-picker/docs/API/Preview/PreviewText","docId":"API/Preview/PreviewText","unlisted":false},{"type":"link","label":"InputWidget","href":"/reanimated-color-picker/docs/API/Preview/InputWidget","docId":"API/Preview/InputWidget","unlisted":false},{"type":"link","label":"Swatches","href":"/reanimated-color-picker/docs/API/Preview/Swatches","docId":"API/Preview/Swatches","unlisted":false},{"type":"link","label":"ExtraThumb","href":"/reanimated-color-picker/docs/API/Preview/ExtraThumb","docId":"API/Preview/ExtraThumb","unlisted":false}],"href":"/reanimated-color-picker/docs/category/preview"}],"href":"/reanimated-color-picker/docs/category/api"},{"type":"link","label":"ColorKit","href":"/reanimated-color-picker/docs/ColorKit","docId":"ColorKit","unlisted":false},{"type":"link","label":"Examples","href":"/reanimated-color-picker/docs/Examples","docId":"Examples","unlisted":false}]},"docs":{"API/ColorPicker":{"id":"API/ColorPicker","title":"ColorPicker Wrapper","description":"Responsible for managing the built-in components","sidebar":"tutorialSidebar"},"API/Panels/Panel1":{"id":"API/Panels/Panel1","title":"<Panel1 />","description":"A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.","sidebar":"tutorialSidebar"},"API/Panels/Panel2":{"id":"API/Panels/Panel2","title":"<Panel2 />","description":"A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.","sidebar":"tutorialSidebar"},"API/Panels/Panel3":{"id":"API/Panels/Panel3","title":"<Panel3 />","description":"The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.","sidebar":"tutorialSidebar"},"API/Panels/Panel4":{"id":"API/Panels/Panel4","title":"<Panel4 />","description":"A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.","sidebar":"tutorialSidebar"},"API/Panels/Panel5":{"id":"API/Panels/Panel5","title":"<Panel5 />","description":"This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.","sidebar":"tutorialSidebar"},"API/Preview/ExtraThumb":{"id":"API/Preview/ExtraThumb","title":"<ExtraThumb />","description":"Adds an extra thumb to the Panel3 component.","sidebar":"tutorialSidebar"},"API/Preview/InputWidget":{"id":"API/Preview/InputWidget","title":"<InputWidget />","description":"The input widget component allows you to input color values in various formats.","sidebar":"tutorialSidebar"},"API/Preview/Preview":{"id":"API/Preview/Preview","title":"<Preview />","description":"The preview of the selected and the initial color.","sidebar":"tutorialSidebar"},"API/Preview/PreviewText":{"id":"API/Preview/PreviewText","title":"<PreviewText />","description":"A React Native <Text> component that displays the preview color text.","sidebar":"tutorialSidebar"},"API/Preview/Swatches":{"id":"API/Preview/Swatches","title":"<Swatches />","description":"A list of color swatches is utilized for efficient color selection.","sidebar":"tutorialSidebar"},"API/Sliders/HSB/BrightnessSlider":{"id":"API/Sliders/HSB/BrightnessSlider","title":"<BrightnessSlider />","description":"A slider for adjusting the color brightness channel in the HSV color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSB/SaturationSlider":{"id":"API/Sliders/HSB/SaturationSlider","title":"<SaturationSlider />","description":"A slider for adjusting the color saturation channel in the HSV color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSL/HSLSaturationSlider":{"id":"API/Sliders/HSL/HSLSaturationSlider","title":"<HSLSaturationSlider />","description":"A slider for adjusting the color saturation channel in the HSL color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSL/LuminanceCircular":{"id":"API/Sliders/HSL/LuminanceCircular","title":"<LuminanceCircular />","description":"A circular slider for adjusting the color luminance channel in the HSL color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSL/LuminanceSlider":{"id":"API/Sliders/HSL/LuminanceSlider","title":"<LuminanceSlider />","description":"A slider for adjusting the color luminance channel in the HSL color space.","sidebar":"tutorialSidebar"},"API/Sliders/Hue/HueCircular":{"id":"API/Sliders/Hue/HueCircular","title":"<HueCircular />","description":"A slider to change the color\'s hue.","sidebar":"tutorialSidebar"},"API/Sliders/Hue/HueSlider":{"id":"API/Sliders/Hue/HueSlider","title":"<HueSlider />","description":"A slider to change the color\'s hue.","sidebar":"tutorialSidebar"},"API/Sliders/OpacitySlider":{"id":"API/Sliders/OpacitySlider","title":"<OpacitySlider />","description":"A slider to change the color\'s opacity.","sidebar":"tutorialSidebar"},"API/Sliders/RGB/BlueSlider":{"id":"API/Sliders/RGB/BlueSlider","title":"<BlueSlider />","description":"A slider to change the color\'s blue channel.","sidebar":"tutorialSidebar"},"API/Sliders/RGB/GreenSlider":{"id":"API/Sliders/RGB/GreenSlider","title":"<GreenSlider />","description":"A slider to change the color\'s green channel.","sidebar":"tutorialSidebar"},"API/Sliders/RGB/RedSlider":{"id":"API/Sliders/RGB/RedSlider","title":"<RedSlider />","description":"A slider to change the color\'s red channel.","sidebar":"tutorialSidebar"},"ColorKit":{"id":"ColorKit","title":"ColorKit","description":"colorKit is a collection of color tools that are utilized internally within the ColorPicker.","sidebar":"tutorialSidebar"},"Examples":{"id":"Examples","title":"Examples","description":"- ### Bare workflow - typescript","sidebar":"tutorialSidebar"},"Installation":{"id":"Installation","title":"Installation","description":"Prerequisites","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Reanimated Color Picker","description":"- A Pure JavaScript Color Picker for React Native.","sidebar":"tutorialSidebar"},"Usage":{"id":"Usage","title":"Usage","description":"- You can add, remove, rearrange, or style the built-in components of the color picker.","sidebar":"tutorialSidebar"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/94e8e772.1dc5c6b9.js b/docs/build/assets/js/94e8e772.1dc5c6b9.js
deleted file mode 100644
index 58ee460..0000000
--- a/docs/build/assets/js/94e8e772.1dc5c6b9.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[60],{589:(e,n,i)=>{i.d(n,{A:()=>l});const l="data:image/png;base64,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"},3522:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>j,frontMatter:()=>s,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"API/Sliders/OpacitySlider","title":"<OpacitySlider />","description":"A slider to change the color\'s opacity.","source":"@site/docs/API/Sliders/OpacitySlider.mdx","sourceDirName":"API/Sliders","slug":"/API/Sliders/OpacitySlider","permalink":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4,"sidebar_label":"OpacitySlider","description":"A slider to change the color\'s opacity."},"sidebar":"tutorialSidebar","previous":{"title":"BlueSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"},"next":{"title":"Preview","permalink":"/reanimated-color-picker/docs/category/preview"}}');var t=i(4848),d=i(8453),r=i(7869);const s={sidebar_position:4,sidebar_label:"OpacitySlider",description:"A slider to change the color's opacity."},c="<OpacitySlider />",h={},o=[{value:"A slider to change the color&#39;s opacity.",id:"a-slider-to-change-the-colors-opacity",level:3},{value:"Props",id:"props",level:2},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},...r.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,d.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"opacityslider-",children:(0,t.jsx)(n.code,{children:"<OpacitySlider />"})})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"opacity",src:i(589).A+"",width:"256",height:"40"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.h3,{id:"a-slider-to-change-the-colors-opacity",children:"A slider to change the color's opacity."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(n.h3,{id:"adaptspectrum",children:(0,t.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n","\n",(0,t.jsx)(r.Ay,{})]})}function j(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},5529:(e,n,i)=>{i.d(n,{Ay:()=>s,RM:()=>d});var l=i(4848),t=i(8453);const d=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function r(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(r,{...e})}):r(e)}},7793:(e,n,i)=>{i.d(n,{A:()=>l});const l="data:image/png;base64,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"},7869:(e,n,i)=>{i.d(n,{Ay:()=>c,RM:()=>r});var l=i(4848),t=i(8453),d=i(5529);const r=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,t.R)(),...e.components},{Shapes:r}=n;return r||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"boundedthumb",children:(0,l.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"boundedThumb",src:i(7793).A+"",width:"180",height:"130"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbsize",children:(0,l.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbcolor",children:(0,l.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,l.jsxs)(n.admonition,{type:"info",children:[(0,l.jsx)(n.mdxAdmonitionTitle,{children:(0,l.jsx)(n.strong,{children:"*interactive"})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,l.jsx)(n.h3,{id:"sliderthickness",children:(0,l.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["The thickness is the ",(0,l.jsx)(n.code,{children:"width"})," of the slider in ",(0,l.jsx)(n.code,{children:"vertical"})," mode or the ",(0,l.jsx)(n.code,{children:"height"})," in ",(0,l.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbshape",children:(0,l.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"values:"}),(0,l.jsx)(r,{})]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbstyle",children:(0,l.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,l.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,l.jsx)(d.Ay,{}),"\n",(0,l.jsx)(n.h3,{id:"reverse",children:(0,l.jsx)(n.code,{children:"reverse"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"vertical",children:(0,l.jsx)(n.code,{children:"vertical"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"gestures",children:(0,l.jsx)(n.code,{children:"gestures"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,l.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,l.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"style",children:(0,l.jsx)(n.code,{children:"style"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{title:"note",type:"info",children:(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(s,{...e})}):s(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>s});var l=i(6540);const t={},d=l.createContext(t);function r(e){const n=l.useContext(d);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),l.createElement(d.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/94e8e772.5fa20434.js b/docs/build/assets/js/94e8e772.5fa20434.js
new file mode 100644
index 0000000..6399fd9
--- /dev/null
+++ b/docs/build/assets/js/94e8e772.5fa20434.js
@@ -0,0 +1,627 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [786],
+  {
+    8248: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => c,
+          contentTitle: () => s,
+          default: () => j,
+          frontMatter: () => r,
+          metadata: () => h,
+          toc: () => o,
+        });
+      var t = i(5893),
+        l = i(1151),
+        d = i(51);
+      const r = { sidebar_position: 4, sidebar_label: 'OpacitySlider', description: "A slider to change the color's opacity." },
+        s = '<OpacitySlider />',
+        h = {
+          id: 'API/Sliders/OpacitySlider',
+          title: '<OpacitySlider />',
+          description: "A slider to change the color's opacity.",
+          source: '@site/docs/API/Sliders/OpacitySlider.mdx',
+          sourceDirName: 'API/Sliders',
+          slug: '/API/Sliders/OpacitySlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/OpacitySlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 4,
+          frontMatter: {
+            sidebar_position: 4,
+            sidebar_label: 'OpacitySlider',
+            description: "A slider to change the color's opacity.",
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'BlueSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider' },
+          next: { title: 'Preview', permalink: '/reanimated-color-picker/docs/category/preview' },
+        },
+        c = {},
+        o = [
+          { value: 'A slider to change the color&#39;s opacity.', id: 'a-slider-to-change-the-colors-opacity', level: 3 },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h1, { id: 'opacityslider-', children: (0, t.jsx)(n.code, { children: '<OpacitySlider />' }) }),
+            '\n',
+            (0, t.jsx)(n.p, { children: (0, t.jsx)(n.img, { alt: 'opacity', src: i(6692).Z + '', width: '256', height: '40' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsx)(n.h3, {
+                      id: 'a-slider-to-change-the-colors-opacity',
+                      children: "A slider to change the color's opacity.",
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, t.jsx)(n.h3, { id: 'adaptspectrum', children: (0, t.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsx)(n.li, {
+                  children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, t.jsx)(d.ZP, {}),
+          ],
+        });
+      }
+      function j(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => r });
+      var t = i(5893),
+        l = i(1151);
+      function d(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h3, { id: 'renderthumb', children: (0, t.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, t.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, t.jsxs)(n.li, { children: ['Overrides ', (0, t.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h4, { id: 'thumbprops', children: (0, t.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, t.jsxs)(n.table, {
+              children: [
+                (0, t.jsx)(n.thead, {
+                  children: (0, t.jsxs)(n.tr, {
+                    children: [
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, t.jsxs)(n.tbody, {
+                  children: [
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, t.jsx)(n.code, { children: 'width' }) }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, t.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, t.jsxs)(n.ul, { children: ['\n', (0, t.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, t.jsx)(n.pre, {
+              children: (0, t.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function r(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    51: (e, n, i) => {
+      i.d(n, { ZP: () => s });
+      var t = i(5893),
+        l = i(1151),
+        d = i(435);
+      function r(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, l.a)(),
+            ...e.components,
+          },
+          { Shapes: r } = n;
+        return (
+          r ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, t.jsxs)(t.Fragment, {
+            children: [
+              (0, t.jsx)(n.h3, { id: 'boundedthumb', children: (0, t.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, t.jsx)(n.p, {
+                children: (0, t.jsx)(n.img, { alt: 'boundedThumb', src: i(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbsize', children: (0, t.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbcolor', children: (0, t.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, t.jsx)(n.mdxAdmonitionTitle, { children: (0, t.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, t.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, t.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'sliderthickness', children: (0, t.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, t.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, t.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, t.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, t.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbshape', children: (0, t.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, t.jsxs)(n.li, { children: [(0, t.jsx)(n.code, { children: 'values:' }), (0, t.jsx)(r, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbstyle', children: (0, t.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, t.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, t.jsx)(d.ZP, {}),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'reverse', children: (0, t.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'vertical', children: (0, t.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'gestures', children: (0, t.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, t.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'style', children: (0, t.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, t.jsxs)(n.ul, {
+                  children: ['\n', (0, t.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    2737: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t =
+        'data:image/png;base64,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';
+    },
+    6692: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => s, a: () => r });
+      var t = i(7294);
+      const l = {},
+        d = t.createContext(l);
+      function r(e) {
+        const n = t.useContext(d);
+        return t.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function s(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(l)
+              : e.components || l
+            : r(e.components)),
+          t.createElement(d.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/9edb15d8.7157147b.js b/docs/build/assets/js/9edb15d8.7157147b.js
new file mode 100644
index 0000000..5757d91
--- /dev/null
+++ b/docs/build/assets/js/9edb15d8.7157147b.js
@@ -0,0 +1,618 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [404],
+  {
+    6731: (e, n, l) => {
+      l.r(n),
+        l.d(n, {
+          assets: () => h,
+          contentTitle: () => s,
+          default: () => j,
+          frontMatter: () => d,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var i = l(5893),
+        r = l(1151),
+        t = l(51);
+      const d = {
+          sidebar_position: 7,
+          sidebar_label: 'GreenSlider',
+          description: "A slider to change the color's green channel.",
+        },
+        s = '<GreenSlider />',
+        c = {
+          id: 'API/Sliders/RGB/GreenSlider',
+          title: '<GreenSlider />',
+          description: "A slider to change the color's green channel.",
+          source: '@site/docs/API/Sliders/RGB/GreenSlider.mdx',
+          sourceDirName: 'API/Sliders/RGB',
+          slug: '/API/Sliders/RGB/GreenSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 7,
+          frontMatter: {
+            sidebar_position: 7,
+            sidebar_label: 'GreenSlider',
+            description: "A slider to change the color's green channel.",
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'RedSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider' },
+          next: { title: 'BlueSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider' },
+        },
+        h = {},
+        o = [
+          {
+            value: 'A slider to change the color&#39;s green channel.',
+            id: 'a-slider-to-change-the-colors-green-channel',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+        ];
+      function x(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, r.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h1, { id: 'greenslider-', children: (0, i.jsx)(n.code, { children: '<GreenSlider />' }) }),
+            '\n',
+            (0, i.jsx)(n.p, { children: (0, i.jsx)(n.img, { alt: 'green', src: l(6482).Z + '', width: '256', height: '40' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, i.jsx)(n.h3, {
+                      id: 'a-slider-to-change-the-colors-green-channel',
+                      children: "A slider to change the color's green channel.",
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            '\n',
+            '\n',
+            (0, i.jsx)(t.ZP, {}),
+          ],
+        });
+      }
+      function j(e = {}) {
+        const { wrapper: n } = { ...(0, r.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(x, { ...e }) }) : x(e);
+      }
+    },
+    435: (e, n, l) => {
+      l.d(n, { ZP: () => d });
+      var i = l(5893),
+        r = l(1151);
+      function t(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, r.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h3, { id: 'renderthumb', children: (0, i.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, i.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: ['Overrides ', (0, i.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h4, { id: 'thumbprops', children: (0, i.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, i.jsxs)(n.table, {
+              children: [
+                (0, i.jsx)(n.thead, {
+                  children: (0, i.jsxs)(n.tr, {
+                    children: [
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, i.jsxs)(n.tbody, {
+                  children: [
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, i.jsx)(n.code, { children: 'width' }) }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, i.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, i.jsx)(n.pre, {
+              children: (0, i.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, r.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(t, { ...e }) }) : t(e);
+      }
+    },
+    51: (e, n, l) => {
+      l.d(n, { ZP: () => s });
+      var i = l(5893),
+        r = l(1151),
+        t = l(435);
+      function d(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, r.a)(),
+            ...e.components,
+          },
+          { Shapes: d } = n;
+        return (
+          d ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, i.jsxs)(i.Fragment, {
+            children: [
+              (0, i.jsx)(n.h3, { id: 'boundedthumb', children: (0, i.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, i.jsx)(n.p, {
+                children: (0, i.jsx)(n.img, { alt: 'boundedThumb', src: l(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbsize', children: (0, i.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbcolor', children: (0, i.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, i.jsx)(n.mdxAdmonitionTitle, { children: (0, i.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, i.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'sliderthickness', children: (0, i.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, i.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, i.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, i.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, i.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbshape', children: (0, i.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.code, { children: 'values:' }), (0, i.jsx)(d, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbstyle', children: (0, i.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, i.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, i.jsx)(t.ZP, {}),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'reverse', children: (0, i.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'vertical', children: (0, i.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'gestures', children: (0, i.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, i.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'style', children: (0, i.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, i.jsxs)(n.ul, {
+                  children: ['\n', (0, i.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, r.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    2737: (e, n, l) => {
+      l.d(n, { Z: () => i });
+      const i =
+        'data:image/png;base64,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';
+    },
+    6482: (e, n, l) => {
+      l.d(n, { Z: () => i });
+      const i =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, l) => {
+      l.d(n, { Z: () => s, a: () => d });
+      var i = l(7294);
+      const r = {},
+        t = i.createContext(r);
+      function d(e) {
+        const n = i.useContext(t);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function s(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(r)
+              : e.components || r
+            : d(e.components)),
+          i.createElement(t.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/9edb15d8.b6ea81c2.js b/docs/build/assets/js/9edb15d8.b6ea81c2.js
deleted file mode 100644
index b083866..0000000
--- a/docs/build/assets/js/9edb15d8.b6ea81c2.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[669],{5529:(e,n,l)=>{l.d(n,{Ay:()=>s,RM:()=>r});var i=l(4848),d=l(8453);const r=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function t(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"renderthumb",children:(0,i.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Function which receives ",(0,i.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,i.jsxs)(n.li,{children:["Overrides ",(0,i.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"thumbprops",children:(0,i.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,i.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"positionStyle"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"StyleProp"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"width"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"height"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"adaptiveColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"currentColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"initialColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,i.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(t,{...e})}):t(e)}},7276:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>x,frontMatter:()=>s,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"API/Sliders/RGB/GreenSlider","title":"<GreenSlider />","description":"A slider to change the color\'s green channel.","source":"@site/docs/API/Sliders/RGB/GreenSlider.mdx","sourceDirName":"API/Sliders/RGB","slug":"/API/Sliders/RGB/GreenSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":7,"frontMatter":{"sidebar_position":7,"sidebar_label":"GreenSlider","description":"A slider to change the color\'s green channel."},"sidebar":"tutorialSidebar","previous":{"title":"RedSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"},"next":{"title":"BlueSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"}}');var d=l(4848),r=l(8453),t=l(7869);const s={sidebar_position:7,sidebar_label:"GreenSlider",description:"A slider to change the color's green channel."},c="<GreenSlider />",h={},o=[{value:"A slider to change the color&#39;s green channel.",id:"a-slider-to-change-the-colors-green-channel",level:3},{value:"Props",id:"props",level:2},...t.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"greenslider-",children:(0,d.jsx)(n.code,{children:"<GreenSlider />"})})}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"green",src:l(9851).A+"",width:"256",height:"40"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsx)(n.h3,{id:"a-slider-to-change-the-colors-green-channel",children:"A slider to change the color's green channel."}),"\n"]}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"props",children:"Props"}),"\n","\n",(0,d.jsx)(t.Ay,{})]})}function x(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},7793:(e,n,l)=>{l.d(n,{A:()=>i});const i="data:image/png;base64,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"},7869:(e,n,l)=>{l.d(n,{Ay:()=>c,RM:()=>t});var i=l(4848),d=l(8453),r=l(5529);const t=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...r.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,d.R)(),...e.components},{Shapes:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"boundedthumb",children:(0,i.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"boundedThumb",src:l(7793).A+"",width:"180",height:"130"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbsize",children:(0,i.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbcolor",children:(0,i.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,i.jsxs)(n.admonition,{type:"info",children:[(0,i.jsx)(n.mdxAdmonitionTitle,{children:(0,i.jsx)(n.strong,{children:"*interactive"})}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,i.jsx)(n.h3,{id:"sliderthickness",children:(0,i.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The thickness is the ",(0,i.jsx)(n.code,{children:"width"})," of the slider in ",(0,i.jsx)(n.code,{children:"vertical"})," mode or the ",(0,i.jsx)(n.code,{children:"height"})," in ",(0,i.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbshape",children:(0,i.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"values:"}),(0,i.jsx)(t,{})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbstyle",children:(0,i.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,i.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,i.jsx)(r.Ay,{}),"\n",(0,i.jsx)(n.h3,{id:"reverse",children:(0,i.jsx)(n.code,{children:"reverse"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"vertical",children:(0,i.jsx)(n.code,{children:"vertical"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"gestures",children:(0,i.jsx)(n.code,{children:"gestures"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,i.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"style",children:(0,i.jsx)(n.code,{children:"style"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{title:"note",type:"info",children:(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(s,{...e})}):s(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>t,x:()=>s});var i=l(6540);const d={},r=i.createContext(d);function t(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:t(e.components),i.createElement(r.Provider,{value:n},e.children)}},9851:(e,n,l)=>{l.d(n,{A:()=>i});const i="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/a44a6861.9fbac2d7.js b/docs/build/assets/js/a44a6861.9fbac2d7.js
new file mode 100644
index 0000000..cd7135a
--- /dev/null
+++ b/docs/build/assets/js/a44a6861.9fbac2d7.js
@@ -0,0 +1,572 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [181],
+  {
+    4013: (e, n, t) => {
+      t.r(n),
+        t.d(n, {
+          assets: () => o,
+          contentTitle: () => r,
+          default: () => u,
+          frontMatter: () => d,
+          metadata: () => c,
+          toc: () => h,
+        });
+      var i = t(5893),
+        l = t(1151),
+        s = t(435);
+      const d = {
+          sidebar_position: 0,
+          sidebar_label: 'Panel1',
+          description:
+            'A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.',
+        },
+        r = '<Panel1 />',
+        c = {
+          id: 'API/Panels/Panel1',
+          title: '<Panel1 />',
+          description:
+            'A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.',
+          source: '@site/docs/API/Panels/Panel1.mdx',
+          sourceDirName: 'API/Panels',
+          slug: '/API/Panels/Panel1',
+          permalink: '/reanimated-color-picker/docs/API/Panels/Panel1',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 0,
+          frontMatter: {
+            sidebar_position: 0,
+            sidebar_label: 'Panel1',
+            description:
+              'A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Panels', permalink: '/reanimated-color-picker/docs/category/panels' },
+          next: { title: 'Panel2', permalink: '/reanimated-color-picker/docs/API/Panels/Panel2' },
+        },
+        o = {},
+        h = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>boundedThumb</code>', id: 'boundedthumb', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>thumbScaleAnimationValue</code>', id: 'thumbscaleanimationvalue', level: 3 },
+          { value: '<code>thumbScaleAnimationDuration</code>', id: 'thumbscaleanimationduration', level: 3 },
+          { value: '<code>gestures</code>', id: 'gestures', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+            a: 'a',
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, l.a)(),
+            ...e.components,
+          },
+          { Shapes: d } = n;
+        return (
+          d ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, i.jsxs)(i.Fragment, {
+            children: [
+              (0, i.jsx)(n.h1, { id: 'panel1-', children: (0, i.jsx)(n.code, { children: '<Panel1 />' }) }),
+              '\n',
+              (0, i.jsx)(n.p, {
+                children: (0, i.jsx)(n.img, { alt: 'panel1', src: t(8902).Z + '', width: '200', height: '200' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.p, {
+                        children:
+                          'A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors..',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.p, { children: "Move the handle horizontally to change the color's saturation." }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.p, { children: "Move the handle vertically to change the color's brightness." }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                type: 'tip',
+                children: (0, i.jsxs)(n.ul, {
+                  children: [
+                    '\n',
+                    (0, i.jsxs)(n.li, {
+                      children: [
+                        'Add ',
+                        (0, i.jsx)(n.a, {
+                          href: '../Sliders/Hue/HueSlider',
+                          children: (0, i.jsx)(n.code, { children: '<HueSlider />' }),
+                        }),
+                        ' component also to gain control over the three color channels.',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, i.jsx)(n.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'boundedthumb', children: (0, i.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the panel.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the panel bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbsize', children: (0, i.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Panel's handle (thumb) size (height*width)." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbcolor', children: (0, i.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Change thumb's color." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.code, { children: 'default' }), ': interactive*'] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, i.jsx)(n.mdxAdmonitionTitle, { children: (0, i.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, i.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbshape', children: (0, i.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Change thumb's shape and appearance." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.code, { children: 'values' }), ': ', (0, i.jsx)(d, {})] }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbstyle', children: (0, i.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, i.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, i.jsx)(s.ZP, {}),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'gestures', children: (0, i.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, i.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'style', children: (0, i.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: "Panel's container style." }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, i.jsxs)(n.ul, {
+                  children: ['\n', (0, i.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function u(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, t) => {
+      t.d(n, { ZP: () => d });
+      var i = t(5893),
+        l = t(1151);
+      function s(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h3, { id: 'renderthumb', children: (0, i.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, i.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: ['Overrides ', (0, i.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h4, { id: 'thumbprops', children: (0, i.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, i.jsxs)(n.table, {
+              children: [
+                (0, i.jsx)(n.thead, {
+                  children: (0, i.jsxs)(n.tr, {
+                    children: [
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, i.jsxs)(n.tbody, {
+                  children: [
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, i.jsx)(n.code, { children: 'width' }) }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, i.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, i.jsx)(n.pre, {
+              children: (0, i.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(s, { ...e }) }) : s(e);
+      }
+    },
+    8902: (e, n, t) => {
+      t.d(n, { Z: () => i });
+      const i = t.p + 'assets/images/panel1-467da7d5cafc669fd31a29110ad12315.png';
+    },
+    1151: (e, n, t) => {
+      t.d(n, { Z: () => r, a: () => d });
+      var i = t(7294);
+      const l = {},
+        s = i.createContext(l);
+      function d(e) {
+        const n = i.useContext(s);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function r(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(l)
+              : e.components || l
+            : d(e.components)),
+          i.createElement(s.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/a44a6861.eaf8176c.js b/docs/build/assets/js/a44a6861.eaf8176c.js
deleted file mode 100644
index a2b9ccf..0000000
--- a/docs/build/assets/js/a44a6861.eaf8176c.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[948],{5529:(e,n,t)=>{t.d(n,{Ay:()=>r,RM:()=>s});var i=t(4848),l=t(8453);const s=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function d(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"renderthumb",children:(0,i.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Function which receives ",(0,i.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,i.jsxs)(n.li,{children:["Overrides ",(0,i.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"thumbprops",children:(0,i.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,i.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"positionStyle"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"StyleProp"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"width"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"height"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"adaptiveColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"currentColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"initialColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,i.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function r(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},6379:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/panel1-467da7d5cafc669fd31a29110ad12315.png"},8453:(e,n,t)=>{t.d(n,{R:()=>d,x:()=>r});var i=t(6540);const l={},s=i.createContext(l);function d(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:d(e.components),i.createElement(s.Provider,{value:n},e.children)}},9932:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>c,default:()=>u,frontMatter:()=>r,metadata:()=>i,toc:()=>h});const i=JSON.parse('{"id":"API/Panels/Panel1","title":"<Panel1 />","description":"A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.","source":"@site/docs/API/Panels/Panel1.mdx","sourceDirName":"API/Panels","slug":"/API/Panels/Panel1","permalink":"/reanimated-color-picker/docs/API/Panels/Panel1","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":0,"frontMatter":{"sidebar_position":0,"sidebar_label":"Panel1","description":"A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors."},"sidebar":"tutorialSidebar","previous":{"title":"Panels","permalink":"/reanimated-color-picker/docs/category/panels"},"next":{"title":"Panel2","permalink":"/reanimated-color-picker/docs/API/Panels/Panel2"}}');var l=t(4848),s=t(8453),d=t(5529);const r={sidebar_position:0,sidebar_label:"Panel1",description:"A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors."},c="<Panel1 />",o={},h=[{value:"Props",id:"props",level:2},{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components},{Shapes:i}=n;return i||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"panel1-",children:(0,l.jsx)(n.code,{children:"<Panel1 />"})})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"panel1",src:t(6379).A+"",width:"200",height:"200"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:"A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.."}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:"Move the handle horizontally to change the color's saturation."}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:["\n",(0,l.jsx)(n.p,{children:"Move the handle vertically to change the color's brightness."}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{type:"tip",children:(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Add ",(0,l.jsx)(n.a,{href:"../Sliders/Hue/HueSlider",children:(0,l.jsx)(n.code,{children:"<HueSlider />"})})," component also to gain control over the three color channels."]}),"\n"]})}),"\n",(0,l.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,l.jsx)(n.h3,{id:"boundedthumb",children:(0,l.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel."}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the panel."]}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"false"}),", part of it will be outside of the panel bounds."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbsize",children:(0,l.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Panel's handle (thumb) size (height*width)."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbcolor",children:(0,l.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Change thumb's color."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"default"}),": interactive*"]}),"\n"]}),"\n",(0,l.jsxs)(n.admonition,{type:"info",children:[(0,l.jsx)(n.mdxAdmonitionTitle,{children:(0,l.jsx)(n.strong,{children:"*interactive"})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,l.jsx)(n.h3,{id:"thumbshape",children:(0,l.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Change thumb's shape and appearance."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"values"}),": ",(0,l.jsx)(i,{})]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 'ring'"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbstyle",children:(0,l.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,l.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,l.jsx)(d.Ay,{}),"\n",(0,l.jsx)(n.h3,{id:"gestures",children:(0,l.jsx)(n.code,{children:"gestures"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,l.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,l.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"style",children:(0,l.jsx)(n.code,{children:"style"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Panel's container style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{title:"note",type:"info",children:(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function u(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/a7456010.2f7a7300.js b/docs/build/assets/js/a7456010.2f7a7300.js
deleted file mode 100644
index 0dc9fd8..0000000
--- a/docs/build/assets/js/a7456010.2f7a7300.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[235],{8552:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/a7bd4aaa.a2f791de.js b/docs/build/assets/js/a7bd4aaa.a2f791de.js
new file mode 100644
index 0000000..13c9da8
--- /dev/null
+++ b/docs/build/assets/js/a7bd4aaa.a2f791de.js
@@ -0,0 +1,35 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [518],
+  {
+    8564: (n, s, e) => {
+      e.r(s), e.d(s, { default: () => l });
+      e(7294);
+      var r = e(1944),
+        o = e(3320),
+        t = e(4477),
+        c = e(8790),
+        i = e(197),
+        u = e(5893);
+      function a(n) {
+        const { version: s } = n;
+        return (0, u.jsxs)(u.Fragment, {
+          children: [
+            (0, u.jsx)(i.Z, { version: s.version, tag: (0, o.os)(s.pluginId, s.version) }),
+            (0, u.jsx)(r.d, { children: s.noIndex && (0, u.jsx)('meta', { name: 'robots', content: 'noindex, nofollow' }) }),
+          ],
+        });
+      }
+      function d(n) {
+        const { version: s, route: e } = n;
+        return (0, u.jsx)(r.FG, {
+          className: s.className,
+          children: (0, u.jsx)(t.q, { version: s, children: (0, c.H)(e.routes) }),
+        });
+      }
+      function l(n) {
+        return (0, u.jsxs)(u.Fragment, { children: [(0, u.jsx)(a, { ...n }), (0, u.jsx)(d, { ...n })] });
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/a7bd4aaa.e5e02b8a.js b/docs/build/assets/js/a7bd4aaa.e5e02b8a.js
deleted file mode 100644
index 354d960..0000000
--- a/docs/build/assets/js/a7bd4aaa.e5e02b8a.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[98],{1723:(n,e,s)=>{s.r(e),s.d(e,{default:()=>l});s(6540);var r=s(5500);function o(n,e){return`docs-${n}-${e}`}var t=s(3025),c=s(2831),i=s(1463),u=s(4848);function a(n){const{version:e}=n;return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(i.A,{version:e.version,tag:o(e.pluginId,e.version)}),(0,u.jsx)(r.be,{children:e.noIndex&&(0,u.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})]})}function d(n){const{version:e,route:s}=n;return(0,u.jsx)(r.e3,{className:e.className,children:(0,u.jsx)(t.n,{version:e,children:(0,c.v)(s.routes)})})}function l(n){return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(a,{...n}),(0,u.jsx)(d,{...n})]})}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/a94703ab.12f8560b.js b/docs/build/assets/js/a94703ab.12f8560b.js
deleted file mode 100644
index 70d2c22..0000000
--- a/docs/build/assets/js/a94703ab.12f8560b.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[48],{1377:(e,t,n)=>{n.r(t),n.d(t,{default:()=>pe});var a=n(6540),o=n(4164),i=n(5500),s=n(7559),r=n(6972),c=n(609),l=n(1312),d=n(3104),u=n(5062);const m={backToTopButton:"backToTopButton_sjWU",backToTopButtonShow:"backToTopButtonShow_xfvO"};var b=n(4848);function h(){const{shown:e,scrollToTop:t}=function({threshold:e}){const[t,n]=(0,a.useState)(!1),o=(0,a.useRef)(!1),{startScroll:i,cancelScroll:s}=(0,d.gk)();return(0,d.Mq)((({scrollY:t},a)=>{const i=a?.scrollY;i&&(o.current?o.current=!1:t>=i?(s(),n(!1)):t<e?n(!1):t+window.innerHeight<document.documentElement.scrollHeight&&n(!0))})),(0,u.$)((e=>{e.location.hash&&(o.current=!0,n(!1))})),{shown:t,scrollToTop:()=>i(0)}}({threshold:300});return(0,b.jsx)("button",{"aria-label":(0,l.T)({id:"theme.BackToTopButton.buttonAriaLabel",message:"Scroll back to top",description:"The ARIA label for the back to top button"}),className:(0,o.A)("clean-btn",s.G.common.backToTopButton,m.backToTopButton,e&&m.backToTopButtonShow),type:"button",onClick:t})}var p=n(3109),x=n(6347),f=n(4581),j=n(6342),v=n(3465);function _(e){return(0,b.jsx)("svg",{width:"20",height:"20","aria-hidden":"true",...e,children:(0,b.jsxs)("g",{fill:"#7a7a7a",children:[(0,b.jsx)("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),(0,b.jsx)("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"})]})})}const g="collapseSidebarButton_PEFL",A="collapseSidebarButtonIcon_kv0_";function C({onClick:e}){return(0,b.jsx)("button",{type:"button",title:(0,l.T)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":(0,l.T)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:(0,o.A)("button button--secondary button--outline",g),onClick:e,children:(0,b.jsx)(_,{className:A})})}var k=n(5041),S=n(9532);const T=Symbol("EmptyContext"),N=a.createContext(T);function I({children:e}){const[t,n]=(0,a.useState)(null),o=(0,a.useMemo)((()=>({expandedItem:t,setExpandedItem:n})),[t]);return(0,b.jsx)(N.Provider,{value:o,children:e})}var y=n(1422),B=n(9169),w=n(8774),L=n(2303);function E({collapsed:e,categoryLabel:t,onClick:n}){return(0,b.jsx)("button",{"aria-label":e?(0,l.T)({id:"theme.DocSidebarItem.expandCategoryAriaLabel",message:"Expand sidebar category '{label}'",description:"The ARIA label to expand the sidebar category"},{label:t}):(0,l.T)({id:"theme.DocSidebarItem.collapseCategoryAriaLabel",message:"Collapse sidebar category '{label}'",description:"The ARIA label to collapse the sidebar category"},{label:t}),"aria-expanded":!e,type:"button",className:"clean-btn menu__caret",onClick:n})}function M({item:e,onItemClick:t,activePath:n,level:i,index:c,...l}){const{items:d,label:u,collapsible:m,className:h,href:p}=e,{docs:{sidebar:{autoCollapseCategories:x}}}=(0,j.p)(),f=function(e){const t=(0,L.A)();return(0,a.useMemo)((()=>e.href&&!e.linkUnlisted?e.href:!t&&e.collapsible?(0,r.Nr)(e):void 0),[e,t])}(e),v=(0,r.w8)(e,n),_=(0,B.ys)(p,n),{collapsed:g,setCollapsed:A}=(0,y.u)({initialState:()=>!!m&&(!v&&e.collapsed)}),{expandedItem:C,setExpandedItem:k}=function(){const e=(0,a.useContext)(N);if(e===T)throw new S.dV("DocSidebarItemsExpandedStateProvider");return e}(),I=(e=!g)=>{k(e?null:c),A(e)};return function({isActive:e,collapsed:t,updateCollapsed:n}){const o=(0,S.ZC)(e);(0,a.useEffect)((()=>{e&&!o&&t&&n(!1)}),[e,o,t,n])}({isActive:v,collapsed:g,updateCollapsed:I}),(0,a.useEffect)((()=>{m&&null!=C&&C!==c&&x&&A(!0)}),[m,C,c,A,x]),(0,b.jsxs)("li",{className:(0,o.A)(s.G.docs.docSidebarItemCategory,s.G.docs.docSidebarItemCategoryLevel(i),"menu__list-item",{"menu__list-item--collapsed":g},h),children:[(0,b.jsxs)("div",{className:(0,o.A)("menu__list-item-collapsible",{"menu__list-item-collapsible--active":_}),children:[(0,b.jsx)(w.A,{className:(0,o.A)("menu__link",{"menu__link--sublist":m,"menu__link--sublist-caret":!p&&m,"menu__link--active":v}),onClick:m?n=>{t?.(e),p?v?(n.preventDefault(),I()):I(!1):(n.preventDefault(),I())}:()=>{t?.(e)},"aria-current":_?"page":void 0,role:m&&!p?"button":void 0,"aria-expanded":m&&!p?!g:void 0,href:m?f??"#":f,...l,children:u}),p&&m&&(0,b.jsx)(E,{collapsed:g,categoryLabel:u,onClick:e=>{e.preventDefault(),I()}})]}),(0,b.jsx)(y.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:g,children:(0,b.jsx)(V,{items:d,tabIndex:g?-1:0,onItemClick:t,activePath:n,level:i+1})})]})}var H=n(6654),G=n(3186);const P="menuExternalLink_NmtK";function R({item:e,onItemClick:t,activePath:n,level:a,index:i,...c}){const{href:l,label:d,className:u,autoAddBaseUrl:m}=e,h=(0,r.w8)(e,n),p=(0,H.A)(l);return(0,b.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(a),"menu__list-item",u),children:(0,b.jsxs)(w.A,{className:(0,o.A)("menu__link",!p&&P,{"menu__link--active":h}),autoAddBaseUrl:m,"aria-current":h?"page":void 0,to:l,...p&&{onClick:t?()=>t(e):void 0},...c,children:[d,!p&&(0,b.jsx)(G.A,{})]})},d)}const W="menuHtmlItem_M9Kj";function D({item:e,level:t,index:n}){const{value:a,defaultStyle:i,className:r}=e;return(0,b.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(t),i&&[W,"menu__list-item"],r),dangerouslySetInnerHTML:{__html:a}},n)}function F({item:e,...t}){switch(e.type){case"category":return(0,b.jsx)(M,{item:e,...t});case"html":return(0,b.jsx)(D,{item:e,...t});default:return(0,b.jsx)(R,{item:e,...t})}}function U({items:e,...t}){const n=(0,r.Y)(e,t.activePath);return(0,b.jsx)(I,{children:n.map(((e,n)=>(0,b.jsx)(F,{item:e,index:n,...t},n)))})}const V=(0,a.memo)(U),Y="menu_SIkG",K="menuWithAnnouncementBar_GW3s";function z({path:e,sidebar:t,className:n}){const i=function(){const{isActive:e}=(0,k.M)(),[t,n]=(0,a.useState)(e);return(0,d.Mq)((({scrollY:t})=>{e&&n(0===t)}),[e]),e&&t}();return(0,b.jsx)("nav",{"aria-label":(0,l.T)({id:"theme.docs.sidebar.navAriaLabel",message:"Docs sidebar",description:"The ARIA label for the sidebar navigation"}),className:(0,o.A)("menu thin-scrollbar",Y,i&&K,n),children:(0,b.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,b.jsx)(V,{items:t,activePath:e,level:1})})})}const q="sidebar_njMd",O="sidebarWithHideableNavbar_wUlq",J="sidebarHidden_VK0M",Q="sidebarLogo_isFc";function X({path:e,sidebar:t,onCollapse:n,isHidden:a}){const{navbar:{hideOnScroll:i},docs:{sidebar:{hideable:s}}}=(0,j.p)();return(0,b.jsxs)("div",{className:(0,o.A)(q,i&&O,a&&J),children:[i&&(0,b.jsx)(v.A,{tabIndex:-1,className:Q}),(0,b.jsx)(z,{path:e,sidebar:t}),s&&(0,b.jsx)(C,{onClick:n})]})}const Z=a.memo(X);var $=n(5600),ee=n(2069);const te=({sidebar:e,path:t})=>{const n=(0,ee.M)();return(0,b.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,b.jsx)(V,{items:e,activePath:t,onItemClick:e=>{"category"===e.type&&e.href&&n.toggle(),"link"===e.type&&n.toggle()},level:1})})};function ne(e){return(0,b.jsx)($.GX,{component:te,props:e})}const ae=a.memo(ne);function oe(e){const t=(0,f.l)(),n="desktop"===t||"ssr"===t,a="mobile"===t;return(0,b.jsxs)(b.Fragment,{children:[n&&(0,b.jsx)(Z,{...e}),a&&(0,b.jsx)(ae,{...e})]})}const ie={expandButton:"expandButton_TmdG",expandButtonIcon:"expandButtonIcon_i1dp"};function se({toggleSidebar:e}){return(0,b.jsx)("div",{className:ie.expandButton,title:(0,l.T)({id:"theme.docs.sidebar.expandButtonTitle",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),"aria-label":(0,l.T)({id:"theme.docs.sidebar.expandButtonAriaLabel",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),tabIndex:0,role:"button",onKeyDown:e,onClick:e,children:(0,b.jsx)(_,{className:ie.expandButtonIcon})})}const re={docSidebarContainer:"docSidebarContainer_YfHR",docSidebarContainerHidden:"docSidebarContainerHidden_DPk8",sidebarViewport:"sidebarViewport_aRkj"};function ce({children:e}){const t=(0,c.t)();return(0,b.jsx)(a.Fragment,{children:e},t?.name??"noSidebar")}function le({sidebar:e,hiddenSidebarContainer:t,setHiddenSidebarContainer:n}){const{pathname:i}=(0,x.zy)(),[r,c]=(0,a.useState)(!1),l=(0,a.useCallback)((()=>{r&&c(!1),!r&&(0,p.O)()&&c(!0),n((e=>!e))}),[n,r]);return(0,b.jsx)("aside",{className:(0,o.A)(s.G.docs.docSidebarContainer,re.docSidebarContainer,t&&re.docSidebarContainerHidden),onTransitionEnd:e=>{e.currentTarget.classList.contains(re.docSidebarContainer)&&t&&c(!0)},children:(0,b.jsx)(ce,{children:(0,b.jsxs)("div",{className:(0,o.A)(re.sidebarViewport,r&&re.sidebarViewportHidden),children:[(0,b.jsx)(oe,{sidebar:e,path:i,onCollapse:l,isHidden:r}),r&&(0,b.jsx)(se,{toggleSidebar:l})]})})})}const de={docMainContainer:"docMainContainer_TBSr",docMainContainerEnhanced:"docMainContainerEnhanced_lQrH",docItemWrapperEnhanced:"docItemWrapperEnhanced_JWYK"};function ue({hiddenSidebarContainer:e,children:t}){const n=(0,c.t)();return(0,b.jsx)("main",{className:(0,o.A)(de.docMainContainer,(e||!n)&&de.docMainContainerEnhanced),children:(0,b.jsx)("div",{className:(0,o.A)("container padding-top--md padding-bottom--lg",de.docItemWrapper,e&&de.docItemWrapperEnhanced),children:t})})}const me={docRoot:"docRoot_UBD9",docsWrapper:"docsWrapper_hBAB"};function be({children:e}){const t=(0,c.t)(),[n,o]=(0,a.useState)(!1);return(0,b.jsxs)("div",{className:me.docsWrapper,children:[(0,b.jsx)(h,{}),(0,b.jsxs)("div",{className:me.docRoot,children:[t&&(0,b.jsx)(le,{sidebar:t.items,hiddenSidebarContainer:n,setHiddenSidebarContainer:o}),(0,b.jsx)(ue,{hiddenSidebarContainer:n,children:e})]})]})}var he=n(3363);function pe(e){const t=(0,r.B5)(e);if(!t)return(0,b.jsx)(he.A,{});const{docElement:n,sidebarName:a,sidebarItems:l}=t;return(0,b.jsx)(i.e3,{className:(0,o.A)(s.G.page.docsDocPage),children:(0,b.jsx)(c.V,{name:a,items:l,children:(0,b.jsx)(be,{children:n})})})}},3363:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(4164),o=n(1312),i=n(1107),s=n(4848);function r({className:e}){return(0,s.jsx)("main",{className:(0,a.A)("container margin-vert--xl",e),children:(0,s.jsx)("div",{className:"row",children:(0,s.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,s.jsx)(i.A,{as:"h1",className:"hero__title",children:(0,s.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/a94703ab.ddd5d0fe.js b/docs/build/assets/js/a94703ab.ddd5d0fe.js
new file mode 100644
index 0000000..dc74ae1
--- /dev/null
+++ b/docs/build/assets/js/a94703ab.ddd5d0fe.js
@@ -0,0 +1,521 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [368],
+  {
+    2674: (e, t, n) => {
+      n.r(t), n.d(t, { default: () => be });
+      var a = n(7294),
+        o = n(512),
+        i = n(1944),
+        s = n(5281),
+        l = n(3438),
+        r = n(1116),
+        c = n(5999),
+        d = n(2466),
+        u = n(5936);
+      const m = { backToTopButton: 'backToTopButton_sjWU', backToTopButtonShow: 'backToTopButtonShow_xfvO' };
+      var b = n(5893);
+      function h() {
+        const { shown: e, scrollToTop: t } = (function (e) {
+          let { threshold: t } = e;
+          const [n, o] = (0, a.useState)(!1),
+            i = (0, a.useRef)(!1),
+            { startScroll: s, cancelScroll: l } = (0, d.Ct)();
+          return (
+            (0, d.RF)((e, n) => {
+              let { scrollY: a } = e;
+              const s = n?.scrollY;
+              s &&
+                (i.current
+                  ? (i.current = !1)
+                  : a >= s
+                    ? (l(), o(!1))
+                    : a < t
+                      ? o(!1)
+                      : a + window.innerHeight < document.documentElement.scrollHeight && o(!0));
+            }),
+            (0, u.S)(e => {
+              e.location.hash && ((i.current = !0), o(!1));
+            }),
+            { shown: n, scrollToTop: () => s(0) }
+          );
+        })({ threshold: 300 });
+        return (0, b.jsx)('button', {
+          'aria-label': (0, c.I)({
+            id: 'theme.BackToTopButton.buttonAriaLabel',
+            message: 'Scroll back to top',
+            description: 'The ARIA label for the back to top button',
+          }),
+          className: (0, o.Z)('clean-btn', s.k.common.backToTopButton, m.backToTopButton, e && m.backToTopButtonShow),
+          type: 'button',
+          onClick: t,
+        });
+      }
+      var p = n(1442),
+        x = n(6550),
+        f = n(7524),
+        j = n(6668),
+        k = n(1327);
+      function _(e) {
+        return (0, b.jsx)('svg', {
+          width: '20',
+          height: '20',
+          'aria-hidden': 'true',
+          ...e,
+          children: (0, b.jsxs)('g', {
+            fill: '#7a7a7a',
+            children: [
+              (0, b.jsx)('path', {
+                d: 'M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0',
+              }),
+              (0, b.jsx)('path', {
+                d: 'M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0',
+              }),
+            ],
+          }),
+        });
+      }
+      const v = {
+        collapseSidebarButton: 'collapseSidebarButton_PEFL',
+        collapseSidebarButtonIcon: 'collapseSidebarButtonIcon_kv0_',
+      };
+      function g(e) {
+        let { onClick: t } = e;
+        return (0, b.jsx)('button', {
+          type: 'button',
+          title: (0, c.I)({
+            id: 'theme.docs.sidebar.collapseButtonTitle',
+            message: 'Collapse sidebar',
+            description: 'The title attribute for collapse button of doc sidebar',
+          }),
+          'aria-label': (0, c.I)({
+            id: 'theme.docs.sidebar.collapseButtonAriaLabel',
+            message: 'Collapse sidebar',
+            description: 'The title attribute for collapse button of doc sidebar',
+          }),
+          className: (0, o.Z)('button button--secondary button--outline', v.collapseSidebarButton),
+          onClick: t,
+          children: (0, b.jsx)(_, { className: v.collapseSidebarButtonIcon }),
+        });
+      }
+      var C = n(9689),
+        S = n(902);
+      const I = Symbol('EmptyContext'),
+        N = a.createContext(I);
+      function T(e) {
+        let { children: t } = e;
+        const [n, o] = (0, a.useState)(null),
+          i = (0, a.useMemo)(() => ({ expandedItem: n, setExpandedItem: o }), [n]);
+        return (0, b.jsx)(N.Provider, { value: i, children: t });
+      }
+      var B = n(6043),
+        Z = n(8596),
+        y = n(3692),
+        A = n(2389);
+      function L(e) {
+        let { collapsed: t, categoryLabel: n, onClick: a } = e;
+        return (0, b.jsx)('button', {
+          'aria-label': t
+            ? (0, c.I)(
+                {
+                  id: 'theme.DocSidebarItem.expandCategoryAriaLabel',
+                  message: "Expand sidebar category '{label}'",
+                  description: 'The ARIA label to expand the sidebar category',
+                },
+                { label: n },
+              )
+            : (0, c.I)(
+                {
+                  id: 'theme.DocSidebarItem.collapseCategoryAriaLabel',
+                  message: "Collapse sidebar category '{label}'",
+                  description: 'The ARIA label to collapse the sidebar category',
+                },
+                { label: n },
+              ),
+          type: 'button',
+          className: 'clean-btn menu__caret',
+          onClick: a,
+        });
+      }
+      function w(e) {
+        let { item: t, onItemClick: n, activePath: i, level: r, index: c, ...d } = e;
+        const { items: u, label: m, collapsible: h, className: p, href: x } = t,
+          {
+            docs: {
+              sidebar: { autoCollapseCategories: f },
+            },
+          } = (0, j.L)(),
+          k = (function (e) {
+            const t = (0, A.Z)();
+            return (0, a.useMemo)(
+              () => (e.href && !e.linkUnlisted ? e.href : !t && e.collapsible ? (0, l.LM)(e) : void 0),
+              [e, t],
+            );
+          })(t),
+          _ = (0, l._F)(t, i),
+          v = (0, Z.Mg)(x, i),
+          { collapsed: g, setCollapsed: C } = (0, B.u)({ initialState: () => !!h && !_ && t.collapsed }),
+          { expandedItem: T, setExpandedItem: w } = (function () {
+            const e = (0, a.useContext)(N);
+            if (e === I) throw new S.i6('DocSidebarItemsExpandedStateProvider');
+            return e;
+          })(),
+          E = function (e) {
+            void 0 === e && (e = !g), w(e ? null : c), C(e);
+          };
+        return (
+          (function (e) {
+            let { isActive: t, collapsed: n, updateCollapsed: o } = e;
+            const i = (0, S.D9)(t);
+            (0, a.useEffect)(() => {
+              t && !i && n && o(!1);
+            }, [t, i, n, o]);
+          })({ isActive: _, collapsed: g, updateCollapsed: E }),
+          (0, a.useEffect)(() => {
+            h && null != T && T !== c && f && C(!0);
+          }, [h, T, c, C, f]),
+          (0, b.jsxs)('li', {
+            className: (0, o.Z)(
+              s.k.docs.docSidebarItemCategory,
+              s.k.docs.docSidebarItemCategoryLevel(r),
+              'menu__list-item',
+              { 'menu__list-item--collapsed': g },
+              p,
+            ),
+            children: [
+              (0, b.jsxs)('div', {
+                className: (0, o.Z)('menu__list-item-collapsible', { 'menu__list-item-collapsible--active': v }),
+                children: [
+                  (0, b.jsx)(y.Z, {
+                    className: (0, o.Z)('menu__link', {
+                      'menu__link--sublist': h,
+                      'menu__link--sublist-caret': !x && h,
+                      'menu__link--active': _,
+                    }),
+                    onClick: h
+                      ? e => {
+                          n?.(t), x ? E(!1) : (e.preventDefault(), E());
+                        }
+                      : () => {
+                          n?.(t);
+                        },
+                    'aria-current': v ? 'page' : void 0,
+                    'aria-expanded': h ? !g : void 0,
+                    href: h ? k ?? '#' : k,
+                    ...d,
+                    children: m,
+                  }),
+                  x &&
+                    h &&
+                    (0, b.jsx)(L, {
+                      collapsed: g,
+                      categoryLabel: m,
+                      onClick: e => {
+                        e.preventDefault(), E();
+                      },
+                    }),
+                ],
+              }),
+              (0, b.jsx)(B.z, {
+                lazy: !0,
+                as: 'ul',
+                className: 'menu__list',
+                collapsed: g,
+                children: (0, b.jsx)(V, { items: u, tabIndex: g ? -1 : 0, onItemClick: n, activePath: i, level: r + 1 }),
+              }),
+            ],
+          })
+        );
+      }
+      var E = n(3919),
+        H = n(9471);
+      const M = { menuExternalLink: 'menuExternalLink_NmtK' };
+      function R(e) {
+        let { item: t, onItemClick: n, activePath: a, level: i, index: r, ...c } = e;
+        const { href: d, label: u, className: m, autoAddBaseUrl: h } = t,
+          p = (0, l._F)(t, a),
+          x = (0, E.Z)(d);
+        return (0, b.jsx)(
+          'li',
+          {
+            className: (0, o.Z)(s.k.docs.docSidebarItemLink, s.k.docs.docSidebarItemLinkLevel(i), 'menu__list-item', m),
+            children: (0, b.jsxs)(y.Z, {
+              className: (0, o.Z)('menu__link', !x && M.menuExternalLink, { 'menu__link--active': p }),
+              autoAddBaseUrl: h,
+              'aria-current': p ? 'page' : void 0,
+              to: d,
+              ...(x && { onClick: n ? () => n(t) : void 0 }),
+              ...c,
+              children: [u, !x && (0, b.jsx)(H.Z, {})],
+            }),
+          },
+          u,
+        );
+      }
+      const W = { menuHtmlItem: 'menuHtmlItem_M9Kj' };
+      function F(e) {
+        let { item: t, level: n, index: a } = e;
+        const { value: i, defaultStyle: l, className: r } = t;
+        return (0, b.jsx)(
+          'li',
+          {
+            className: (0, o.Z)(
+              s.k.docs.docSidebarItemLink,
+              s.k.docs.docSidebarItemLinkLevel(n),
+              l && [W.menuHtmlItem, 'menu__list-item'],
+              r,
+            ),
+            dangerouslySetInnerHTML: { __html: i },
+          },
+          a,
+        );
+      }
+      function P(e) {
+        let { item: t, ...n } = e;
+        switch (t.type) {
+          case 'category':
+            return (0, b.jsx)(w, { item: t, ...n });
+          case 'html':
+            return (0, b.jsx)(F, { item: t, ...n });
+          default:
+            return (0, b.jsx)(R, { item: t, ...n });
+        }
+      }
+      function D(e) {
+        let { items: t, ...n } = e;
+        const a = (0, l.f)(t, n.activePath);
+        return (0, b.jsx)(T, { children: a.map((e, t) => (0, b.jsx)(P, { item: e, index: t, ...n }, t)) });
+      }
+      const V = (0, a.memo)(D),
+        U = { menu: 'menu_SIkG', menuWithAnnouncementBar: 'menuWithAnnouncementBar_GW3s' };
+      function K(e) {
+        let { path: t, sidebar: n, className: i } = e;
+        const l = (function () {
+          const { isActive: e } = (0, C.nT)(),
+            [t, n] = (0, a.useState)(e);
+          return (
+            (0, d.RF)(
+              t => {
+                let { scrollY: a } = t;
+                e && n(0 === a);
+              },
+              [e],
+            ),
+            e && t
+          );
+        })();
+        return (0, b.jsx)('nav', {
+          'aria-label': (0, c.I)({
+            id: 'theme.docs.sidebar.navAriaLabel',
+            message: 'Docs sidebar',
+            description: 'The ARIA label for the sidebar navigation',
+          }),
+          className: (0, o.Z)('menu thin-scrollbar', U.menu, l && U.menuWithAnnouncementBar, i),
+          children: (0, b.jsx)('ul', {
+            className: (0, o.Z)(s.k.docs.docSidebarMenu, 'menu__list'),
+            children: (0, b.jsx)(V, { items: n, activePath: t, level: 1 }),
+          }),
+        });
+      }
+      const Y = 'sidebar_njMd',
+        z = 'sidebarWithHideableNavbar_wUlq',
+        G = 'sidebarHidden_VK0M',
+        O = 'sidebarLogo_isFc';
+      function q(e) {
+        let { path: t, sidebar: n, onCollapse: a, isHidden: i } = e;
+        const {
+          navbar: { hideOnScroll: s },
+          docs: {
+            sidebar: { hideable: l },
+          },
+        } = (0, j.L)();
+        return (0, b.jsxs)('div', {
+          className: (0, o.Z)(Y, s && z, i && G),
+          children: [
+            s && (0, b.jsx)(k.Z, { tabIndex: -1, className: O }),
+            (0, b.jsx)(K, { path: t, sidebar: n }),
+            l && (0, b.jsx)(g, { onClick: a }),
+          ],
+        });
+      }
+      const J = a.memo(q);
+      var Q = n(3102),
+        X = n(3163);
+      const $ = e => {
+        let { sidebar: t, path: n } = e;
+        const a = (0, X.e)();
+        return (0, b.jsx)('ul', {
+          className: (0, o.Z)(s.k.docs.docSidebarMenu, 'menu__list'),
+          children: (0, b.jsx)(V, {
+            items: t,
+            activePath: n,
+            onItemClick: e => {
+              'category' === e.type && e.href && a.toggle(), 'link' === e.type && a.toggle();
+            },
+            level: 1,
+          }),
+        });
+      };
+      function ee(e) {
+        return (0, b.jsx)(Q.Zo, { component: $, props: e });
+      }
+      const te = a.memo(ee);
+      function ne(e) {
+        const t = (0, f.i)(),
+          n = 'desktop' === t || 'ssr' === t,
+          a = 'mobile' === t;
+        return (0, b.jsxs)(b.Fragment, { children: [n && (0, b.jsx)(J, { ...e }), a && (0, b.jsx)(te, { ...e })] });
+      }
+      const ae = { expandButton: 'expandButton_TmdG', expandButtonIcon: 'expandButtonIcon_i1dp' };
+      function oe(e) {
+        let { toggleSidebar: t } = e;
+        return (0, b.jsx)('div', {
+          className: ae.expandButton,
+          title: (0, c.I)({
+            id: 'theme.docs.sidebar.expandButtonTitle',
+            message: 'Expand sidebar',
+            description: 'The ARIA label and title attribute for expand button of doc sidebar',
+          }),
+          'aria-label': (0, c.I)({
+            id: 'theme.docs.sidebar.expandButtonAriaLabel',
+            message: 'Expand sidebar',
+            description: 'The ARIA label and title attribute for expand button of doc sidebar',
+          }),
+          tabIndex: 0,
+          role: 'button',
+          onKeyDown: t,
+          onClick: t,
+          children: (0, b.jsx)(_, { className: ae.expandButtonIcon }),
+        });
+      }
+      const ie = {
+        docSidebarContainer: 'docSidebarContainer_YfHR',
+        docSidebarContainerHidden: 'docSidebarContainerHidden_DPk8',
+        sidebarViewport: 'sidebarViewport_aRkj',
+      };
+      function se(e) {
+        let { children: t } = e;
+        const n = (0, r.V)();
+        return (0, b.jsx)(a.Fragment, { children: t }, n?.name ?? 'noSidebar');
+      }
+      function le(e) {
+        let { sidebar: t, hiddenSidebarContainer: n, setHiddenSidebarContainer: i } = e;
+        const { pathname: l } = (0, x.TH)(),
+          [r, c] = (0, a.useState)(!1),
+          d = (0, a.useCallback)(() => {
+            r && c(!1), !r && (0, p.n)() && c(!0), i(e => !e);
+          }, [i, r]);
+        return (0, b.jsx)('aside', {
+          className: (0, o.Z)(s.k.docs.docSidebarContainer, ie.docSidebarContainer, n && ie.docSidebarContainerHidden),
+          onTransitionEnd: e => {
+            e.currentTarget.classList.contains(ie.docSidebarContainer) && n && c(!0);
+          },
+          children: (0, b.jsx)(se, {
+            children: (0, b.jsxs)('div', {
+              className: (0, o.Z)(ie.sidebarViewport, r && ie.sidebarViewportHidden),
+              children: [
+                (0, b.jsx)(ne, { sidebar: t, path: l, onCollapse: d, isHidden: r }),
+                r && (0, b.jsx)(oe, { toggleSidebar: d }),
+              ],
+            }),
+          }),
+        });
+      }
+      const re = {
+        docMainContainer: 'docMainContainer_TBSr',
+        docMainContainerEnhanced: 'docMainContainerEnhanced_lQrH',
+        docItemWrapperEnhanced: 'docItemWrapperEnhanced_JWYK',
+      };
+      function ce(e) {
+        let { hiddenSidebarContainer: t, children: n } = e;
+        const a = (0, r.V)();
+        return (0, b.jsx)('main', {
+          className: (0, o.Z)(re.docMainContainer, (t || !a) && re.docMainContainerEnhanced),
+          children: (0, b.jsx)('div', {
+            className: (0, o.Z)(
+              'container padding-top--md padding-bottom--lg',
+              re.docItemWrapper,
+              t && re.docItemWrapperEnhanced,
+            ),
+            children: n,
+          }),
+        });
+      }
+      const de = { docRoot: 'docRoot_UBD9', docsWrapper: 'docsWrapper_hBAB' };
+      function ue(e) {
+        let { children: t } = e;
+        const n = (0, r.V)(),
+          [o, i] = (0, a.useState)(!1);
+        return (0, b.jsxs)('div', {
+          className: de.docsWrapper,
+          children: [
+            (0, b.jsx)(h, {}),
+            (0, b.jsxs)('div', {
+              className: de.docRoot,
+              children: [
+                n && (0, b.jsx)(le, { sidebar: n.items, hiddenSidebarContainer: o, setHiddenSidebarContainer: i }),
+                (0, b.jsx)(ce, { hiddenSidebarContainer: o, children: t }),
+              ],
+            }),
+          ],
+        });
+      }
+      var me = n(5658);
+      function be(e) {
+        const t = (0, l.SN)(e);
+        if (!t) return (0, b.jsx)(me.Z, {});
+        const { docElement: n, sidebarName: a, sidebarItems: c } = t;
+        return (0, b.jsx)(i.FG, {
+          className: (0, o.Z)(s.k.page.docsDocPage),
+          children: (0, b.jsx)(r.b, { name: a, items: c, children: (0, b.jsx)(ue, { children: n }) }),
+        });
+      }
+    },
+    5658: (e, t, n) => {
+      n.d(t, { Z: () => l });
+      n(7294);
+      var a = n(512),
+        o = n(5999),
+        i = n(2503),
+        s = n(5893);
+      function l(e) {
+        let { className: t } = e;
+        return (0, s.jsx)('main', {
+          className: (0, a.Z)('container margin-vert--xl', t),
+          children: (0, s.jsx)('div', {
+            className: 'row',
+            children: (0, s.jsxs)('div', {
+              className: 'col col--6 col--offset-3',
+              children: [
+                (0, s.jsx)(i.Z, {
+                  as: 'h1',
+                  className: 'hero__title',
+                  children: (0, s.jsx)(o.Z, {
+                    id: 'theme.NotFound.title',
+                    description: 'The title of the 404 page',
+                    children: 'Page Not Found',
+                  }),
+                }),
+                (0, s.jsx)('p', {
+                  children: (0, s.jsx)(o.Z, {
+                    id: 'theme.NotFound.p1',
+                    description: 'The first paragraph of the 404 page',
+                    children: 'We could not find what you were looking for.',
+                  }),
+                }),
+                (0, s.jsx)('p', {
+                  children: (0, s.jsx)(o.Z, {
+                    id: 'theme.NotFound.p2',
+                    description: 'The 2nd paragraph of the 404 page',
+                    children:
+                      'Please contact the owner of the site that linked you to the original URL and let them know their link is broken.',
+                  }),
+                }),
+              ],
+            }),
+          }),
+        });
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/aba21aa0.d09a9927.js b/docs/build/assets/js/aba21aa0.d09a9927.js
deleted file mode 100644
index 301fe36..0000000
--- a/docs/build/assets/js/aba21aa0.d09a9927.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[742],{7093:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/ba30bb47.a96cda2c.js b/docs/build/assets/js/ba30bb47.a96cda2c.js
deleted file mode 100644
index 554a537..0000000
--- a/docs/build/assets/js/ba30bb47.a96cda2c.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[326],{5529:(e,n,l)=>{l.d(n,{Ay:()=>s,RM:()=>t});var i=l(4848),d=l(8453);const t=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function r(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"renderthumb",children:(0,i.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Function which receives ",(0,i.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,i.jsxs)(n.li,{children:["Overrides ",(0,i.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"thumbprops",children:(0,i.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,i.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"positionStyle"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"StyleProp"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"width"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"height"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"adaptiveColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"currentColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"initialColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,i.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}},6117:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>u,frontMatter:()=>s,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"API/Sliders/HSL/LuminanceSlider","title":"<LuminanceSlider />","description":"A slider for adjusting the color luminance channel in the HSL color space.","source":"@site/docs/API/Sliders/HSL/LuminanceSlider.mdx","sourceDirName":"API/Sliders/HSL","slug":"/API/Sliders/HSL/LuminanceSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1,"sidebar_label":"LuminanceSlider","description":"A slider for adjusting the color luminance channel in the HSL color space."},"sidebar":"tutorialSidebar","previous":{"title":"HSLSaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"},"next":{"title":"LuminanceCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"}}');var d=l(4848),t=l(8453),r=l(7869);const s={sidebar_position:1,sidebar_label:"LuminanceSlider",description:"A slider for adjusting the color luminance channel in the HSL color space."},c="<LuminanceSlider />",h={},o=[{value:"A slider for adjusting the color luminance channel in the HSL color space.",id:"a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space",level:3},{value:"Props",id:"props",level:2},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},...r.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,t.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"luminanceslider-",children:(0,d.jsx)(n.code,{children:"<LuminanceSlider />"})})}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"luminance",src:l(9916).A+"",width:"256",height:"40"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsx)(n.h3,{id:"a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space",children:"A slider for adjusting the color luminance channel in the HSL color space."}),"\n"]}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,d.jsx)(n.h3,{id:"adaptspectrum",children:(0,d.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n","\n",(0,d.jsx)(r.Ay,{})]})}function u(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},7793:(e,n,l)=>{l.d(n,{A:()=>i});const i="data:image/png;base64,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"},7869:(e,n,l)=>{l.d(n,{Ay:()=>c,RM:()=>r});var i=l(4848),d=l(8453),t=l(5529);const r=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...t.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,d.R)(),...e.components},{Shapes:r}=n;return r||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"boundedthumb",children:(0,i.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"boundedThumb",src:l(7793).A+"",width:"180",height:"130"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,i.jsxs)(n.li,{children:["When set to ",(0,i.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbsize",children:(0,i.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbcolor",children:(0,i.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,i.jsxs)(n.admonition,{type:"info",children:[(0,i.jsx)(n.mdxAdmonitionTitle,{children:(0,i.jsx)(n.strong,{children:"*interactive"})}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,i.jsx)(n.h3,{id:"sliderthickness",children:(0,i.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The thickness is the ",(0,i.jsx)(n.code,{children:"width"})," of the slider in ",(0,i.jsx)(n.code,{children:"vertical"})," mode or the ",(0,i.jsx)(n.code,{children:"height"})," in ",(0,i.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbshape",children:(0,i.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: string"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"values:"}),(0,i.jsx)(r,{})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbstyle",children:(0,i.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,i.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,i.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: number"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,i.jsx)(t.Ay,{}),"\n",(0,i.jsx)(n.h3,{id:"reverse",children:(0,i.jsx)(n.code,{children:"reverse"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"vertical",children:(0,i.jsx)(n.code,{children:"vertical"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"gestures",children:(0,i.jsx)(n.code,{children:"gestures"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,i.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"style",children:(0,i.jsx)(n.code,{children:"style"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{title:"note",type:"info",children:(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(s,{...e})}):s(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>r,x:()=>s});var i=l(6540);const d={},t=i.createContext(d);function r(e){const n=i.useContext(t);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:r(e.components),i.createElement(t.Provider,{value:n},e.children)}},9916:(e,n,l)=>{l.d(n,{A:()=>i});const i="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/ba30bb47.c09e211f.js b/docs/build/assets/js/ba30bb47.c09e211f.js
new file mode 100644
index 0000000..2922575
--- /dev/null
+++ b/docs/build/assets/js/ba30bb47.c09e211f.js
@@ -0,0 +1,640 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [387],
+  {
+    8667: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => h,
+          contentTitle: () => s,
+          default: () => j,
+          frontMatter: () => d,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var l = i(5893),
+        t = i(1151),
+        r = i(51);
+      const d = {
+          sidebar_position: 1,
+          sidebar_label: 'LuminanceSlider',
+          description: 'A slider for adjusting the color luminance channel in the HSL color space.',
+        },
+        s = '<LuminanceSlider />',
+        c = {
+          id: 'API/Sliders/HSL/LuminanceSlider',
+          title: '<LuminanceSlider />',
+          description: 'A slider for adjusting the color luminance channel in the HSL color space.',
+          source: '@site/docs/API/Sliders/HSL/LuminanceSlider.mdx',
+          sourceDirName: 'API/Sliders/HSL',
+          slug: '/API/Sliders/HSL/LuminanceSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 1,
+          frontMatter: {
+            sidebar_position: 1,
+            sidebar_label: 'LuminanceSlider',
+            description: 'A slider for adjusting the color luminance channel in the HSL color space.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: {
+            title: 'HSLSaturationSlider',
+            permalink: '/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider',
+          },
+          next: { title: 'LuminanceCircular', permalink: '/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular' },
+        },
+        h = {},
+        o = [
+          {
+            value: 'A slider for adjusting the color luminance channel in the HSL color space.',
+            id: 'a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h1, { id: 'luminanceslider-', children: (0, l.jsx)(n.code, { children: '<LuminanceSlider />' }) }),
+            '\n',
+            (0, l.jsx)(n.p, {
+              children: (0, l.jsx)(n.img, { alt: 'luminance', src: i(3346).Z + '', width: '256', height: '40' }),
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, l.jsx)(n.h3, {
+                      id: 'a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space',
+                      children: 'A slider for adjusting the color luminance channel in the HSL color space.',
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, l.jsx)(n.h3, { id: 'adaptspectrum', children: (0, l.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsx)(n.li, {
+                  children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                }),
+                '\n',
+                (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, l.jsx)(r.ZP, {}),
+          ],
+        });
+      }
+      function j(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => d });
+      var l = i(5893),
+        t = i(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h4, { id: 'thumbprops', children: (0, l.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, l.jsxs)(n.table, {
+              children: [
+                (0, l.jsx)(n.thead, {
+                  children: (0, l.jsxs)(n.tr, {
+                    children: [
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, l.jsxs)(n.tbody, {
+                  children: [
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, l.jsx)(n.code, { children: 'width' }) }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, l.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, { children: ['\n', (0, l.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, l.jsx)(n.pre, {
+              children: (0, l.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    51: (e, n, i) => {
+      i.d(n, { ZP: () => s });
+      var l = i(5893),
+        t = i(1151),
+        r = i(435);
+      function d(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, t.a)(),
+            ...e.components,
+          },
+          { Shapes: d } = n;
+        return (
+          d ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, l.jsxs)(l.Fragment, {
+            children: [
+              (0, l.jsx)(n.h3, { id: 'boundedthumb', children: (0, l.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, l.jsx)(n.p, {
+                children: (0, l.jsx)(n.img, { alt: 'boundedThumb', src: i(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, l.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbsize', children: (0, l.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbcolor', children: (0, l.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, l.jsx)(n.mdxAdmonitionTitle, { children: (0, l.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, l.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'sliderthickness', children: (0, l.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, l.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, l.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, l.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, l.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbshape', children: (0, l.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'values:' }), (0, l.jsx)(d, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbstyle', children: (0, l.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, l.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, l.jsx)(r.ZP, {}),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'reverse', children: (0, l.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'vertical', children: (0, l.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'gestures', children: (0, l.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, l.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'style', children: (0, l.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, l.jsxs)(n.ul, {
+                  children: ['\n', (0, l.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    2737: (e, n, i) => {
+      i.d(n, { Z: () => l });
+      const l =
+        'data:image/png;base64,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';
+    },
+    3346: (e, n, i) => {
+      i.d(n, { Z: () => l });
+      const l =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => s, a: () => d });
+      var l = i(7294);
+      const t = {},
+        r = l.createContext(t);
+      function d(e) {
+        const n = l.useContext(r);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function s(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(t)
+              : e.components || t
+            : d(e.components)),
+          l.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/be41ce4f.be45697c.js b/docs/build/assets/js/be41ce4f.be45697c.js
new file mode 100644
index 0000000..e67e05f
--- /dev/null
+++ b/docs/build/assets/js/be41ce4f.be45697c.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [447],
+  {
+    566: e => {
+      e.exports = JSON.parse(
+        '{"title":"Hue","description":"API documentation for Hue Slider components","slug":"/category/hue","permalink":"/reanimated-color-picker/docs/category/hue","navigation":{"previous":{"title":"Sliders","permalink":"/reanimated-color-picker/docs/category/sliders"},"next":{"title":"HueSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/bf417703.bb817925.js b/docs/build/assets/js/bf417703.bb817925.js
new file mode 100644
index 0000000..ba9ebbe
--- /dev/null
+++ b/docs/build/assets/js/bf417703.bb817925.js
@@ -0,0 +1,161 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [476],
+  {
+    9574: (e, n, r) => {
+      r.r(n),
+        r.d(n, {
+          assets: () => a,
+          contentTitle: () => s,
+          default: () => u,
+          frontMatter: () => i,
+          metadata: () => l,
+          toc: () => c,
+        });
+      var t = r(5893),
+        o = r(1151);
+      const i = { sidebar_position: 4 },
+        s = 'Usage',
+        l = {
+          id: 'Usage',
+          title: 'Usage',
+          description: '- You can add, remove, rearrange, or style the built-in components of the color picker.',
+          source: '@site/docs/Usage.md',
+          sourceDirName: '.',
+          slug: '/Usage',
+          permalink: '/reanimated-color-picker/docs/Usage',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 4,
+          frontMatter: { sidebar_position: 4 },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Installation', permalink: '/reanimated-color-picker/docs/Installation' },
+          next: { title: 'API', permalink: '/reanimated-color-picker/docs/category/api' },
+        },
+        a = {},
+        c = [];
+      function d(e) {
+        const n = {
+          a: 'a',
+          admonition: 'admonition',
+          code: 'code',
+          h1: 'h1',
+          li: 'li',
+          p: 'p',
+          pre: 'pre',
+          ul: 'ul',
+          ...(0, o.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h1, { id: 'usage', children: 'Usage' }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsx)(n.p, {
+                      children: 'You can add, remove, rearrange, or style the built-in components of the color picker.',
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsxs)(n.p, {
+                      children: [
+                        'Please take a look at the functioning examples: ',
+                        (0, t.jsx)(n.a, { href: './Examples', children: 'Examples' }),
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsxs)(n.admonition, {
+              type: 'info',
+              children: [
+                (0, t.jsxs)(n.p, { children: ['Using inside a ', (0, t.jsx)(n.code, { children: 'ScrollView' })] }),
+                (0, t.jsxs)(n.ul, {
+                  children: [
+                    '\n',
+                    (0, t.jsxs)(n.li, {
+                      children: [
+                        'If you experience gesture conflicts when using the color picker inside a ',
+                        (0, t.jsx)(n.code, { children: 'ScrollView' }),
+                        ', simply import the ',
+                        (0, t.jsx)(n.code, { children: 'ScrollView' }),
+                        ' from ',
+                        (0, t.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                        ' instead of from ',
+                        (0, t.jsx)(n.code, { children: 'react-native' }),
+                        '.',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+                (0, t.jsx)(n.pre, {
+                  children: (0, t.jsx)(n.code, {
+                    className: 'language-ts',
+                    children: "import { ScrollView } from 'react-native-gesture-handler';\n",
+                  }),
+                }),
+              ],
+            }),
+            '\n',
+            (0, t.jsx)('br', {}),
+            '\n',
+            (0, t.jsx)(n.pre, {
+              children: (0, t.jsx)(n.code, {
+                className: 'language-jsx',
+                children:
+                  "import React, { useState } from 'react';\r\nimport { Button, Modal, StyleSheet, View } from 'react-native';\r\n\r\nimport ColorPicker, { Panel1, Swatches, Preview, OpacitySlider, HueSlider } from 'reanimated-color-picker';\r\n\r\nexport default function App() {\r\n  const [showModal, setShowModal] = useState(false);\r\n\r\n  // Note: use `onCompleteJS` and `onChangeJS` for non-worklet functions\r\n  const onSelectColor = ({ hex }) => {\r\n    'worklet';\r\n    // do something with the selected color.\r\n    console.log(hex);\r\n  };\r\n\r\n  return (\r\n    <View style={styles.container}>\r\n      <Button title='Color Picker' onPress={() => setShowModal(true)} />\r\n\r\n      <Modal visible={showModal} animationType='slide'>\r\n        <ColorPicker style={{ width: '70%' }} value='red' onComplete={onSelectColor}>\r\n          <Preview />\r\n          <Panel1 />\r\n          <HueSlider />\r\n          <OpacitySlider />\r\n          <Swatches />\r\n        </ColorPicker>\r\n\r\n        <Button title='Ok' onPress={() => setShowModal(false)} />\r\n      </Modal>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n  },\r\n});\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function u(e = {}) {
+        const { wrapper: n } = { ...(0, o.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    1151: (e, n, r) => {
+      r.d(n, { Z: () => l, a: () => s });
+      var t = r(7294);
+      const o = {},
+        i = t.createContext(o);
+      function s(e) {
+        const n = t.useContext(i);
+        return t.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function l(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(o)
+              : e.components || o
+            : s(e.components)),
+          t.createElement(i.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/bf417703.ee6ddaa7.js b/docs/build/assets/js/bf417703.ee6ddaa7.js
deleted file mode 100644
index 5dbd6d2..0000000
--- a/docs/build/assets/js/bf417703.ee6ddaa7.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[571],{1919:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>c});const o=JSON.parse('{"id":"Usage","title":"Usage","description":"- You can add, remove, rearrange, or style the built-in components of the color picker.","source":"@site/docs/Usage.md","sourceDirName":".","slug":"/Usage","permalink":"/reanimated-color-picker/docs/Usage","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4},"sidebar":"tutorialSidebar","previous":{"title":"Installation","permalink":"/reanimated-color-picker/docs/Installation"},"next":{"title":"API","permalink":"/reanimated-color-picker/docs/category/api"}}');var r=t(4848),s=t(8453);const i={sidebar_position:4},l="Usage",a={},c=[];function d(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usage",children:"Usage"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"You can add, remove, rearrange, or style the built-in components of the color picker."}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Please take a look at the functioning examples: ",(0,r.jsx)(n.a,{href:"./Examples",children:"Examples"})]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.admonition,{type:"info",children:[(0,r.jsxs)(n.p,{children:["Using inside a ",(0,r.jsx)(n.code,{children:"ScrollView"})]}),(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["If you experience gesture conflicts when using the color picker inside a ",(0,r.jsx)(n.code,{children:"ScrollView"}),", simply import the ",(0,r.jsx)(n.code,{children:"ScrollView"})," from ",(0,r.jsx)(n.code,{children:"react-native-gesture-handler"})," instead of from ",(0,r.jsx)(n.code,{children:"react-native"}),"."]}),"\n"]}),(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { ScrollView } from 'react-native-gesture-handler';\n"})})]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:"import React, { useState } from 'react';\nimport { Button, Modal, StyleSheet, View } from 'react-native';\n\nimport ColorPicker, { Panel1, Swatches, Preview, OpacitySlider, HueSlider } from 'reanimated-color-picker';\n\nexport default function App() {\n  const [showModal, setShowModal] = useState(false);\n\n  // Note: use `onCompleteJS` and `onChangeJS` for non-worklet functions\n  const onSelectColor = ({ hex }) => {\n    'worklet';\n    // do something with the selected color.\n    console.log(hex);\n  };\n\n  return (\n    <View style={styles.container}>\n      <Button title='Color Picker' onPress={() => setShowModal(true)} />\n\n      <Modal visible={showModal} animationType='slide'>\n        <ColorPicker style={{ width: '70%' }} value='red' onComplete={onSelectColor}>\n          <Preview />\n          <Panel1 />\n          <HueSlider />\n          <OpacitySlider />\n          <Swatches />\n        </ColorPicker>\n\n        <Button title='Ok' onPress={() => setShowModal(false)} />\n      </Modal>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n"})})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>l});var o=t(6540);const r={},s=o.createContext(r);function i(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/c098eb0d.7d5059b8.js b/docs/build/assets/js/c098eb0d.7d5059b8.js
new file mode 100644
index 0000000..28b7e34
--- /dev/null
+++ b/docs/build/assets/js/c098eb0d.7d5059b8.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [412],
+  {
+    2649: e => {
+      e.exports = JSON.parse(
+        '{"title":"Panels","description":"API documentation for Panel components","slug":"/category/panels","permalink":"/reanimated-color-picker/docs/category/panels","navigation":{"previous":{"title":"ColorPicker Wrapper","permalink":"/reanimated-color-picker/docs/API/ColorPicker"},"next":{"title":"Panel1","permalink":"/reanimated-color-picker/docs/API/Panels/Panel1"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/c23bd39a.0cdec3d1.js b/docs/build/assets/js/c23bd39a.0cdec3d1.js
deleted file mode 100644
index a0d9942..0000000
--- a/docs/build/assets/js/c23bd39a.0cdec3d1.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[622],{358:(e,n,l)=>{l.d(n,{A:()=>i});const i=l.p+"assets/images/panel4-fdad34ed193f56d62d7c09ca309bedf6.png"},5529:(e,n,l)=>{l.d(n,{Ay:()=>r,RM:()=>s});var i=l(4848),t=l(8453);const s=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function d(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"renderthumb",children:(0,i.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Function which receives ",(0,i.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,i.jsxs)(n.li,{children:["Overrides ",(0,i.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"thumbprops",children:(0,i.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,i.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"positionStyle"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"StyleProp"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"width"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"height"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"adaptiveColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"currentColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"initialColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,i.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function r(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},5606:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>u,frontMatter:()=>r,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"API/Panels/Panel4","title":"<Panel4 />","description":"A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.","source":"@site/docs/API/Panels/Panel4.mdx","sourceDirName":"API/Panels","slug":"/API/Panels/Panel4","permalink":"/reanimated-color-picker/docs/API/Panels/Panel4","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3,"sidebar_label":"Panel4","description":"A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."},"sidebar":"tutorialSidebar","previous":{"title":"Panel3","permalink":"/reanimated-color-picker/docs/API/Panels/Panel3"},"next":{"title":"Panel5","permalink":"/reanimated-color-picker/docs/API/Panels/Panel5"}}');var t=l(4848),s=l(8453),d=l(5529);const r={sidebar_position:3,sidebar_label:"Panel4",description:"A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."},c="<Panel4 />",h={},o=[{value:"Props",id:"props",level:2},{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>reverseHue</code>",id:"reversehue",level:3},{value:"<code>reverseHorizontalChannels</code>",id:"reversehorizontalchannels",level:3},{value:"<code>style</code>",id:"style",level:3}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"panel4-",children:(0,t.jsx)(n.code,{children:"<Panel4 />"})})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"panel4",src:l(358).A+"",width:"200",height:"200"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"To adjust the color's saturation and brightness, move the handle horizontally.."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Move the handle vertically to change the color's hue."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{type:"danger",children:(0,t.jsx)(n.p,{children:"This panel cannot show all colors because it has a limited range of colors it can display. For example, if the input color has 50% saturation and 50% brightness, the panel thumb (handle) location won\u2019t be accurate because it cannot show that color. This means that the color you select may not be exactly what you see in the panel."})}),"\n",(0,t.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(n.h3,{id:"boundedthumb",children:(0,t.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel."}),"\n",(0,t.jsxs)(n.li,{children:["When set to ",(0,t.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the panel."]}),"\n",(0,t.jsxs)(n.li,{children:["When set to ",(0,t.jsx)(n.code,{children:"false"}),", part of it will be outside of the panel bounds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbsize",children:(0,t.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Panel's handle (thumb) size (height*width)."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbcolor",children:(0,t.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Change thumb's color."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"default"}),": interactive*"]}),"\n"]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsx)(n.mdxAdmonitionTitle,{children:(0,t.jsx)(n.strong,{children:"*interactive"})}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The thumb color will be changed depending on the contrast ratio if no color value is passed."}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"thumbshape",children:(0,t.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Change thumb's shape and appearance."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"values"}),": ",(0,t.jsx)("shapes",{})]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 'ring'"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbstyle",children:(0,t.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,t.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,t.jsx)(d.Ay,{}),"\n",(0,t.jsx)(n.h3,{id:"gestures",children:(0,t.jsx)(n.code,{children:"gestures"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,t.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"reversehue",children:(0,t.jsx)(n.code,{children:"reverseHue"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Reverse (flip) hue direction."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"reversehorizontalchannels",children:(0,t.jsx)(n.code,{children:"reverseHorizontalChannels"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Reverse (flip) the direction of the horizontal channel's brightness and saturation.."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"style",children:(0,t.jsx)(n.code,{children:"style"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Panel's container style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{title:"note",type:"info",children:(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function u(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>d,x:()=>r});var i=l(6540);const t={},s=i.createContext(t);function d(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:d(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/c23bd39a.bf7f31af.js b/docs/build/assets/js/c23bd39a.bf7f31af.js
new file mode 100644
index 0000000..41a9b79
--- /dev/null
+++ b/docs/build/assets/js/c23bd39a.bf7f31af.js
@@ -0,0 +1,572 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [875],
+  {
+    8311: (e, n, l) => {
+      l.r(n),
+        l.d(n, {
+          assets: () => h,
+          contentTitle: () => r,
+          default: () => u,
+          frontMatter: () => d,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var i = l(5893),
+        t = l(1151),
+        s = l(435);
+      const d = {
+          sidebar_position: 3,
+          sidebar_label: 'Panel4',
+          description: 'A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.',
+        },
+        r = '<Panel4 />',
+        c = {
+          id: 'API/Panels/Panel4',
+          title: '<Panel4 />',
+          description: 'A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.',
+          source: '@site/docs/API/Panels/Panel4.mdx',
+          sourceDirName: 'API/Panels',
+          slug: '/API/Panels/Panel4',
+          permalink: '/reanimated-color-picker/docs/API/Panels/Panel4',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 3,
+          frontMatter: {
+            sidebar_position: 3,
+            sidebar_label: 'Panel4',
+            description: 'A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'Panel3', permalink: '/reanimated-color-picker/docs/API/Panels/Panel3' },
+          next: { title: 'Panel5', permalink: '/reanimated-color-picker/docs/API/Panels/Panel5' },
+        },
+        h = {},
+        o = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>boundedThumb</code>', id: 'boundedthumb', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>thumbScaleAnimationValue</code>', id: 'thumbscaleanimationvalue', level: 3 },
+          { value: '<code>thumbScaleAnimationDuration</code>', id: 'thumbscaleanimationduration', level: 3 },
+          { value: '<code>gestures</code>', id: 'gestures', level: 3 },
+          { value: '<code>reverseHue</code>', id: 'reversehue', level: 3 },
+          { value: '<code>reverseHorizontalChannels</code>', id: 'reversehorizontalchannels', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+          admonition: 'admonition',
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+          p: 'p',
+          strong: 'strong',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h1, { id: 'panel4-', children: (0, i.jsx)(n.code, { children: '<Panel4 />' }) }),
+            '\n',
+            (0, i.jsx)(n.p, { children: (0, i.jsx)(n.img, { alt: 'panel4', src: l(1923).Z + '', width: '200', height: '200' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, i.jsx)(n.p, {
+                      children: 'A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.',
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, i.jsx)(n.p, {
+                      children: "To adjust the color's saturation and brightness, move the handle horizontally..",
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: ['\n', (0, i.jsx)(n.p, { children: "Move the handle vertically to change the color's hue." }), '\n'],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.admonition, {
+              type: 'danger',
+              children: (0, i.jsx)(n.p, {
+                children:
+                  'This panel cannot show all colors because it has a limited range of colors it can display. For example, if the input color has 50% saturation and 50% brightness, the panel thumb (handle) location won\u2019t be accurate because it cannot show that color. This means that the color you select may not be exactly what you see in the panel.',
+              }),
+            }),
+            '\n',
+            (0, i.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'boundedthumb', children: (0, i.jsx)(n.code, { children: 'boundedThumb' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, {
+                  children:
+                    'Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.',
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'When set to ',
+                    (0, i.jsx)(n.code, { children: 'true' }),
+                    ', the thumb will not be allowed to move beyond the edges of the panel.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'When set to ',
+                    (0, i.jsx)(n.code, { children: 'false' }),
+                    ', part of it will be outside of the panel bounds.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'thumbsize', children: (0, i.jsx)(n.code, { children: 'thumbSize' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: "Panel's handle (thumb) size (height*width)." }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 35' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'thumbcolor', children: (0, i.jsx)(n.code, { children: 'thumbColor' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: "Change thumb's color." }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.code, { children: 'default' }), ': interactive*'] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsxs)(n.admonition, {
+              type: 'info',
+              children: [
+                (0, i.jsx)(n.mdxAdmonitionTitle, { children: (0, i.jsx)(n.strong, { children: '*interactive' }) }),
+                (0, i.jsxs)(n.ul, {
+                  children: [
+                    '\n',
+                    (0, i.jsx)(n.li, {
+                      children: 'The thumb color will be changed depending on the contrast ratio if no color value is passed.',
+                    }),
+                    '\n',
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'thumbshape', children: (0, i.jsx)(n.code, { children: 'thumbShape' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: "Change thumb's shape and appearance." }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.code, { children: 'values' }), ': ', (0, i.jsx)('shapes', {})] }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: "default: 'ring'" }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'thumbstyle', children: (0, i.jsx)(n.code, { children: 'thumbStyle' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, i.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, {
+              id: 'thumbscaleanimationvalue',
+              children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 1.2' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, {
+              id: 'thumbscaleanimationduration',
+              children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 100' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, i.jsx)(s.ZP, {}),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'gestures', children: (0, i.jsx)(n.code, { children: 'gestures' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'An array of gestures or composed gestures from ',
+                    (0, i.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                    '.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: []' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'reversehue', children: (0, i.jsx)(n.code, { children: 'reverseHue' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: 'Reverse (flip) hue direction.' }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, {
+              id: 'reversehorizontalchannels',
+              children: (0, i.jsx)(n.code, { children: 'reverseHorizontalChannels' }),
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, {
+                  children: "Reverse (flip) the direction of the horizontal channel's brightness and saturation..",
+                }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h3, { id: 'style', children: (0, i.jsx)(n.code, { children: 'style' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsx)(n.li, { children: "Panel's container style." }),
+                '\n',
+                (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.admonition, {
+              title: 'note',
+              type: 'info',
+              children: (0, i.jsxs)(n.ul, {
+                children: ['\n', (0, i.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+              }),
+            }),
+          ],
+        });
+      }
+      function u(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, l) => {
+      l.d(n, { ZP: () => d });
+      var i = l(5893),
+        t = l(1151);
+      function s(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h3, { id: 'renderthumb', children: (0, i.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, i.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: ['Overrides ', (0, i.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h4, { id: 'thumbprops', children: (0, i.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, i.jsxs)(n.table, {
+              children: [
+                (0, i.jsx)(n.thead, {
+                  children: (0, i.jsxs)(n.tr, {
+                    children: [
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, i.jsxs)(n.tbody, {
+                  children: [
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, i.jsx)(n.code, { children: 'width' }) }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, i.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, i.jsx)(n.pre, {
+              children: (0, i.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(s, { ...e }) }) : s(e);
+      }
+    },
+    1923: (e, n, l) => {
+      l.d(n, { Z: () => i });
+      const i = l.p + 'assets/images/panel4-fdad34ed193f56d62d7c09ca309bedf6.png';
+    },
+    1151: (e, n, l) => {
+      l.d(n, { Z: () => r, a: () => d });
+      var i = l(7294);
+      const t = {},
+        s = i.createContext(t);
+      function d(e) {
+        const n = i.useContext(s);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function r(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(t)
+              : e.components || t
+            : d(e.components)),
+          i.createElement(s.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/c4f5d8e4.255fcf4f.js b/docs/build/assets/js/c4f5d8e4.255fcf4f.js
new file mode 100644
index 0000000..29f71d3
--- /dev/null
+++ b/docs/build/assets/js/c4f5d8e4.255fcf4f.js
@@ -0,0 +1,41 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [195],
+  {
+    9294: (e, t, n) => {
+      n.r(t), n.d(t, { default: () => l });
+      n(7294);
+      var s = n(3692),
+        c = n(2263),
+        r = n(6040);
+      const a = { heroBanner: 'heroBanner_qdFl', spin: 'spin_vmyB', button: 'button_JGCe', dance6123: 'dance6123_c_Nb' };
+      var o = n(5893);
+      function l() {
+        const { siteConfig: e } = (0, c.Z)();
+        return (0, o.jsx)(r.Z, {
+          title: e.title,
+          description: 'A Pure JavaScript Color Picker for React Native',
+          children: (0, o.jsx)('header', {
+            className: a.heroBanner,
+            children: (0, o.jsxs)('div', {
+              className: 'container',
+              children: [
+                (0, o.jsx)('h1', {
+                  className: 'hero__title',
+                  style: { color: 'black', textShadow: '0px 0px 5px rgb(250,250,250,1)' },
+                  children: e.title,
+                }),
+                (0, o.jsx)('p', {
+                  className: 'hero__subtitle',
+                  style: { color: 'black', textShadow: '0px 0px 5px rgb(250,250,250,1)' },
+                  children: e.tagline,
+                }),
+                (0, o.jsx)(s.Z, { className: a.button, to: '/docs/intro', children: 'Documentation' }),
+              ],
+            }),
+          }),
+        });
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/c4f5d8e4.3582c315.js b/docs/build/assets/js/c4f5d8e4.3582c315.js
deleted file mode 100644
index 00f2096..0000000
--- a/docs/build/assets/js/c4f5d8e4.3582c315.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[634],{1459:(e,t,n)=>{n.r(t),n.d(t,{default:()=>l});n(6540);var s=n(8774),c=n(4586),r=n(1656);const a={heroBanner:"heroBanner_qdFl",spin:"spin_vmyB",button:"button_JGCe",dance6123:"dance6123_c_Nb"};var o=n(4848);function l(){const{siteConfig:e}=(0,c.A)();return(0,o.jsx)(r.A,{title:e.title,description:"A Pure JavaScript Color Picker for React Native",children:(0,o.jsx)("header",{className:a.heroBanner,children:(0,o.jsxs)("div",{className:"container",children:[(0,o.jsx)("h1",{className:"hero__title",style:{color:"black",textShadow:"0px 0px 5px rgb(250,250,250,1)"},children:e.title}),(0,o.jsx)("p",{className:"hero__subtitle",style:{color:"black",textShadow:"0px 0px 5px rgb(250,250,250,1)"},children:e.tagline}),(0,o.jsx)(s.A,{className:a.button,to:"/docs/intro",children:"Documentation"})]})})})}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/c7c5d45f.85ccb7c9.js b/docs/build/assets/js/c7c5d45f.85ccb7c9.js
new file mode 100644
index 0000000..6d51642
--- /dev/null
+++ b/docs/build/assets/js/c7c5d45f.85ccb7c9.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [176],
+  {
+    4410: e => {
+      e.exports = JSON.parse(
+        '{"title":"Sliders","description":"API documentation for Slider components","slug":"/category/sliders","permalink":"/reanimated-color-picker/docs/category/sliders","navigation":{"previous":{"title":"Panel5","permalink":"/reanimated-color-picker/docs/API/Panels/Panel5"},"next":{"title":"Hue","permalink":"/reanimated-color-picker/docs/category/hue"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/c9dca19d.c9998678.js b/docs/build/assets/js/c9dca19d.c9998678.js
deleted file mode 100644
index ba3b940..0000000
--- a/docs/build/assets/js/c9dca19d.c9998678.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[557],{2684:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction","href":"/reanimated-color-picker/docs/intro","docId":"intro","unlisted":false},{"type":"link","label":"Installation","href":"/reanimated-color-picker/docs/Installation","docId":"Installation","unlisted":false},{"type":"link","label":"Usage","href":"/reanimated-color-picker/docs/Usage","docId":"Usage","unlisted":false},{"type":"category","label":"API","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ColorPicker Wrapper","href":"/reanimated-color-picker/docs/API/ColorPicker","docId":"API/ColorPicker","unlisted":false},{"type":"category","label":"Panels","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Panel1","href":"/reanimated-color-picker/docs/API/Panels/Panel1","docId":"API/Panels/Panel1","unlisted":false},{"type":"link","label":"Panel2","href":"/reanimated-color-picker/docs/API/Panels/Panel2","docId":"API/Panels/Panel2","unlisted":false},{"type":"link","label":"Panel3","href":"/reanimated-color-picker/docs/API/Panels/Panel3","docId":"API/Panels/Panel3","unlisted":false},{"type":"link","label":"Panel4","href":"/reanimated-color-picker/docs/API/Panels/Panel4","docId":"API/Panels/Panel4","unlisted":false},{"type":"link","label":"Panel5","href":"/reanimated-color-picker/docs/API/Panels/Panel5","docId":"API/Panels/Panel5","unlisted":false}],"href":"/reanimated-color-picker/docs/category/panels"},{"type":"category","label":"Sliders","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Hue","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"HueSlider","href":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider","docId":"API/Sliders/Hue/HueSlider","unlisted":false},{"type":"link","label":"HueCircular","href":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular","docId":"API/Sliders/Hue/HueCircular","unlisted":false}],"href":"/reanimated-color-picker/docs/category/hue"},{"type":"category","label":"HSB","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"BrightnessSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider","docId":"API/Sliders/HSB/BrightnessSlider","unlisted":false},{"type":"link","label":"SaturationSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider","docId":"API/Sliders/HSB/SaturationSlider","unlisted":false}],"href":"/reanimated-color-picker/docs/category/hsb"},{"type":"category","label":"HSL","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"HSLSaturationSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider","docId":"API/Sliders/HSL/HSLSaturationSlider","unlisted":false},{"type":"link","label":"LuminanceSlider","href":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider","docId":"API/Sliders/HSL/LuminanceSlider","unlisted":false},{"type":"link","label":"LuminanceCircular","href":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular","docId":"API/Sliders/HSL/LuminanceCircular","unlisted":false}],"href":"/reanimated-color-picker/docs/category/hsl"},{"type":"category","label":"RGB","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"RedSlider","href":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider","docId":"API/Sliders/RGB/RedSlider","unlisted":false},{"type":"link","label":"GreenSlider","href":"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider","docId":"API/Sliders/RGB/GreenSlider","unlisted":false},{"type":"link","label":"BlueSlider","href":"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider","docId":"API/Sliders/RGB/BlueSlider","unlisted":false}],"href":"/reanimated-color-picker/docs/category/rgb"},{"type":"link","label":"OpacitySlider","href":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider","docId":"API/Sliders/OpacitySlider","unlisted":false}],"href":"/reanimated-color-picker/docs/category/sliders"},{"type":"category","label":"Preview","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Preview","href":"/reanimated-color-picker/docs/API/Preview/","docId":"API/Preview/Preview","unlisted":false},{"type":"link","label":"PreviewText","href":"/reanimated-color-picker/docs/API/Preview/PreviewText","docId":"API/Preview/PreviewText","unlisted":false},{"type":"link","label":"InputWidget","href":"/reanimated-color-picker/docs/API/Preview/InputWidget","docId":"API/Preview/InputWidget","unlisted":false},{"type":"link","label":"Swatches","href":"/reanimated-color-picker/docs/API/Preview/Swatches","docId":"API/Preview/Swatches","unlisted":false},{"type":"link","label":"ExtraThumb","href":"/reanimated-color-picker/docs/API/Preview/ExtraThumb","docId":"API/Preview/ExtraThumb","unlisted":false}],"href":"/reanimated-color-picker/docs/category/preview"}],"href":"/reanimated-color-picker/docs/category/api"},{"type":"link","label":"ColorKit","href":"/reanimated-color-picker/docs/ColorKit","docId":"ColorKit","unlisted":false},{"type":"link","label":"Examples","href":"/reanimated-color-picker/docs/Examples","docId":"Examples","unlisted":false}]},"docs":{"API/ColorPicker":{"id":"API/ColorPicker","title":"ColorPicker Wrapper","description":"Responsible for managing the built-in components","sidebar":"tutorialSidebar"},"API/Panels/Panel1":{"id":"API/Panels/Panel1","title":"<Panel1 />","description":"A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.","sidebar":"tutorialSidebar"},"API/Panels/Panel2":{"id":"API/Panels/Panel2","title":"<Panel2 />","description":"A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.","sidebar":"tutorialSidebar"},"API/Panels/Panel3":{"id":"API/Panels/Panel3","title":"<Panel3 />","description":"The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.","sidebar":"tutorialSidebar"},"API/Panels/Panel4":{"id":"API/Panels/Panel4","title":"<Panel4 />","description":"A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.","sidebar":"tutorialSidebar"},"API/Panels/Panel5":{"id":"API/Panels/Panel5","title":"<Panel5 />","description":"This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.","sidebar":"tutorialSidebar"},"API/Preview/ExtraThumb":{"id":"API/Preview/ExtraThumb","title":"<ExtraThumb />","description":"Adds an extra thumb to the Panel3 component.","sidebar":"tutorialSidebar"},"API/Preview/InputWidget":{"id":"API/Preview/InputWidget","title":"<InputWidget />","description":"The input widget component allows you to input color values in various formats.","sidebar":"tutorialSidebar"},"API/Preview/Preview":{"id":"API/Preview/Preview","title":"<Preview />","description":"The preview of the selected and the initial color.","sidebar":"tutorialSidebar"},"API/Preview/PreviewText":{"id":"API/Preview/PreviewText","title":"<PreviewText />","description":"A React Native <Text> component that displays the preview color text.","sidebar":"tutorialSidebar"},"API/Preview/Swatches":{"id":"API/Preview/Swatches","title":"<Swatches />","description":"A list of color swatches is utilized for efficient color selection.","sidebar":"tutorialSidebar"},"API/Sliders/HSB/BrightnessSlider":{"id":"API/Sliders/HSB/BrightnessSlider","title":"<BrightnessSlider />","description":"A slider for adjusting the color brightness channel in the HSV color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSB/SaturationSlider":{"id":"API/Sliders/HSB/SaturationSlider","title":"<SaturationSlider />","description":"A slider for adjusting the color saturation channel in the HSV color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSL/HSLSaturationSlider":{"id":"API/Sliders/HSL/HSLSaturationSlider","title":"<HSLSaturationSlider />","description":"A slider for adjusting the color saturation channel in the HSL color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSL/LuminanceCircular":{"id":"API/Sliders/HSL/LuminanceCircular","title":"<LuminanceCircular />","description":"A circular slider for adjusting the color luminance channel in the HSL color space.","sidebar":"tutorialSidebar"},"API/Sliders/HSL/LuminanceSlider":{"id":"API/Sliders/HSL/LuminanceSlider","title":"<LuminanceSlider />","description":"A slider for adjusting the color luminance channel in the HSL color space.","sidebar":"tutorialSidebar"},"API/Sliders/Hue/HueCircular":{"id":"API/Sliders/Hue/HueCircular","title":"<HueCircular />","description":"A slider to change the color\'s hue.","sidebar":"tutorialSidebar"},"API/Sliders/Hue/HueSlider":{"id":"API/Sliders/Hue/HueSlider","title":"<HueSlider />","description":"A slider to change the color\'s hue.","sidebar":"tutorialSidebar"},"API/Sliders/OpacitySlider":{"id":"API/Sliders/OpacitySlider","title":"<OpacitySlider />","description":"A slider to change the color\'s opacity.","sidebar":"tutorialSidebar"},"API/Sliders/RGB/BlueSlider":{"id":"API/Sliders/RGB/BlueSlider","title":"<BlueSlider />","description":"A slider to change the color\'s blue channel.","sidebar":"tutorialSidebar"},"API/Sliders/RGB/GreenSlider":{"id":"API/Sliders/RGB/GreenSlider","title":"<GreenSlider />","description":"A slider to change the color\'s green channel.","sidebar":"tutorialSidebar"},"API/Sliders/RGB/RedSlider":{"id":"API/Sliders/RGB/RedSlider","title":"<RedSlider />","description":"A slider to change the color\'s red channel.","sidebar":"tutorialSidebar"},"ColorKit":{"id":"ColorKit","title":"ColorKit","description":"colorKit is a collection of color tools that are utilized internally within the ColorPicker.","sidebar":"tutorialSidebar"},"Examples":{"id":"Examples","title":"Examples","description":"- ### Bare workflow - typescript","sidebar":"tutorialSidebar"},"Installation":{"id":"Installation","title":"Installation","description":"Prerequisites","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Reanimated Color Picker","description":"- A Pure JavaScript Color Picker for React Native.","sidebar":"tutorialSidebar"},"Usage":{"id":"Usage","title":"Usage","description":"- You can add, remove, rearrange, or style the built-in components of the color picker.","sidebar":"tutorialSidebar"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/d779562e.c9406fac.js b/docs/build/assets/js/d779562e.c9406fac.js
new file mode 100644
index 0000000..471e66b
--- /dev/null
+++ b/docs/build/assets/js/d779562e.c9406fac.js
@@ -0,0 +1,11 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [657],
+  {
+    472: e => {
+      e.exports = JSON.parse(
+        '{"title":"HSB","description":"API documentation for HSB Slider components","slug":"/category/hsb","permalink":"/reanimated-color-picker/docs/category/hsb","navigation":{"previous":{"title":"HueCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"},"next":{"title":"BrightnessSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"}}}',
+      );
+    },
+  },
+]);
diff --git a/docs/build/assets/js/da90494d.e34f8aa9.js b/docs/build/assets/js/da90494d.e34f8aa9.js
deleted file mode 100644
index 17ff05d..0000000
--- a/docs/build/assets/js/da90494d.e34f8aa9.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[536],{8488:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"API","description":"API documentation","slug":"/category/api","permalink":"/reanimated-color-picker/docs/category/api","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"Usage","permalink":"/reanimated-color-picker/docs/Usage"},"next":{"title":"ColorPicker Wrapper","permalink":"/reanimated-color-picker/docs/API/ColorPicker"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/dabf05c1.5edf4374.js b/docs/build/assets/js/dabf05c1.5edf4374.js
deleted file mode 100644
index bffb07d..0000000
--- a/docs/build/assets/js/dabf05c1.5edf4374.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[315],{1873:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"HSL","description":"API documentation for HSL Slider components","slug":"/category/hsl","permalink":"/reanimated-color-picker/docs/category/hsl","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"SaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"},"next":{"title":"HSLSaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/e0d6e6dc.14c0f3a7.js b/docs/build/assets/js/e0d6e6dc.14c0f3a7.js
deleted file mode 100644
index 13739f2..0000000
--- a/docs/build/assets/js/e0d6e6dc.14c0f3a7.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[328],{1444:(e,n,i)=>{i.d(n,{A:()=>l});const l="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAoCAYAAAAR+iSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABRbSURBVHgB7V3br17HVf/N50scu3bthFIuoTqhSBQeWhuQaApSXERb8QBJoS9QAQ4SQsBDw1+QBMQrtIgHxEuhz5SkXCRAiDiiqqre4l7Vq3LSi9ombew6TmyfY3+rM3vv2d+aNb81e3++ya2+Je2z955Zs2bNmnWb2fs7O2ADG9iACyJyMp7eEI90Ph6Po8OR4Fw8tofjTDyeCiGcxg8QBGxgAxsoIBp9MvCH4/GueJyNx7fi8cxwvjQcCQ5g5RDujcdWPC7H43Q8HovOYBu3OWwcwAY2MMBg+I/G40/i8SH0Uf0c1oNE483oHcITuM0dwSwHsHtRTi4ED4QlTsoSWyJxkBIr1CEyIC+HMgzlS4Wny4ZrDNcipu1yKJOyvRj6Y/+Gppg+uzKs+tN9SatM8ViMB2bsDV7ctkslNybPpTPuJWqZqzPrp7sUwhPjk/Xt8SjT5WL4a7UXAZ8jcfj0yib4tDI69g7grlMxtH8xHp+JRTukb5T8j9e5b3W/OBzTg9cB++8Bnv/76EX+lfDjyWNiPF3Vko7xXDzOhHgsAz5w4sL0cqTpAK5clFML4JFk9F3BkjA1lFdldjKZ4L3JdAY54trBA6XglqgdEhOm5cuOEeCKrHgVc9/dmnG4itwYp7QUpGUw4LiVEVreweVAyz2erKNhc+7JsmEYzfE0cCblNhyv+nPg8NuAC/8bdf4FlDLR49H9BdRzBoOH3hEc/e3oAB4Hvv3XDk/pdLUeD7TsW2MEah3qj+3oDB59w6Xwz3CAOgC5KFuywOORwHE38jSYrJTY4q4zSTMMc1JBdGRUtPI1i6QuP6jH1BzPtRiMrmdya0UIxwlVmdhydenKcSLzKWRy1efpWg2zGgvWbD9RtjgE/MRfxfNB4KUPo4/6ViZAqXOmbiVEuJlCuAM48utxCJH+9jujqM6jLQ+gtjWvLN1H2YcA6gQG3O1o6W8+caleilQO4MpOF/X/NnZ2dByUl8YzRRCf0SIN99raAbD0VvcDRcMzmNy3lLSK8gkhuwZIImvFJ+uHTbzHJ3NIbIxWZopX1wgBT2nmtW/1LROym6DVauviZ9lP0E04r/nH/vrC/6/ajvTVeecb8diOthG3AK++iNFRhP3A3ruAPfHY/5p4/WMlH5bW4bf2xv/sO3HdzmuUBVbXLItQ7dNexkMndsITqmXpAOSKPBgF83ihHMsJAQ84c5W22dYqiFXkTEPgG9zS9KPaMyc19jVF004G41HRcOmZsY+44t8X/Vg5eEbDIiYbMzBf6Tw+18GdajvlQBq467T9kT8DDv4i8OL/lTLR50ufB17+eGT5AmbB4hXAnfFB4R2v9WkefkvMNj4SHyf8Zc0ryzDnOAXPQdL2wKkTu6slwSJfxB3QrVj/3tX90CCoY4CQr4PCgboWlKDqg6Fl6/XaakQTg2faVimapQk1Bj2ujCIOzVC2LcataQvqMdv2IGNnPMqMnVk9jjlgZaBuKd5UcWjgkrkQqWXnjlHLRAzNiTZhzpZ2pHXkbX00vvBBjpKi/Ll/ifVPzTf+BAn3pQ/2ba867RLNtCdw10Oo+M/8TYI392b8VG6Cdz99QLby7egAovd4EjK+4LASJlNsOGVM4XN9IEwN5UEPiBjOeM0M3SqXVc5Q90fLTB8h1P0UwJyj16+ulgkeHQcRCM/eHAlMH8SoCn50WyLjyhGLKm/NBVZ8ik5ZQfTAgpLrpGHPdYQR9sU0/a4/AM7/V2y2W9df/kI04PfHdP+7uGZYvhTp/0dcNnwVFZ9yOdb9O/Cj74pLh8Or8hGYDluYcuS5nFccxU7M8gfoHEBM/U8hvcQQGtSMR7d4gSg1ixxMaTyjZErCHIiQLKRQ2pxReIZqlV6UEdm+TdYTNB07BgamfQUth2sMmhqRKBlPOKag+bE8qbYsQ/LkzkCY07P0oBxSS/m9ADEHpDf+nW9GI30RZV/xvPNMXBI82Rvp9ULaJ7hwOjqUr6jCgd8rz8flxefi04eHy/LMB5XlUE5F48kdTnnA8af3yB+m6z4DWOCRooUXeW2dLXMizVgG+AkEiVZeNBnLmJC0cZgILQ5fwY7XOhCnj8I4mOx0GzHOQlAbl514S9NT+IXpzjNM69A0PwNPzJF77QNxGFTGhH/WNpj5otByJAS0fFP0P/imaOhfRqUbKe1/8TRuOLz8MbMcGPq7+InojH4vZgFHUDihppMMRDRMHjpDs1WrYPZoOi+6d52le7lnHhNaSWxWYNta5RM+yXRQIMblGBlLdULLcTkKXfCtcbPwlaG4NIVnPlVfmqbGm+tsAbrEovjCDdOTe8GHiZJVPcp6tsczFnnzmZVyacrB+5gEBzdF/7STP67rVf33/u3GRP6KlSETsLwtY18vP032AhaYdoIw9AK4o0d9H1Y6t/VRyMnU3QMFYiOqVqmwwqkM2yr80MbbJGJGEvTAgmmmFFM0n4Oyu2mnF+GMIJnzkansYaAXMl1gsn+2UVOM0cgZxJCLRgH1UsfSsAZOyLhZ1wSup7h0TOZM+3GcDpsLRl/Pz52vj5H3k6jg0heGJcFNgqtny6VA5v3SZ4G7/2goGyvNeSa4e3akLPe/d4EHkgM4ThVkpFwSoHwFJwMgjIQZylLQREm3iCSZJlBNeiBKRHfxtbMwdCpjCQ6PZuxiHYzioYLQKAqEpsIvojrrh/DrGV8hXxBaUtOm0yf1dfVESabbUFD8M8crgKtTyfixr4/+touXP4qbDhc/tbrOvKd3AtJx8I0G2dM30541adqUbSM42TsAoEyZ7YToFMLiAn6ksWUssl4LhPJwd5SN0slUBNV11imYcWSc5hMIz0A9p2CzDzh4tm+gPQfA9E76nHqjI242J057xaO0+mndT7DoQXIAKf23eLvfuLnRP0N6MnDl26v7PB9XngMO/PwMZ5qLBP7SWCabF31H2FpA1Bt/Xe3qYJtjo4IaIyx7QDvy6cgaSN1wDkZpKppi8ITwwYwQ4CkzSN9S96fHUKRuYugxno0jqDIaglOVa5I2Y2mBkZFUF5xX6jjtOFHW6TPLvGbbtcwsQ3v46eWc3W/VSGnn/1bBztdW19nedr8OHHojx6d+VAsub/56mQIcuivCRxdZcYoNLjvZngG0JN4y3HztZRJDu47RRclXofT1gFbRXvfBeNK4rXEouVSbblmRPUdo+i0Mzjo3dQ4Ep/mkosU7wOeC4UHJ12YPZIxMbmFh+mzxNQWCSX4rfOHt02u6KQoXdRGufAe3DHafq8tyBpDABqLg3qC2RQKtKciwGJVTRbDcYZEVMIVgjLDIbg3AlLPNPotDnYjNVAJq47J0A6GhaBVRz1M+JqPcl5CI6UVI+DKp+FT0KT5QR+xcHzh+YDQJz+4THgbemBmNKfAyEDFkbKYx4HTzMzxZ2PfqYfc/lEHkel74WRfYW4XpaUD3KBDg71tkYHVWt8VvXoDCW7gGNzXZzIgMVB7NGlsmxYyt5XwMb9UmnhPxisja8qgB9Z6IY+zuMoUYfbD9OWXi8G8VQkhZV6SylsqIWLTXMgqoDJU+nw+gSwDm0Nx3MmiDGrpN3QXqucygf19geMo8pl/+jT/i0ezdhEd/HhS/NlT9ZwfQF5Brz5LtXOl5b4Git6AVod1QvKhijEa8qGEYDg7TbGOyeskFaD8Csd1bvsUouO2HOSdFp3rcKOBPG8CNozhPyN3ihxZPFiH4ZGl0sQ6a4WVYOjx5ssvdWJn7qPzJirlnezk+QdyewGxQGnjXCQvXQBvKw6JeM41noPptpj6s3Cg4W6pUkcwToqZpox7D97Ihj2dx7i3vtt7ww7ICAXz6M3gUW+609R6frhCAZuRxspTxxZ9g0NY1Tm+eVb9p/Z9+vmvln36rf6ug61+D9P13/x8AdV0TBJO66E4HywCqN7jEuQbPAIpI2DAId8edQHMdrvoJtl+tsEwxrZFJA3/C6Jsv3Wiaqk2Bb9sE0D0W+rYj4wmgGRHLsmgG4Rm5h6f7cRxJtYEJko2hxpldPiwPWjTT+jsboGZvzytwy2DvsaF/Ja89r4xPB75OkB1ZUpw1q3XQKZcATImtocPpLDTKQkGiuqFLCptVDOXu++emH0tLzP2IrxVHKf0YHa3RWp4UnWI8wLQXt4ak22hnFsB/M0BkVgFzNMwhWp71nM0Zj5WHjkSk/YTuchB6WfOurnPf6U289I87Or1SaPt+ErcM9hxDGTTQr/93Bwcw+V4HAy/gzBRwcgDdfz1lL9N4P9ioDJMpFrvWwveUVRmZ+6IJUBls0T63VTyG/CeARyiWBTB8ccoAnj1YMO0CodHc51D9eOtiVk7L9P0c5TP3zblYKN7B8ULLAWKiXAhvRA+z3C5+un8SYJ3F/ntxy2D/T9Vl++7pfxmYwC4HmSg61SBzVWV9Av8FuRWcS08BtnsKqpgpAzNCHTFbih8MU8QILV53G2p6weNzhqcMmXYgvE8ZnL62TsqMx3uJKMzhV7ixF9da/myu7LXmyZCm+KHBN+G3IpjK1O//i8d4ylDt4z3RNCyEiSIxjsbg6wxA16UMYPxd/k2E9N+C9moHhP46OYX0/wib4wtlmf3fCh54T90UnEl++jRYfZhh1GrCZykTSLQF6hdsdP8s6hj6VUZiaXr8BPgKTMbCHFLV1gpd8VaNp+UQ5Nrx2GO70bis450yOKsHGsUqltRt6dnpKwDuEyHGt5i66v0HBelHQMnQkyHauoO/hJsO3W8RDKT1f/erwA/7Mu5gxpx57+zQ9hk1JAdwBR8YCWiF9RRQiMEG00cu03TCqknBaG4rZRkdQADd4KL6IiUvY1lL0AB3dFrBcoeevDz6QpyS1ErsGYtYnIaMClxNrjV2Oz+KT/ZuQAXWaXoOeAq0HhD+6C2LdGQ86V9z739tTeCO18XofDduGiSnc8dP1+WH7huiP3i0nwSGu4asYybxxCLsC6fTMiCQaBgch1B5WgF9ll4x1jLwYM6OQbGXcVxlmSNMO0YdrVv0VNSy5dXehXVAWlGF0IaqE6f6Gjw+zQoICr0J8OUpBNdmTp5eEFIjjRsAQRFO/+rrzvTabX4cqPo48hu4KY8E05OHI28py5IepOif1v/PvwdcZ6ZgXcdaw/YvIDzVPwVY4jGWgrAI7vJjB8AimnEaI1jjh6lTCjR3XyC00k1jgAGoFdwaKFQUZRFR8R7YmMENobm+9nhSbd1lCeG/AFHjaeEFUtWYv+Y7Hczxq3IvQ5OpslCcuK6G/l2A7/3n6t173X+K0ofehBsOiebCPGpMc5Z4OP8//a8Rc9laENYsR8XDo+ncOYCwN/xTbHimwLAGrDwmW2NWaZgX5S2uNkATHauUOSuY6Wvy55FzsgYPLzh1jpJZVBpxdZmliwZrniEw4zd0xeHVtmVLALC2TgYzztmi0XdusnBoG2bY69/0kZnHs7p/4X3R+H7GpPyDDA/8bP8fg29EJpAi/6Ff4Tv/6dFfF/3/Dn7AA9r7Ah7ILJztE1f7fw2+ehFogbfHjs9ZIxyZysTZxLeie9mx/3qvjawB/prdtGd8uBuYRHFG47JZheVHtxdOa0Sx8tC0lOyo5yfjHp2k6ttNG2154P5KDM7ojHWnTtsCR/ErU30PuN3v2pc1Lr23dczhKX4rB6vu0wtByQkc/jXUb+ZF2L8FHPud63sykJ42vPI3h+8DGB1JzuXoO/rUPz//z2Oyey1jhseCiIHg2SwqOHd52X28tAP1JmDYjm3+QvfiPR8Xz+O63KHt1RjzzDPCZAsWbJai+Ws4hMK49BiZsrXGqI3AZjQ6aoUGLab8IFmFGJ49njz6urrhsDGFkwkFtEHL0yq2dj4sENi+LOgfA6n7Dp3gpw91nv/vGKF/2fA30E/f8zv2u9FJnFzPEXTLiF/tjT/9+KigO9A+8lbg7PuHj4Wq8squcnMbMMCBvVIuXL8eug+rT4RV9OSyPCgB702fBisEaoTb1dkv11hjE4WnPH+Fw9q2vpKj75eEpv0KEOtbl5sv+FQ8gdBw5FDRa7UXPsbJrxXbMc34Qo77STWNN0fmE+Mp5G7bM971nLEx5jo2zhbNGWX3/E3/XcDu02AwfWJ13X0a7Nn+p8NXX8D4C8KUQSQHkZ7vd58Ge3XdVp+T8S/j+ZnfmtDZ5XAEtL73V8qC4Jn5SS/8Pay/CgQ4DqX7OGjAk7HxVmUEzie27GQWiqvLvTLLPFNGQe3ll0Qg1pCYsdjPZNnPgMHwIpwmUzA2Pu8bhJM01/xcmMdTNX4x4/TmQTh/6zjZuZ/s8j6z1hwPk9NUu6E+RenkBMK+3gkUPw1Wc0X3mMi1ODjJURy+PzqQ88DX/jSyd37GeG5AmSo/Ey397ezjoGwbBuHOsL04EO6NlQ9FD7FdDN6uVWwqp89Q91qYJgWvvCEUru7HQhawSrMzLlumcG9nJlgvNTRPoWKvbKuH1JKJSd9Z6lZch7I5XT7Y5UJLlhOpOluvVzDQoT/ssnisrVO/zk44eyFM1HV1KXU/aT/gq3/c/1PQow86X+pBoyx3wJZAw/3eV/X////CR4Bnf//6//+grIe+vUjfArwcTjDjV2xOdLor9y8v48HY+fGwxHFJ/0eQeNRCYZzIXEVBgEdMIR5eBjSyZGApO80ebP+aJlB7Tx3Bbd/AvNScZSQskovqRwhNL2vx+vJwNY+6vZYRwNN6KfuTuWWE18lsoRHJ5y6JZn28Vfrd/7tP9V8N2vlS+RPdavz2OveFVVmK+gfTh0J/Dngu7vaffV/d3v2KMVAvbVvjxkgrbeJvB8HpcBVPvP5SeAoTsIbP3cAGfrghfSA3nh5B/62M7Xg8ieHHcmtA+ie7J+JxXzz+IR6PxQ32dWncMtg4gA1swIByBCfjcSAez6B3CMmQz8bj0oB6YDh+PB5bwzk5gHfH4z23s+Fn2DiADWygAdEZ3I/eEaTvZ2wNR/6K9rnhSC/RnU7naPSTafftBN8Htj1/7BUCQzwAAAAASUVORK5CYII="},5529:(e,n,i)=>{i.d(n,{Ay:()=>s,RM:()=>d});var l=i(4848),t=i(8453);const d=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function r(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function s(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(r,{...e})}):r(e)}},5881:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>h,contentTitle:()=>c,default:()=>j,frontMatter:()=>s,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"API/Sliders/HSB/SaturationSlider","title":"<SaturationSlider />","description":"A slider for adjusting the color saturation channel in the HSV color space.","source":"@site/docs/API/Sliders/HSB/SaturationSlider.mdx","sourceDirName":"API/Sliders/HSB","slug":"/API/Sliders/HSB/SaturationSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4,"sidebar_label":"SaturationSlider","description":"A slider for adjusting the color saturation channel in the HSV color space."},"sidebar":"tutorialSidebar","previous":{"title":"BrightnessSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"},"next":{"title":"HSL","permalink":"/reanimated-color-picker/docs/category/hsl"}}');var t=i(4848),d=i(8453),r=i(7869);const s={sidebar_position:4,sidebar_label:"SaturationSlider",description:"A slider for adjusting the color saturation channel in the HSV color space."},c="<SaturationSlider />",h={},o=[{value:"A slider for adjusting the color saturation channel in the HSV color space.",id:"a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space",level:3},{value:"Props",id:"props",level:2},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},...r.RM];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,d.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"saturationslider-",children:(0,t.jsx)(n.code,{children:"<SaturationSlider />"})})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"saturation",src:i(1444).A+"",width:"256",height:"40"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.h3,{id:"a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space",children:"A slider for adjusting the color saturation channel in the HSV color space."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(n.h3,{id:"adaptspectrum",children:(0,t.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n","\n",(0,t.jsx)(r.Ay,{})]})}function j(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},7793:(e,n,i)=>{i.d(n,{A:()=>l});const l="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAACCCAYAAADv7uKCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAACRNSURBVHgB7X0JkB3Vee53ZrQMy0iD2SQw0lWKZaT4WQOyJJOXBzPgBAN+RnqPcuK8GKRX5TixnQjZVcQhi+SkEieuIqDYGLvsGAGuJOAyGsdB2CzWEmKwBEgEYoYtukIbisEaSUb7zMl/us/yn6WvYHQ1Glnng1Z3n63Pnf767+/83f0fICMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjY6RAIOOwkFLWaHUdLV166aClxorU9dJPSy8tq4QQ9cO2O4faOYRujMHlGE3ttYouWndgtKSFTs0oSQutx0Bv03o0W0ax9Ri2bfZHBeVUm2N0m6Olly/18WQrbat9Wh9qEThEyYeEpG4CB9U2UeYQJA6i3FbrclFpLs/lu/QDRRpYvlsfSKTxdg5ARuXLtd+fUchIgkisSHsTSiJ30vICStL+iJZ9KMlr0KGX02hZQMvtVF/lL0aC3LKbSDwKi+hsdKFV1VN2hQhGxFGrctHbMOsEjDkSgpXX+7ySNVthm6wc1ZesStkF6YpQm8J2rqwrvdJmLex2+Z/Z9vsk2JbU/3LrKoNtUzv+U/i5mdABGJE/QcsGWp6h5YHDVOvXS52WdTqthpLcS6nN22m9BJeOrmHUwKKC0tAkLI/qzpYio9DpVWfY7MuqzEZIHDdsVuoiRVHTH8loK9geEh3Tx7EkDS4w3hdbR+gLwK8nwY8tbIpIHhOZ0BxEvDm0uouWn9DyTZSWeKio62UF9u+5Gvv3z8O1v92BHyw1R6P/wxOt90PryU+8SJWF34aUsYmzbDRtMFJSP6S20IrABbGkI7MhObf0Ql98spLaEpyQiH+lV9dQWQT1qohrr3/vosiELqCt8mJabkBpjetoFp5ePQFPr5yCU9rbsOA24KLpwFcWvo2K4Y1WnzgZpAmZrgb4Ziyy9iHj3ba5HgqSD9JGi+lKaJm5/EhR1/0Gdk/AYLJbvA0Z9cpY5zKdW3EfLTjBoQd8K2i5jJY70UwyL7+vB088+ls4dKgNu0mRPPAVYOps4OukSs6uwZMaSEkN6VZC+mlcmtgzL3wLHhr4YFtom8ivACn9XD+fWchE8wKOdlWXiyvPjslKmTbilqWWOmm5YS7zyEJ3vuf93fSrFgkMdtEtpwMjDELI/kEpVorBloV9fU/WcQRgZP5PWlYetsLGjW1YvnwinnpqAnbubLPp48fvw6xZr+ODH9yGyZNLmfIgkfmVn/TQoM9hP2U9+RAwowe4lQ57M6131OHLBL1ddBCNOq8vhlC2xKc80rAiLOvq2JJS20Bh8lgbwreQMXn58WRAUlOKS4vox+lWZHQEwfal9+uEd+kV6Jw2azGtFuF4wSDm9fWtuRtDBBFaDeB+hsOR+c47p+DWW3uwefME0sJtDcu+9719mH3JXkyddHFx/2uhP3urKNfFvl4uITK3k1PkT2i9vz9wsWm3WuiaG43YbVe49aSfb912iXaM+25UmS61m0+57YzLbrBVYpD6OEDLYOG6k9p9p91mwrnPSlea8Fx3as3dbrE7L3bN+fWEXqdcgEguA3pt7UfntJnziN+34TiCFLL7zNMn3ffGG5v733Hd0vNwFi2PVhZSRP7oR/8PvvWtHuzY0YGBgcOPObZvPwPPrJ+Itc8C554NnN5RWrRChwpn7LZvBCZNLaXH+h+UZ6JYNPnVdotOaxElIc0+X1p4umDpattcTGE94bfNjiVbtNHX60HdX7NtbgqKQEoLD8Btq0Wy7caLCLallzYQlamuL9m+09Ci5UYcZ6CbTIdsHVjwDqspMs9DOQBcWVnoqquuxic/OR+vvlrDUPAzusa+fA/w0Gp9UPsPbMJTy4Er5wGz5+gkJjcKCLcarDiOJ4O5rGC3axHcjKXUHgpWRyXR8YUuHsoIp4u1zjbyqCFCLewr51hs+KpcJrwaXM+LRNkW9iO7cRxCDBZP7t42tG5WsuoupNxySieff/7/x8MPX4pm4KFV5IEmYu/dz89KiQOU9sQy4PepK6d0IPJYmEEjZDx8t4QSDchlPCMykR16CTTFhEAVUQU7pAgvIL+UPQYqWgtVu6+WfWK7azb0QpcpQv+ncCJ6OdRDkx3wn/Q5XHnlbw3ZKlfh5TrwtftZgrMy2E55m+kh5LU3pUZXXlGvvnk6aC0sryASd4Tg8NwzwsvqNp2TLAC/kGwLjlDVD1zCgWGYF3ctuIdoP4c/iDXpxuV3QhFaW2clUVYkC1x/fU/TyWzwUh349sOmJyyDtp+n7nyAHkye2hHfpaUxifDr8JMq4lu7tbSWDTLBb00O3rYQuqjkaoSSOWHjO4kjobBrXzAA8TM+0ya31ZFPhbXg23JfnJX/nWgWuhvlo+nYOqsB4He+04Ojicd+TMTeGKcr6fFfG4APMistDVkZgURo4WRi7Vvakh1Mi1vuh5Rh2lT4RYqVlIFdjunq9gTck7+QwPHFELbgWgm1d9ga70PZzolG6EVw71r4uOWWuRgOfG91wCN9irb0Ae+7jmWkbt3Vt/OoHCdy+NaRvwEEFtJLEUFVEdf24ZPWfzSeHgZyD3Js2QXb4m15V6cuM0xv27W3t2PunGuK9dq1z2DN2mei/A9ceRnOOWcitm7dVuRv2bINzYSWG+ORehL42c9ejP7+4XmI9GKdlteAaZOgO4bihGwnC/2rHwXOqAE764mKwiemSUOFlPDevrP/wHk90rIhpKNfX5Z3DsGto0hYylT7QZ91aX9IyA5ny1UNLH17XtJ7GCz0uedOxLIH7iWynlPs3/Cx34zK3L30Tsy57tpie+bMGW/fEL0zdKPqsfYjj0zFcOKfV+kNphbVagsNDmfMiQeABYI/Ch/IpaSI54UICBbpaRk3EZlmLim4Zo61LBIpfj98yyq8mr50adArj+qG0kfdQisCr1nzNP76b9LPbGbNvARTOy/A1F+ejaMMdT/fEKUqN91zz3ViOLHpdWAP6eZTx+oEfaJ/WqeHLdPZWQvIISqsrAzKy6Auf12UFzXQb9sFJSrsStku9zYIOOEgE5a/GpKRUlYKkpTGNn0J39I7IkIr63vlFZdVSgmF9vZTmy4fhgglKf4zSlXvZgw39pD7+zUi9bTJOkGfuH5Ku+hShLdbJ1xTWljAvW9RZbHDsl6KeuLq7+sDlINBMF9YLCVCi8ptrk/EWGrwkkjse/2I0vnbd679IRNaWVUlFR5Y9iB2796Nv/rLP8M99/4jLfcV+cryfupTHy/K7dr9c8yaNaNIv3He79k2VH11MZhtBdXGY4+txlFADeXL+j7Ui0bHAps0obmlPUhEP7kjYYqYlrVMYLfklESJCK8TK5SLCJ8cGkscqQRjTR2tDK3fnlww5eOLw9SUQXkJ/0UoIzLMJcRFx5AJ/bnPfQbLeh+0UkJZ6C996YuUtrwg+At9L+OPbvlz3PK5hdhMFvqee/8pakPlz5p1Cb5AF4PaVthN5D9KqCHlruNvzQ0nlORQ4G/Ov7WjHBQGpLLgZ1sCaYEQWOuqtixKwkvbj9TdIbggBLfBzj56bcK3+obEaT+yLzdadC1p/3XtxJeJe61ULUMmtLLAX77j63a/jwg8jqztuedOoO3dBanVskuvlfcihErbquVIKj+DkzmQC57pTBA1vHfLqrKSWWhnoznZKpjEDlN1sbjDmy0R1fXbEUh/fyjhxEfKrpu2mublUMRVMBIi423CntWArCIoJAK5kBro2QYbEVz4x/FaEZq/wUNq/bTS91YIVs9v1/c981rxleHfdEKp4iyv8HsZ9MdResiEVlZ3HA34DNQA0aSPUNRRDgx9qJfzjwVO1h4Oaz0Jp5wGvFGHvbVbpAhaMZzyxGZIIAl/YMkGkYWV1tY4IlZZz5cIodzhFOb0qxIW0Q/y1Lio1NhOFskgR6UPmdBKP99ww0ft/tw5Hyq8GUp6jFAo/Rzr5Zkzj43WOU+NRQNSqgFhQWjEhK0aKFpBq/c9ksq4oojVrqWe5ns8OAyrOR9FqjVnSVOCxL9YUra+3IslR7kd/ibh/Y4ha+g77vgGeTb+FI8+0mt64HkwRiDW06JuI697qVdf/TrGjt132C9Rmo1JitBmhKXX6hXSPf2+1TYozjw7tTZbJg14mabLp/S2t2Lpgu+5LckzA5HAVa4jWBWF7WEqUtKhDASA9AjAP86QCa0086f/4OZCMytfc9Wg7pY//ouG7Sjf9TA8VFFQhL4R4bsc6hvA887bhldemYLhwsX0HOdkdf1oEpjvAs+kLjyyxCeuZ/UkN45sI6WjgchqezqdFZdh3bC8tvZC91WE3YhlReoa4+2n8xP9DC5EbvO5oDIvvB7xoLDKgzEC8V1a0o+4P/vZFRhOXHwRkiftrBrwwsrYOhsrHN5tU2Q2FjQ2gdUQ8aZMlhFJ5ZrqkYhIGNeoEhVmCOpfJlxsxJLDpJ0wb9vpcFx9tNSizN/93TrOP38DhgNnkKz4lel6hw3kzqyRH5rkxpsbAy+H9Ir6YjZh52QizzvnzK4Fb+M1JGHQDbAaPMfZ0zTxOW1FlAu4YWH6Qoh/veu7xIn3PrQS/MfWSs/7MNuR1vJhysXAdxbr85O+IZdMCTV0WMA1HVnpyq9cTBVZ3Z5HU/dU0d04fDUtvPr8tX9TP2Wp+VEl4j6kLzeXc+K9D00CFVOQ8nYoK33VVU/gaOJDlwMXTkb07eAp46lXXSQ3VpVffHPIRiSt0hWClRdpq51spspmxikiIGvqZfyyXEx2lx52I/49MkHsuD33pzmhCE2yQ7nuvoryVdIY3//+Q0dNeigif0gFZ2K3fIP/cQXw4O3OZQfh5IFoQHBzGoWvIz0NHX4g6/mmGQnZQNRVie1hbGFTAzz/gXXov+DpMtm+KZ+6xHh7Rrq433QifiSrrPQ0pLS0wqOP/mPTSX1BDfid34AjKLM66mGKctctX+JI3NCihmJWVpRjxDWW2uwUzmZm39jrowVFRPgGhX/0tEV2+WGf0r+Cyxfh1aq4j9jStp+sJfP1t3sxUMh3HKzleIS20vNpUZ9cxdJDufFefvkuXH/9D9EMdL8fWPAxIu1YuMfXmmxjKO3XqCv3LQZ+uhH2JhoZceGt3ha4VubaG6E119vRR7C+HQRTwRLhk8J4MBlbcl5WsC1ZURfBJRM+O4yfVQ4GGnopjkdIsRTvEERqNTi8m5arKwt9+9srceed38Rppw3tQj+/Bnz6BuD//lq57/FJ70zvoTvCUmDF3WWaecAiwxsxHwhqQtg7PrfoCcbLRIKoGlRxMvk2OhVnzuXKoJSoKMsvGN6CsANLd9nA2l2g6n7h/1k9z0lnZ1dNtI5eNxIDNDZAve8na6ZgCNAhdFegjNGxomFh9c3hI4904rnnGn+q1da2D+9+9zb89ke2YVzrr7gwXaI6tt3CS+LpJlRMOh17zp9+QrhYdXz6idEVeYlYdrZ9XVbqYxXTUOhlsBU2tt1Ai8AAi21n49EJP96ci1MXxrYTLD+cykImpp/g8fD8eHlxPLy4D/ZJYV/f+vq0aTN76GcuQ5W+HEmQciXkwfkYIpT0IFIr2WHIXE3qW29VTxfXYdOmNjz44ASsXTsxij46e/a24jH6eeeVLzstv38fXnn+iqRMuJgGgRNrwB/2AIf1PABgUfTTBVleGE4srCLDxECT+wrjMAgtLVfErkw86PPvQGFvjA5P2XEZyZu4DxE6O2fOo7/LdDrpI85aq7lL6Nz29vWtXYUmQH8Nri7iPShj3TXv7buH7u/Gq5rUKiDiSXQNXHp1GSDx83NLr0Yqwqid1KfC6ibTBZsISLiIpFUTDXkRSMvtQT1ZkLHSh1rKAI1qHVpoF3VURvvcAqeihlZbc39CoEbW29Qry2prLuXbuw5PBBCx1ac3N6KMede8AfLTqzux7vFrcNbEDvQQiR9aCtz7ebps+ktiKaJbgkETVeh06cuJMGRuKsxuOAOWJzfMtrtgpG5XkbqUHLIgsyL2gCbygGCEFlxGyAa3/zSpDSn57FU83G7cxuEkhy9t8pQUGnQ3WkikfhZlMBqjq4+c2DMuq+M979uAsSdPwR/O7cCPeh3Z9Is+Tk4YN5t/S/bDDvBBmGzkGmA/DkF5GZX13GHqkywT1NzIj4QXpOrz1di7kZIPfA9IfY3if6PoSpotwWoWa5mnpPBApF5Kqx5aVtHyGZSuvSkYGlQ95UWZT2T+brH/eO98+uvXi1xDZsjA76xPtSUhHKGK82fIKHnHPY6X/m7WZqibeZ7ZshcEJwyDbqMIuQvz5kTofTD/8q+6RXxYhK46N9lE7GcW4C+Set1h/wr9m7PkqIDW1t0oLbaJuLSBlp2Io5eqscZJtKiXnFU95Q1RL0Ip9+AS7ft2bXfjOrLS88hKz/Fkh6eRzbaMvRQpT8bhdPWYWG6otaSygrYHR0F7O4SVHQNcbkB7NtQiXRR/fruvnnwzju4f6uGUnDD1uTQJ21EaeoC1kQn9NsDIrYLVmFlka6xIHSXB1+ull0i88bDtdlNb7cUsst20dNH9skbEq/nEg09Is7YzzKo8SK2/hSWyr60pn/Ksa0+o8kIWedK6CaWuUw4KmbsOgs0m608d4Wtkf5BXzgCLSCu7mWFT7juB9EyzrnxJYlnocH8aC4mMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMEwP5I9ljCP3xrfrwtksv5gPcEmp6iv4NZVCavl5g0yrgrXoceCYV985Lh//FtxdDD+XX36NgA8+oIDPqK/ABlFGTBgT7IFb4X2lXfamd+tI7/CI83odX7kDUvkk3H9v69dRxc6CZYYYOEnkTFJEP7OvCphfKkGA7txFz9gF7+3WAR1pO7SjjR6v5Cy+lKtfeDuyn/H9bDGwjcu+hejYYhw7MYWI/p2a+4tNZyHKfh+woguTS9qBqYlBgUM96ZYPnFs3qeBqCNQMeZSM1KSfPM3tmX3jlZKIFG+vGHoWXFeDR8DKhhwmWyAf2LsDL6zuwqQ/46QZHXhXvzkQmNVDkVgTup7zt68sgMKfXgBkLgLOXAs8SwZ9fQuXq5iguElNqTkMb/cVFUTLxbEICDep8Qy6hCwoztRsL/1L+K+EFrvGiHJltAX92Fj9ik6klvDrhhcPb9YPPKGRCDwOIzHOgYuY9/0QH1q2ke+Nen7zGTIZhJWSwoc5g/0ZgVx3YTO1M6gZ+iZpe93mgvtSv57UVkJtNZM8PUcZIF3otXXAmodOEdGv40YvALK2JhuQo6x9PpvoV/PjwTxHnuIsErC+Z0EcR2iovxq4dC7BiGVlZImOrTAdgU2fESxewAdCjWzil7d8BvEq6+iQ6xOzbgDOnA+sX+uUElyOsTROCzKaKMjIZ5RnLXJYwVtOl8Rnn/LVv4/2JJkxr3Aq73PQUQnEkUV7PyRXf8ufYdkcJesC3An3rF+D+O0nz1lGawZAO4a47YZUQzKodUAPGrwBnzAY+uI40dw3h/IOsV2FDzppK/w7BhUF1xGeRaC9FTtjWfDpy0otEe65d/7iOxDKQJpGF7nzP+7vp1y2iIUHXSIzmr+aCGZRipRhsWdjX92QdIxCWzE/+sIa1K7VG1plMg1rsocHga9tpeZ2295dlVZFTxwLnT6DlbGB8W8XdWZaDyS0PARN7gMtX0KCR1gfr8G/LzEpLrnVdEaNGpB4BSjMdlg0QaSYX8q18Wiz45JORVOB3AL8tX6q4NsLLyrTM7bRXpnParMUogxMeHxjEvL6+NXdjhIFO+jo8uaILP16pJYbQU1KYgZ/efqkO9K4CNm4vSd0I//OicrlmurtAzDKKbU8gMo8lz8iPr6CO7KiIJy1soEYYd52dloJMGfVZxYZ201Jot5hgbjXhx21OufEOIBVwsSqNx5MGUsHOfTdeOqZ0q/l7dU6bOY84fhuOI0ghu888fdJ9b7yxecTM4EVkvh3PPDEHjz+irbIWnYXV1duKyN/8ZyLzanLZ7aSzc+jwDW96kyzvi8D3/x24gKz2OR2sXbZWHo9xnaX0ePMH5Rk2F0ArW+iCEta7Iv1yLfom0qJcd6KIFV2OF2kfZVR/FfFT6W21r/KUz3qw4SLstmR1B3T6gLbIqfKDun3J9mWQZ9aW0GecdZ4icw3HEeiUtMmWQbz5060/wAgAkXkedu74Ah78Nv2FDzEHqnCS4/6HgW8tL4k8FPycLPlDz5ZtXjLZWWbBLhxF6kkfJ6tPF8CevpjMnOAtwaKkR0Fk6Am2FKFlsT/ICO0TSXgEi0npk5/nD8CRdcCrJ4N9vi2KYw6wdNOHFnY2unEcQgwWT9iOObRuXoR/uoue7Cn5wAdO9Kd+i9L+9h7gsR+jKfh7kiqfovZ273dp5pBKU79OXpX3UF9Gh8Mg7q5wilNNtunP0WoyJFLgQzjfl8xVbOy488sYxezSuLo2LfsPUiS4byTU6tnL0TzchOfW1bBrpzdgsk/uvnY/SY2NaCqeofZuvl/v+F4K7NlA1pyeQk66SScEHgTu1RBsJlmRKG13pOfsc6l8SyYccNyRJxEOHNllFVxSsUMvvlykrWluUBlHCG2dF+DxFfBdZfrPv3wl8HKTyWzwdB249WH4dwS9/hn155xP0KBPWenQRcI9ICYn7Lu2mtLti+SknX75dIkU2X3nYOpiaHwc6fVd/ZcJ3Rx049/JB7yrP76bvlwnzbsaRxX/QDLmqToimTOo3g0hS/3umxDJgUBK+ET17aITA/wukM4PWtX/VpO90SWQSjfELbdjZEI3B4vw3PogSZPiH76HYcHXVsO/nes+vEWDwtOvi/M8Yko2eT3P5ATW1lkE1QPEutYdo6qGeUDi3y/iowhElyW4TFHIhD5CFHKjf0cNGzfo8ybceVhD3oifDZNHUVnop16Db11pvY/6dRK58dpqNqlAIEZDJWGUqcswTxP5IwwzH1aiQd6GPaSItlxelV72tbprkz3lZKUyoY8c3dhYh/U388fSz/VhWPHVlYgtIXVqDw0O3zVH76Zv+uHbpvb1znBM4L0fIrVt5VQM5QV/3ucPH8M+pOFfFp788VLKSyIT+shxXUFofp4V9pI77fmXMKzo2+678Qz21YGTp+sdbc+SWthZZPuunLA5ZVlZJR14ezFdG0sU3xHHW0pR2eWHj8eb/Ppoe3s75s65plj39b2Mx364yuaNo7SZMy8p0ubOuRbnnDMRW7duw7LeB3Gco6MYDJr3HgrQxpZtGHbspkFg3+vA7Mkskfp1gNLGX+qn8fel9bZMWfeiLH8B1Lbgpfj616ewn4coz1GZlwzf8eA9EMwu+71qmoU+99yJWPbAvejsvBC7d+/GH31uIf7qL//M5rePOxVf/tIXcffSOwsymzKziOTHOUhD97Nbuf4Db92OYwJlpcOR2+Be7bpL3dqFtbqC1fGIIr3SbO3IVm2FhaedeSpYbQkuUSRrXQTHMxcf33JCp2kW+lOf/DheeOFF3PLHf1HsP/bYajz6SC96e/8Fa9Y+Y8vdccfX7f6smTMKq83zj0OoQSE9Rha+1du7H8cEu/eCsbLEIbrgxtb8dBna3JRYQGReYwudFgOVDdhUTlpfp4vKtlI9EEx4NFFDTyXLvJYRcwvJiS102+3svMArt4XdineRlc5oNrStShljyRZtjoUtq8lpjbv7jpDNYJ9okK99Re7SeDkR9NX/F1Fu2C6iPnDr3jRCt7efil27fu6lKVIrPX1CoCCKxMiAhPuQQEG4FSNvWdKUlV517hjzpAWrz9WtD6d1/aOFwsQpaP4BrKN/I5KLYCnRNEIr8ir9zDGVrHNf3zCP9IcfdXR0wH0uhXJ90lgcE7S36Q1GnFHjgf11Vsjvq+/JK6WTccq5pjT5mGqpUOR2K36i57/m79qRrI5/uYVthwIp/EqxaYRes+ZpfOADlxeDQ4UbPvabhcVW3o5fcPRjbIJE50zAMUHn2XHaqNMYoYMBo5TBjSWknA9DZC4tYmkgkRYffunDK22/jkzm+WjaoPCOr3wD48a1Y9l37sXmLa/j3edOwKd//+bCcv+CYz0mTOzCG+Qas3qU/vT0+wsrPdyDw05zITnvReHhGDBPLI2J5S47XT4acLl/uYvPFwehFQ3dbj641XaxOXyPhWsrkPzwexfa/+Knoon4wl/fhi/f8Y1CT28NiKwGg1N/ebaXZjwixznWY3INxbsc6ssP89dXZFakfmUjhg1XXESSYyzshWW8Lm1TgO1LdCFOUE5in9iCbXNNYr8zjOhqvA1VdlQmttOeb3us5FGqJYlC058UKv/y1l98q8zxXVw4FeVADN7Jx1WXYVjR0wlLGK4j1HscO1fqHW5Vw5u+W/sqxBcY7k0OH9WyIT4Ov3z4loxS/Pq+gw/RXn70fYQQQtTR1kZWeopOYZboghpw/mQMC9Q3hh9+LxytmHVWfmhvUIi0IGXwVKvg9PUHYgKxqg7BPca+jBGVpat65JcTtl1TLxO6OejFhZ3uxPNzfPUwWek//zD4m3GWGO1dwGuLERFCMGoxCcHD38GUkK49Z18N5Z0/RCRlCC8Z+6N9q54mekpfI2hTZgvdVCzBe7uYt0NBa80LyEJ2z8ZRxScuB2aYOwEjgxoMtl9MfphV4N0q1yWVfIcZ9Iv+zpbK8B0VuOEgR5p01V+gSM/Ch3mpfRGV56OAHDmpiSASEJlPuh2/2g2rpRXMA4vrf52IfZSkx4wa8Dv6LuAxgY79rh5g0+1abjAHsoWE7xJzfgXJy8vQc+FoFDZa5fNI5XPrHtr/cPjnSsigfb8vmdDNwxK879J+nDeFnWf2x//EbwAXNpnUKozBFz8SjuDKlfraezT5n19b0rAJaf/h/mkR8F8GdcJBZZW19T+qjTW02w6jkPoSJSwNWyd0+VlCqxBbyBgyCisNzMc1c+FLD5R/8ZPJnfaZG4H/3SRN/RGSMXfcAJzaxs6yJkALpZ03H3h1cWmdPbMo4gtAmLpGQEvmrInJBxnaztKaVskLU0oCzCb7tfl+5XGjFl27pgS30EtxPEKKpRghIFL3YlzH7ei5hqeyc0QbH74cuJmIePoQwwZ21YC/o/oLfr1sW0jfwiqcdQWweSk5/++xXbD5FXE2TKAaGd3pE2pZRCmmMBIN88ailEblG7VbJWVsemdnV020jl43EgM0NkC97ydrpmAEQYfQXWFj25kwWyYyUasmhIp592/PAs+8CDz9YuNGT2krgzbOI+t+8eQyfJeJmafWqs0iXh6VnUBkHktd+NdLgDFSTzshy3h2evoJN21FGdNObatpKKSOcadi2g22lrHtzJQUh8xCnT8o4phyPBYdjz9npqWonooinrLiQNRWHBvPn/5CFmtVzz4p7OtbX582bWYP/bxltFvDSIeUKyEPzscIg5IeROq5eH/PCvob17B2hclBNDD7X9OBy7vKSEsq8uhrOmijjT7aVkYeVWQeN7Ykrr1xs8GQsaJn95Qx7R7vYYdjOlcE/TAD2FBDi1IIFFlSRgNJacuw3w00kBzhUI5rbhnVjtsK38DjQ1jj42hg/Ts7Z86jW890OjkjzlrTH7ifDERvX9/aVRjB0MFnluHZJ7rwFJH64D7fSkfRSBFY8op1anvMSaSZry7P5o/mlqF0TbRRHnl0dJxWThYEG3lUksUfNJMGkQwZoL5xC22tpji8hTYRQ8NIoqkJg/xIo/7ERFWW3i9XbjeWMxlHDCL2bdi14yZ87y7grf50gMRU4MRGhOb7HaS4folI/OpS4PnPU8JOPUOW0PLCSA5YmcGlhyV0ITtEQWRFaiVBijC6wkgOoSWHJpTaB5KzVcWSo3Fo3PRMWqm8dFjeg7YfeRasow66yy0kUj+L//eZRXhpXQ3ryFrvSTiU7G1fxi5Ym29bJRKSBJlEevk0ekK5aj6wtdeRtrgLB7KEywyzJVl7xXHVFx868qhXpxx8uq9bYNtNRdOI3XqpfjQWKVU/ndcOB40iW+jhg41/p4I6vrKOLOp64L82aPkBZ3WF9MPfhhb5XWSRzyQSj6f1f3yVrPLfwQY296QFs8zcWptBoSdJTMBzvW4tB4XOQusA5yI1WFPWlgcpF8F+ehB3OMtcNRCM7wR+e5nQwwxN7G6o8GFv7ahhe52IXS+ncFOLmmTTeEbUPIVjSR+Pp0HhaVTtrKnAm33AK2SN19MDk8GdaYLyiTWLbZkm+xiUxxltNLReWst1ITHsxJtadsCPsh/e+tN5vmwwEsFJD+7dOFw7qVkDhN3PhD6GYORWwefMLLI1W+DNeknwbcqak4vvpd7ETLKCEVM6wvL8UUGe2h9j8yWRVxR5rVpLjyoHhk47S+uucwQq0iSRSBxM6lqZcK1Bl/fLOisvWDsS/oy0jtDxHUDY/YyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjJGD/wawHL6B/hNrmQAAAABJRU5ErkJggg=="},7869:(e,n,i)=>{i.d(n,{Ay:()=>c,RM:()=>r});var l=i(4848),t=i(8453),d=i(5529);const r=[{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...d.RM,{value:"<code>reverse</code>",id:"reverse",level:3},{value:"<code>vertical</code>",id:"vertical",level:3},{value:"<code>gestures</code>",id:"gestures",level:3},{value:"<code>style</code>",id:"style",level:3}];function s(e){const n={admonition:"admonition",code:"code",h3:"h3",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,t.R)(),...e.components},{Shapes:r}=n;return r||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"boundedthumb",children:(0,l.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"boundedThumb",src:i(7793).A+"",width:"180",height:"130"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,l.jsxs)(n.li,{children:["When set to ",(0,l.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbsize",children:(0,l.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbcolor",children:(0,l.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,l.jsxs)(n.admonition,{type:"info",children:[(0,l.jsx)(n.mdxAdmonitionTitle,{children:(0,l.jsx)(n.strong,{children:"*interactive"})}),(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,l.jsx)(n.h3,{id:"sliderthickness",children:(0,l.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["The thickness is the ",(0,l.jsx)(n.code,{children:"width"})," of the slider in ",(0,l.jsx)(n.code,{children:"vertical"})," mode or the ",(0,l.jsx)(n.code,{children:"height"})," in ",(0,l.jsx)(n.code,{children:"horizontal"})," mode."]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbshape",children:(0,l.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: string"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"values:"}),(0,l.jsx)(r,{})]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbstyle",children:(0,l.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,l.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,l.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: number"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,l.jsx)(d.Ay,{}),"\n",(0,l.jsx)(n.h3,{id:"reverse",children:(0,l.jsx)(n.code,{children:"reverse"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Reverse the slider direction."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"vertical",children:(0,l.jsx)(n.code,{children:"vertical"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Change the slider orientation."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"gestures",children:(0,l.jsx)(n.code,{children:"gestures"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["An array of gestures or composed gestures from ",(0,l.jsx)(n.code,{children:"react-native-gesture-handler"}),"."]}),"\n",(0,l.jsx)(n.li,{children:"These gestures will run simultaneously with the color picker gestures."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: Gesture[]"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"default: []"})}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"style",children:(0,l.jsx)(n.code,{children:"style"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,l.jsx)(n.admonition,{title:"note",type:"info",children:(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})})]})}function c(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(s,{...e})}):s(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>s});var l=i(6540);const t={},d=l.createContext(t);function r(e){const n=l.useContext(d);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),l.createElement(d.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/e0d6e6dc.bfc78ff8.js b/docs/build/assets/js/e0d6e6dc.bfc78ff8.js
new file mode 100644
index 0000000..3bd2303
--- /dev/null
+++ b/docs/build/assets/js/e0d6e6dc.bfc78ff8.js
@@ -0,0 +1,637 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [519],
+  {
+    6646: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => h,
+          contentTitle: () => s,
+          default: () => j,
+          frontMatter: () => d,
+          metadata: () => c,
+          toc: () => o,
+        });
+      var t = i(5893),
+        l = i(1151),
+        r = i(51);
+      const d = {
+          sidebar_position: 4,
+          sidebar_label: 'SaturationSlider',
+          description: 'A slider for adjusting the color saturation channel in the HSV color space.',
+        },
+        s = '<SaturationSlider />',
+        c = {
+          id: 'API/Sliders/HSB/SaturationSlider',
+          title: '<SaturationSlider />',
+          description: 'A slider for adjusting the color saturation channel in the HSV color space.',
+          source: '@site/docs/API/Sliders/HSB/SaturationSlider.mdx',
+          sourceDirName: 'API/Sliders/HSB',
+          slug: '/API/Sliders/HSB/SaturationSlider',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 4,
+          frontMatter: {
+            sidebar_position: 4,
+            sidebar_label: 'SaturationSlider',
+            description: 'A slider for adjusting the color saturation channel in the HSV color space.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'BrightnessSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider' },
+          next: { title: 'HSL', permalink: '/reanimated-color-picker/docs/category/hsl' },
+        },
+        h = {},
+        o = [
+          {
+            value: 'A slider for adjusting the color saturation channel in the HSV color space.',
+            id: 'a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+          code: 'code',
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h1, { id: 'saturationslider-', children: (0, t.jsx)(n.code, { children: '<SaturationSlider />' }) }),
+            '\n',
+            (0, t.jsx)(n.p, {
+              children: (0, t.jsx)(n.img, { alt: 'saturation', src: i(9967).Z + '', width: '256', height: '40' }),
+            }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    '\n',
+                    (0, t.jsx)(n.h3, {
+                      id: 'a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space',
+                      children: 'A slider for adjusting the color saturation channel in the HSV color space.',
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h2, { id: 'props', children: 'Props' }),
+            '\n',
+            (0, t.jsx)(n.h3, { id: 'adaptspectrum', children: (0, t.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsx)(n.li, {
+                  children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                '\n',
+                (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                '\n',
+              ],
+            }),
+            '\n',
+            '\n',
+            '\n',
+            (0, t.jsx)(r.ZP, {}),
+          ],
+        });
+      }
+      function j(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => d });
+      var t = i(5893),
+        l = i(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, l.a)(),
+          ...e.components,
+        };
+        return (0, t.jsxs)(t.Fragment, {
+          children: [
+            (0, t.jsx)(n.h3, { id: 'renderthumb', children: (0, t.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, t.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, t.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, t.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, t.jsxs)(n.li, { children: ['Overrides ', (0, t.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, t.jsx)(n.h4, { id: 'thumbprops', children: (0, t.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, t.jsxs)(n.table, {
+              children: [
+                (0, t.jsx)(n.thead, {
+                  children: (0, t.jsxs)(n.tr, {
+                    children: [
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, t.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, t.jsxs)(n.tbody, {
+                  children: [
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, t.jsx)(n.code, { children: 'width' }) }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, t.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, t.jsxs)(n.tr, {
+                      children: [
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, t.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, t.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, t.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, t.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, t.jsxs)(n.ul, { children: ['\n', (0, t.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, t.jsx)(n.pre, {
+              children: (0, t.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function d(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    51: (e, n, i) => {
+      i.d(n, { ZP: () => s });
+      var t = i(5893),
+        l = i(1151),
+        r = i(435);
+      function d(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, l.a)(),
+            ...e.components,
+          },
+          { Shapes: d } = n;
+        return (
+          d ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, t.jsxs)(t.Fragment, {
+            children: [
+              (0, t.jsx)(n.h3, { id: 'boundedthumb', children: (0, t.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, t.jsx)(n.p, {
+                children: (0, t.jsx)(n.img, { alt: 'boundedThumb', src: i(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, t.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbsize', children: (0, t.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbcolor', children: (0, t.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, t.jsx)(n.mdxAdmonitionTitle, { children: (0, t.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, t.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, t.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'sliderthickness', children: (0, t.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'The thickness is the ',
+                      (0, t.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in ',
+                      (0, t.jsx)(n.code, { children: 'vertical' }),
+                      ' mode or the ',
+                      (0, t.jsx)(n.code, { children: 'height' }),
+                      ' in ',
+                      (0, t.jsx)(n.code, { children: 'horizontal' }),
+                      ' mode.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbshape', children: (0, t.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, t.jsxs)(n.li, { children: [(0, t.jsx)(n.code, { children: 'values:' }), (0, t.jsx)(d, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbstyle', children: (0, t.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, t.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, t.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, t.jsx)(r.ZP, {}),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'reverse', children: (0, t.jsx)(n.code, { children: 'reverse' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Reverse the slider direction.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'vertical', children: (0, t.jsx)(n.code, { children: 'vertical' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'Change the slider orientation.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'gestures', children: (0, t.jsx)(n.code, { children: 'gestures' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsxs)(n.li, {
+                    children: [
+                      'An array of gestures or composed gestures from ',
+                      (0, t.jsx)(n.code, { children: 'react-native-gesture-handler' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: 'These gestures will run simultaneously with the color picker gestures.' }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: Gesture[]' }) }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'default: []' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.h3, { id: 'style', children: (0, t.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, t.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, t.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, t.jsx)(n.li, { children: (0, t.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, t.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, t.jsxs)(n.ul, {
+                  children: ['\n', (0, t.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function s(e = {}) {
+        const { wrapper: n } = { ...(0, l.a)(), ...e.components };
+        return n ? (0, t.jsx)(n, { ...e, children: (0, t.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    2737: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t =
+        'data:image/png;base64,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';
+    },
+    9967: (e, n, i) => {
+      i.d(n, { Z: () => t });
+      const t =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => s, a: () => d });
+      var t = i(7294);
+      const l = {},
+        r = t.createContext(l);
+      function d(e) {
+        const n = t.useContext(r);
+        return t.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function s(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(l)
+              : e.components || l
+            : d(e.components)),
+          t.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/e73706c6.c748fb3d.js b/docs/build/assets/js/e73706c6.c748fb3d.js
new file mode 100644
index 0000000..c96c60c
--- /dev/null
+++ b/docs/build/assets/js/e73706c6.c748fb3d.js
@@ -0,0 +1,559 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [218],
+  {
+    1962: (e, n, i) => {
+      i.r(n),
+        i.d(n, {
+          assets: () => o,
+          contentTitle: () => d,
+          default: () => u,
+          frontMatter: () => c,
+          metadata: () => s,
+          toc: () => h,
+        });
+      var l = i(5893),
+        t = i(1151),
+        r = i(435);
+      const c = {
+          sidebar_position: 3,
+          sidebar_label: 'LuminanceCircular',
+          description: 'A circular slider for adjusting the color luminance channel in the HSL color space.',
+        },
+        d = '<LuminanceCircular />',
+        s = {
+          id: 'API/Sliders/HSL/LuminanceCircular',
+          title: '<LuminanceCircular />',
+          description: 'A circular slider for adjusting the color luminance channel in the HSL color space.',
+          source: '@site/docs/API/Sliders/HSL/LuminanceCircular.mdx',
+          sourceDirName: 'API/Sliders/HSL',
+          slug: '/API/Sliders/HSL/LuminanceCircular',
+          permalink: '/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 3,
+          frontMatter: {
+            sidebar_position: 3,
+            sidebar_label: 'LuminanceCircular',
+            description: 'A circular slider for adjusting the color luminance channel in the HSL color space.',
+          },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'LuminanceSlider', permalink: '/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider' },
+          next: { title: 'RGB', permalink: '/reanimated-color-picker/docs/category/rgb' },
+        },
+        o = {},
+        h = [
+          {
+            value: 'A circular slider for adjusting the color luminance channel in the HSL color space',
+            id: 'a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space',
+            level: 3,
+          },
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>rotate</code>', id: 'rotate', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>sliderThickness</code>', id: 'sliderthickness', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>renderThumb</code>', id: 'renderthumb', level: 3 },
+          { value: '<code>thumbScaleAnimationValue</code>', id: 'thumbscaleanimationvalue', level: 3 },
+          { value: '<code>thumbScaleAnimationDuration</code>', id: 'thumbscaleanimationduration', level: 3 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+          { value: '<code>containerStyle</code>', id: 'containerstyle', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            mdxAdmonitionTitle: 'mdxAdmonitionTitle',
+            p: 'p',
+            strong: 'strong',
+            ul: 'ul',
+            ...(0, t.a)(),
+            ...e.components,
+          },
+          { Shapes: c } = n;
+        return (
+          c ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, l.jsxs)(l.Fragment, {
+            children: [
+              (0, l.jsx)(n.h1, { id: 'luminancecircular-', children: (0, l.jsx)(n.code, { children: '<LuminanceCircular />' }) }),
+              '\n',
+              (0, l.jsx)(n.p, {
+                children: (0, l.jsx)(n.img, { alt: 'LuminanceCircular', src: i(2781).Z + '', width: '200', height: '200' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.h3, {
+                        id: 'a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space',
+                        children: 'A circular slider for adjusting the color luminance channel in the HSL color space',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'rotate', children: (0, l.jsx)(n.code, { children: 'rotate' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Specify a degree of rotation for the luminance circle' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 0' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbsize', children: (0, l.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The size of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbcolor', children: (0, l.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The color of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: interactive*' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsxs)(n.admonition, {
+                type: 'info',
+                children: [
+                  (0, l.jsx)(n.mdxAdmonitionTitle, { children: (0, l.jsx)(n.strong, { children: '*interactive' }) }),
+                  (0, l.jsxs)(n.ul, {
+                    children: [
+                      '\n',
+                      (0, l.jsx)(n.li, {
+                        children:
+                          'The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.',
+                      }),
+                      '\n',
+                    ],
+                  }),
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'sliderthickness', children: (0, l.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'The thickness of the slider.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbshape', children: (0, l.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The shape and appearance of the slider's thumb." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: [(0, l.jsx)(n.code, { children: 'values:' }), (0, l.jsx)(c, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbstyle', children: (0, l.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's containing View's style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, l.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "Thumb's inner View(s) style." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsxs)(n.li, {
+                    children: [
+                      'Function which receives ',
+                      (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                      ' and returns a custom thumb component.',
+                    ],
+                  }),
+                  '\n',
+                  (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Controls the scale value animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, l.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'Sets the duration of the scale animation of the thumb when active.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, l.jsx)(r.ZP, {}),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'adaptspectrum', children: (0, l.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, {
+                    children: 'Slider background color spectrum adapts to changes in saturation and brightness.',
+                  }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'style', children: (0, l.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: "The style of the slider's container." }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, l.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, l.jsxs)(n.ul, {
+                  children: ['\n', (0, l.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+              '\n',
+              (0, l.jsx)(n.h3, { id: 'containerstyle', children: (0, l.jsx)(n.code, { children: 'containerStyle' }) }),
+              '\n',
+              (0, l.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, l.jsx)(n.li, { children: 'The style of the container that wraps the given children.' }),
+                  '\n',
+                  (0, l.jsx)(n.li, { children: (0, l.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+            ],
+          })
+        );
+      }
+      function u(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, i) => {
+      i.d(n, { ZP: () => c });
+      var l = i(5893),
+        t = i(1151);
+      function r(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, t.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(n.h3, { id: 'renderthumb', children: (0, l.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, l.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, l.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(n.li, { children: ['Overrides ', (0, l.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsx)(n.h4, { id: 'thumbprops', children: (0, l.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, l.jsxs)(n.table, {
+              children: [
+                (0, l.jsx)(n.thead, {
+                  children: (0, l.jsxs)(n.tr, {
+                    children: [
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, l.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, l.jsxs)(n.tbody, {
+                  children: [
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, l.jsx)(n.code, { children: 'width' }) }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, l.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, l.jsxs)(n.tr, {
+                      children: [
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, l.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, l.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, l.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, l.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(n.ul, { children: ['\n', (0, l.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, l.jsx)(n.pre, {
+              children: (0, l.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function c(e = {}) {
+        const { wrapper: n } = { ...(0, t.a)(), ...e.components };
+        return n ? (0, l.jsx)(n, { ...e, children: (0, l.jsx)(r, { ...e }) }) : r(e);
+      }
+    },
+    2781: (e, n, i) => {
+      i.d(n, { Z: () => l });
+      const l = i.p + 'assets/images/LuminanceCircular-70dc877ca2fe4511bf017e519eb3a89c.png';
+    },
+    1151: (e, n, i) => {
+      i.d(n, { Z: () => d, a: () => c });
+      var l = i(7294);
+      const t = {},
+        r = l.createContext(t);
+      function c(e) {
+        const n = l.useContext(r);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function d(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(t)
+              : e.components || t
+            : c(e.components)),
+          l.createElement(r.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/e73706c6.e20c27e9.js b/docs/build/assets/js/e73706c6.e20c27e9.js
deleted file mode 100644
index 38dc991..0000000
--- a/docs/build/assets/js/e73706c6.e20c27e9.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[160],{1427:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>o,contentTitle:()=>s,default:()=>u,frontMatter:()=>d,metadata:()=>l,toc:()=>h});const l=JSON.parse('{"id":"API/Sliders/HSL/LuminanceCircular","title":"<LuminanceCircular />","description":"A circular slider for adjusting the color luminance channel in the HSL color space.","source":"@site/docs/API/Sliders/HSL/LuminanceCircular.mdx","sourceDirName":"API/Sliders/HSL","slug":"/API/Sliders/HSL/LuminanceCircular","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3,"sidebar_label":"LuminanceCircular","description":"A circular slider for adjusting the color luminance channel in the HSL color space."},"sidebar":"tutorialSidebar","previous":{"title":"LuminanceSlider","permalink":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"},"next":{"title":"RGB","permalink":"/reanimated-color-picker/docs/category/rgb"}}');var t=i(4848),r=i(8453),c=i(5529);const d={sidebar_position:3,sidebar_label:"LuminanceCircular",description:"A circular slider for adjusting the color luminance channel in the HSL color space."},s="<LuminanceCircular />",o={},h=[{value:"A circular slider for adjusting the color luminance channel in the HSL color space",id:"a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space",level:3},{value:"Props",id:"props",level:2},{value:"<code>rotate</code>",id:"rotate",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...c.RM,{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},{value:"<code>style</code>",id:"style",level:3},{value:"<code>containerStyle</code>",id:"containerstyle",level:3}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Shapes:l}=n;return l||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"luminancecircular-",children:(0,t.jsx)(n.code,{children:"<LuminanceCircular />"})})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"LuminanceCircular",src:i(2059).A+"",width:"200",height:"200"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.h3,{id:"a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space",children:"A circular slider for adjusting the color luminance channel in the HSL color space"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(n.h3,{id:"rotate",children:(0,t.jsx)(n.code,{children:"rotate"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Specify a degree of rotation for the luminance circle"}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 0"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbsize",children:(0,t.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The size of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbcolor",children:(0,t.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: interactive*"})}),"\n"]}),"\n",(0,t.jsxs)(n.admonition,{type:"info",children:[(0,t.jsx)(n.mdxAdmonitionTitle,{children:(0,t.jsx)(n.strong,{children:"*interactive"})}),(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value."}),"\n"]})]}),"\n",(0,t.jsx)(n.h3,{id:"sliderthickness",children:(0,t.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The thickness of the slider."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbshape",children:(0,t.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The shape and appearance of the slider's thumb."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: string"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"values:"}),(0,t.jsx)(l,{})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbstyle",children:(0,t.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's containing View's style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,t.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Thumb's inner View(s) style."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"renderthumb",children:(0,t.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Function which receives ",(0,t.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,t.jsxs)(n.li,{children:["Overrides ",(0,t.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Controls the scale value animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,t.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sets the duration of the scale animation of the thumb when active."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: number"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,t.jsx)(c.Ay,{}),"\n",(0,t.jsx)(n.h3,{id:"adaptspectrum",children:(0,t.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Slider background color spectrum adapts to changes in saturation and brightness."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"style",children:(0,t.jsx)(n.code,{children:"style"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The style of the slider's container."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,t.jsx)(n.admonition,{title:"note",type:"info",children:(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})}),"\n",(0,t.jsx)(n.h3,{id:"containerstyle",children:(0,t.jsx)(n.code,{children:"containerStyle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The style of the container that wraps the given children."}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},2059:(e,n,i)=>{i.d(n,{A:()=>l});const l=i.p+"assets/images/LuminanceCircular-70dc877ca2fe4511bf017e519eb3a89c.png"},5529:(e,n,i)=>{i.d(n,{Ay:()=>d,RM:()=>r});var l=i(4848),t=i(8453);const r=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function c(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h3,{id:"renderthumb",children:(0,l.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Function which receives ",(0,l.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,l.jsxs)(n.li,{children:["Overrides ",(0,l.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"thumbprops",children:(0,l.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,l.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,l.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"positionStyle"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"StyleProp"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"width"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"height"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"number"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,l.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"adaptiveColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"currentColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"SharedValue<string>"})}),(0,l.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"initialColor"})}),(0,l.jsx)(n.td,{style:{textAlign:"center"},children:(0,l.jsx)(n.code,{children:"string"})}),(0,l.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,l.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function d(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(c,{...e})}):c(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>c,x:()=>d});var l=i(6540);const t={},r=l.createContext(t);function c(e){const n=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:c(e.components),l.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/ef3214ef.2a11b714.js b/docs/build/assets/js/ef3214ef.2a11b714.js
new file mode 100644
index 0000000..152c14d
--- /dev/null
+++ b/docs/build/assets/js/ef3214ef.2a11b714.js
@@ -0,0 +1,9 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [782],
+  {
+    3769: s => {
+      s.exports = JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}');
+    },
+  },
+]);
diff --git a/docs/build/assets/js/efeb2804.a37ff4d9.js b/docs/build/assets/js/efeb2804.a37ff4d9.js
deleted file mode 100644
index 8b8eb09..0000000
--- a/docs/build/assets/js/efeb2804.a37ff4d9.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[585],{3594:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>s,contentTitle:()=>o,default:()=>j,frontMatter:()=>c,metadata:()=>i,toc:()=>h});const i=JSON.parse('{"id":"API/ColorPicker","title":"ColorPicker Wrapper","description":"Responsible for managing the built-in components","source":"@site/docs/API/ColorPicker.mdx","sourceDirName":"API","slug":"/API/ColorPicker","permalink":"/reanimated-color-picker/docs/API/ColorPicker","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":0,"frontMatter":{"sidebar_position":0,"description":"Responsible for managing the built-in components"},"sidebar":"tutorialSidebar","previous":{"title":"API","permalink":"/reanimated-color-picker/docs/category/api"},"next":{"title":"Panels","permalink":"/reanimated-color-picker/docs/category/panels"}}');var d=l(4848),r=l(8453),t=l(5529);const c={sidebar_position:0,description:"Responsible for managing the built-in components"},o="ColorPicker Wrapper",s={},h=[{value:"Props",id:"props",level:2},{value:"<code>value</code>",id:"value",level:3},{value:"<code>adaptSpectrum</code>",id:"adaptspectrum",level:3},{value:"<code>boundedThumb</code>",id:"boundedthumb",level:3},{value:"<code>sliderThickness</code>",id:"sliderthickness",level:3},{value:"<code>thumbAnimationDuration</code>",id:"thumbanimationduration",level:3},{value:"<code>thumbSize</code>",id:"thumbsize",level:3},{value:"<code>thumbColor</code>",id:"thumbcolor",level:3},{value:"<code>thumbShape</code>",id:"thumbshape",level:3},{value:"<code>thumbStyle</code>",id:"thumbstyle",level:3},{value:"<code>thumbInnerStyle</code>",id:"thumbinnerstyle",level:3},{value:"<code>thumbScaleAnimationValue</code>",id:"thumbscaleanimationvalue",level:3},{value:"<code>thumbScaleAnimationDuration</code>",id:"thumbscaleanimationduration",level:3},...t.RM,{value:"<code>style</code>",id:"style",level:3},{value:"<code>onChange</code>",id:"onchange",level:3},{value:"<code>onChangeJS</code>",id:"onchangejs",level:3},{value:"<code>onComplete</code>",id:"oncomplete",level:3},{value:"<code>onCompleteJS</code>",id:"oncompletejs",level:3},{value:"Methods",id:"methods",level:2},{value:"<code>setColor</code>",id:"setcolor",level:3}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components},{Shapes:i}=n;return i||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Shapes",!0),(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"colorpicker-wrapper",children:"ColorPicker Wrapper"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["The ",(0,d.jsx)(n.code,{children:"ColorPicker"})," Wrapper is responsible for managing the built-in components."]}),"\n"]}),"\n",(0,d.jsx)(n.admonition,{type:"caution",children:(0,d.jsxs)(n.p,{children:["All built-in components should be wrapped within the ",(0,d.jsx)(n.code,{children:"ColorPicker"})," component."]})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["You can nest components within the ",(0,d.jsx)(n.code,{children:"ColorPicker"})," wrapper to achieve the desired level of customization."]}),"\n"]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-jsx",children:"<ColorPicker>\n  <Preview />\n\n  <View>\n    <Panel1 />\n    <HueSlider vertical />\n  </View>\n\n  <View>\n    <Text>Opacity</Text>\n    <OpacitySlider />\n  </View>\n\n  <Swatches />\n</ColorPicker>\n"})}),"\n",(0,d.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,d.jsx)(n.h3,{id:"value",children:(0,d.jsx)(n.code,{children:"value"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["The initial color that should be displayed when the ",(0,d.jsx)(n.code,{children:"ColorPicker"})," is loaded."]}),"\n",(0,d.jsxs)(n.li,{children:["If the ",(0,d.jsx)(n.code,{children:"value"})," property is modified, the ",(0,d.jsx)(n.code,{children:"ColorPicker"})," will automatically update the displayed color."]}),"\n",(0,d.jsxs)(n.li,{children:["Accepts: ",(0,d.jsx)(n.code,{children:"'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' | 'hwb' | 'hwba' | named colors"})," formats."]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: string"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: '#fff'"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"adaptspectrum",children:(0,d.jsx)(n.code,{children:"adaptSpectrum"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property that allows the slider background color spectrum to adapt to changes in brightness and saturation for all descendant slider components."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"boundedthumb",children:(0,d.jsx)(n.code,{children:"boundedThumb"})}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"boundedThumb",src:l(7793).A+"",width:"180",height:"130"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property for all descendant sliders and panels components."}),"\n",(0,d.jsx)(n.li,{children:"Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider."}),"\n",(0,d.jsxs)(n.li,{children:["When set to ",(0,d.jsx)(n.code,{children:"true"}),", the thumb will not be allowed to move beyond the edges of the slider."]}),"\n",(0,d.jsxs)(n.li,{children:["When set to ",(0,d.jsx)(n.code,{children:"false"}),", part of it will be outside of the slider bounds."]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: boolean"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: false"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"sliderthickness",children:(0,d.jsx)(n.code,{children:"sliderThickness"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property that allows for changing the thickness of all descendant slider components."}),"\n",(0,d.jsxs)(n.li,{children:["The thickness refers to the ",(0,d.jsx)(n.code,{children:"width"})," of the slider in the case of a ",(0,d.jsx)(n.code,{children:"vertical"})," orientation, and the ",(0,d.jsx)(n.code,{children:"height"})," in the case of a ",(0,d.jsx)(n.code,{children:"horizontal"})," orientation."]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: number"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: 25"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbanimationduration",children:(0,d.jsx)(n.code,{children:"thumbAnimationDuration"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property to change the duration which the thumbs animate when the value prop changes."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: number"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: 200"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbsize",children:(0,d.jsx)(n.code,{children:"thumbSize"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property for changing the thumb size of all descendant slider components."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: number"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: 35"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbcolor",children:(0,d.jsx)(n.code,{children:"thumbColor"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property for changing the thumb color of all descendant slider components."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: string"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: undefined"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbshape",children:(0,d.jsx)(n.code,{children:"thumbShape"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property that allows for the alteration of the thumb shape and appearance of all descendant slider components."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: string"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: 'ring'"})}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"values:"}),(0,d.jsx)(i,{})]}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbstyle",children:(0,d.jsx)(n.code,{children:"thumbStyle"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property to change the style of the thumb's View for all descendant sliders components."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbinnerstyle",children:(0,d.jsx)(n.code,{children:"thumbInnerStyle"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property to change the color of the thumb's inner View(s) for all descendant sliders components."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbscaleanimationvalue",children:(0,d.jsx)(n.code,{children:"thumbScaleAnimationValue"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property to controls the scale value animation of the thumb when active."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: number"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: 1.2"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"thumbscaleanimationduration",children:(0,d.jsx)(n.code,{children:"thumbScaleAnimationDuration"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"A global property to sets the duration of the scale animation of the thumb when active."}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: number"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: 100"})}),"\n"]}),"\n","\n",(0,d.jsx)(t.Ay,{}),"\n",(0,d.jsx)(n.h3,{id:"style",children:(0,d.jsx)(n.code,{children:"style"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["The container style of the ",(0,d.jsx)(n.code,{children:"ColorPicker"}),"."]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: ViewStyle"})}),"\n"]}),"\n",(0,d.jsx)(n.admonition,{title:"note",type:"info",children:(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"Certain style properties will be overridden."}),"\n"]})}),"\n",(0,d.jsx)(n.h3,{id:"onchange",children:(0,d.jsx)(n.code,{children:"onChange"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"Triggers every time the user modifies the color."}),"\n",(0,d.jsxs)(n.li,{children:["Accepts ",(0,d.jsx)(n.code,{children:"worklet"})," function only. For non-",(0,d.jsx)(n.code,{children:"worklet"})," functions, use ",(0,d.jsx)(n.code,{children:"onChangeJS"}),"."]}),"\n",(0,d.jsxs)(n.li,{children:["The passed color object has the following properties: ",(0,d.jsx)(n.code,{children:"hex"}),", ",(0,d.jsx)(n.code,{children:"rgb"}),", ",(0,d.jsx)(n.code,{children:"rgba"}),", ",(0,d.jsx)(n.code,{children:"hsv"}),", ",(0,d.jsx)(n.code,{children:"hsva"}),", ",(0,d.jsx)(n.code,{children:"hwb"}),", ",(0,d.jsx)(n.code,{children:"hwba"}),", ",(0,d.jsx)(n.code,{children:"hsl"}),", and ",(0,d.jsx)(n.code,{children:"hsla"})]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: (color: object) => void"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: undefined"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"onchangejs",children:(0,d.jsx)(n.code,{children:"onChangeJS"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"Triggers every time the user modifies the color."}),"\n",(0,d.jsxs)(n.li,{children:["Accepts none-",(0,d.jsx)(n.code,{children:"worklet"})," function. For ",(0,d.jsx)(n.code,{children:"worklet"})," functions, use ",(0,d.jsx)(n.code,{children:"onChange"}),"."]}),"\n",(0,d.jsxs)(n.li,{children:["The passed color object has the following properties: ",(0,d.jsx)(n.code,{children:"hex"}),", ",(0,d.jsx)(n.code,{children:"rgb"}),", ",(0,d.jsx)(n.code,{children:"rgba"}),", ",(0,d.jsx)(n.code,{children:"hsv"}),", ",(0,d.jsx)(n.code,{children:"hsva"}),", ",(0,d.jsx)(n.code,{children:"hwb"}),", ",(0,d.jsx)(n.code,{children:"hwba"}),", ",(0,d.jsx)(n.code,{children:"hsl"}),", and ",(0,d.jsx)(n.code,{children:"hsla"})]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: (color: object) => void"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: undefined"})}),"\n"]}),"\n",(0,d.jsx)(n.admonition,{type:"tip",children:(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["To prevent performance issues, it is best to avoid using ",(0,d.jsx)(n.code,{children:"setState"})," in the ",(0,d.jsx)(n.code,{children:"onChange"})," callback."]}),"\n",(0,d.jsxs)(n.li,{children:["It is highly recommended to utilize the ",(0,d.jsx)(n.code,{children:"useSharedValue"})," function from the ",(0,d.jsx)(n.code,{children:"react-native-reanimated"})," library."]}),"\n"]})}),"\n",(0,d.jsx)(n.h3,{id:"oncomplete",children:(0,d.jsx)(n.code,{children:"onComplete"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"Triggered upon the user releasing the slider handle or clicking on a swatch."}),"\n",(0,d.jsxs)(n.li,{children:["Accepts ",(0,d.jsx)(n.code,{children:"worklet"})," function only. For non-",(0,d.jsx)(n.code,{children:"worklet"})," functions, use ",(0,d.jsx)(n.code,{children:"onCompleteJS"}),"."]}),"\n",(0,d.jsxs)(n.li,{children:["The function passed can be a ",(0,d.jsx)(n.code,{children:"worklet"})," function."]}),"\n",(0,d.jsxs)(n.li,{children:["The passed color object has the following properties: ",(0,d.jsx)(n.code,{children:"hex"}),", ",(0,d.jsx)(n.code,{children:"rgb"}),", ",(0,d.jsx)(n.code,{children:"rgba"}),", ",(0,d.jsx)(n.code,{children:"hsv"}),", ",(0,d.jsx)(n.code,{children:"hsva"}),", ",(0,d.jsx)(n.code,{children:"hwb"}),", ",(0,d.jsx)(n.code,{children:"hwba"}),", ",(0,d.jsx)(n.code,{children:"hsl"}),", and ",(0,d.jsx)(n.code,{children:"hsla"})]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: (color: object) => void"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: undefined"})}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"oncompletejs",children:(0,d.jsx)(n.code,{children:"onCompleteJS"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"Triggered upon the user releasing the slider handle or clicking on a swatch."}),"\n",(0,d.jsxs)(n.li,{children:["Accepts none-",(0,d.jsx)(n.code,{children:"worklet"})," function. For ",(0,d.jsx)(n.code,{children:"worklet"})," functions, use ",(0,d.jsx)(n.code,{children:"onComplete"}),"."]}),"\n",(0,d.jsxs)(n.li,{children:["The function passed can be a ",(0,d.jsx)(n.code,{children:"worklet"})," function."]}),"\n",(0,d.jsxs)(n.li,{children:["The passed color object has the following properties: ",(0,d.jsx)(n.code,{children:"hex"}),", ",(0,d.jsx)(n.code,{children:"rgb"}),", ",(0,d.jsx)(n.code,{children:"rgba"}),", ",(0,d.jsx)(n.code,{children:"hsv"}),", ",(0,d.jsx)(n.code,{children:"hsva"}),", ",(0,d.jsx)(n.code,{children:"hwb"}),", ",(0,d.jsx)(n.code,{children:"hwba"}),", ",(0,d.jsx)(n.code,{children:"hsl"}),", and ",(0,d.jsx)(n.code,{children:"hsla"})]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"type: (color: object) => void"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.code,{children:"default: undefined"})}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,d.jsx)(n.h3,{id:"setcolor",children:(0,d.jsx)(n.code,{children:"setColor"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsx)(n.p,{children:"Set the currently displayed color in the color picker to a new one."}),"\n"]}),"\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsxs)(n.p,{children:["Note that this won\u2019t trigger any events like ",(0,d.jsx)(n.code,{children:"onChange"})," or ",(0,d.jsx)(n.code,{children:"onComplete"}),"."]}),"\n"]}),"\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsxs)(n.p,{children:["This is useful if you want to update the displayed color without binding a state to the color picker ",(0,d.jsx)(n.code,{children:"value"})," property."]}),"\n"]}),"\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.code,{children:"type: (color: string, duration?: number) => void"})}),"\n"]}),"\n"]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",children:"import ColorPicker from 'reanimated-color-picker';\nimport type { ColorPickerRef } from 'reanimated-color-picker';\n\nfunction MyComponent() {\n  const pickerRef = useRef<ColorPickerRef>(null);\n\n  const setNewColorHandle = () => {\n    if (pickerRef.current) {\n      pickerRef.current.setColor('orange');\n    }\n  };\n\n  return <ColorPicker ref={pickerRef}>{/* the rest of your code */}</ColorPicker>;\n}\n"})})]})}function j(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},5529:(e,n,l)=>{l.d(n,{Ay:()=>c,RM:()=>r});var i=l(4848),d=l(8453);const r=[{value:"<code>renderThumb</code>",id:"renderthumb",level:3},{value:"<code>ThumbProps</code>",id:"thumbprops",level:4}];function t(e){const n={code:"code",h3:"h3",h4:"h4",li:"li",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h3,{id:"renderthumb",children:(0,i.jsx)(n.code,{children:"renderThumb"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Function which receives ",(0,i.jsx)(n.code,{children:"ThumbProps"})," and returns a custom thumb component."]}),"\n",(0,i.jsxs)(n.li,{children:["Overrides ",(0,i.jsx)(n.code,{children:"thumbShape"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"thumbprops",children:(0,i.jsx)(n.code,{children:"ThumbProps"})}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Prop"}),(0,i.jsx)(n.th,{style:{textAlign:"center"},children:"Type"}),(0,i.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"positionStyle"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"StyleProp"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This style determines the position of the thumb and is a crucial element that should be included."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"width"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"height"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["Extracted from the ",(0,i.jsx)(n.code,{children:"thumbSize"})," prop and it's important for thumb position calculation."]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"adaptiveColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"White or black based on the contrast ratio."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"currentColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"SharedValue<string>"})}),(0,i.jsx)(n.td,{style:{textAlign:"left"},children:"This shared value will update whenever the color changes."})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"initialColor"})}),(0,i.jsx)(n.td,{style:{textAlign:"center"},children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{style:{textAlign:"left"},children:["The initial color value as a ",(0,i.jsx)(n.code,{children:"string"}),"."]})]})]})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Example Usage:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",children:"import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n"})})]})}function c(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(t,{...e})}):t(e)}},7793:(e,n,l)=>{l.d(n,{A:()=>i});const i="data:image/png;base64,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"},8453:(e,n,l)=>{l.d(n,{R:()=>t,x:()=>c});var i=l(6540);const d={},r=i.createContext(d);function t(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:t(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/efeb2804.b279341f.js b/docs/build/assets/js/efeb2804.b279341f.js
new file mode 100644
index 0000000..85a9a26
--- /dev/null
+++ b/docs/build/assets/js/efeb2804.b279341f.js
@@ -0,0 +1,949 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [753],
+  {
+    2097: (e, n, l) => {
+      l.r(n),
+        l.d(n, {
+          assets: () => s,
+          contentTitle: () => c,
+          default: () => j,
+          frontMatter: () => t,
+          metadata: () => o,
+          toc: () => h,
+        });
+      var i = l(5893),
+        r = l(1151),
+        d = l(435);
+      const t = { sidebar_position: 0, description: 'Responsible for managing the built-in components' },
+        c = 'ColorPicker Wrapper',
+        o = {
+          id: 'API/ColorPicker',
+          title: 'ColorPicker Wrapper',
+          description: 'Responsible for managing the built-in components',
+          source: '@site/docs/API/ColorPicker.mdx',
+          sourceDirName: 'API',
+          slug: '/API/ColorPicker',
+          permalink: '/reanimated-color-picker/docs/API/ColorPicker',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 0,
+          frontMatter: { sidebar_position: 0, description: 'Responsible for managing the built-in components' },
+          sidebar: 'tutorialSidebar',
+          previous: { title: 'API', permalink: '/reanimated-color-picker/docs/category/api' },
+          next: { title: 'Panels', permalink: '/reanimated-color-picker/docs/category/panels' },
+        },
+        s = {},
+        h = [
+          { value: 'Props', id: 'props', level: 2 },
+          { value: '<code>value</code>', id: 'value', level: 3 },
+          { value: '<code>adaptSpectrum</code>', id: 'adaptspectrum', level: 3 },
+          { value: '<code>boundedThumb</code>', id: 'boundedthumb', level: 3 },
+          { value: '<code>sliderThickness</code>', id: 'sliderthickness', level: 3 },
+          { value: '<code>thumbAnimationDuration</code>', id: 'thumbanimationduration', level: 3 },
+          { value: '<code>thumbSize</code>', id: 'thumbsize', level: 3 },
+          { value: '<code>thumbColor</code>', id: 'thumbcolor', level: 3 },
+          { value: '<code>thumbShape</code>', id: 'thumbshape', level: 3 },
+          { value: '<code>thumbStyle</code>', id: 'thumbstyle', level: 3 },
+          { value: '<code>thumbInnerStyle</code>', id: 'thumbinnerstyle', level: 3 },
+          { value: '<code>thumbScaleAnimationValue</code>', id: 'thumbscaleanimationvalue', level: 3 },
+          { value: '<code>thumbScaleAnimationDuration</code>', id: 'thumbscaleanimationduration', level: 3 },
+          { value: '<code>style</code>', id: 'style', level: 3 },
+          { value: '<code>onChange</code>', id: 'onchange', level: 3 },
+          { value: '<code>onChangeJS</code>', id: 'onchangejs', level: 3 },
+          { value: '<code>onComplete</code>', id: 'oncomplete', level: 3 },
+          { value: '<code>onCompleteJS</code>', id: 'oncompletejs', level: 3 },
+          { value: 'Methods', id: 'methods', level: 2 },
+          { value: '<code>setColor</code>', id: 'setcolor', level: 3 },
+        ];
+      function a(e) {
+        const n = {
+            admonition: 'admonition',
+            code: 'code',
+            h1: 'h1',
+            h2: 'h2',
+            h3: 'h3',
+            img: 'img',
+            li: 'li',
+            p: 'p',
+            pre: 'pre',
+            ul: 'ul',
+            ...(0, r.a)(),
+            ...e.components,
+          },
+          { Shapes: t } = n;
+        return (
+          t ||
+            (function (e, n) {
+              throw new Error(
+                'Expected ' +
+                  (n ? 'component' : 'object') +
+                  ' `' +
+                  e +
+                  '` to be defined: you likely forgot to import, pass, or provide it.',
+              );
+            })('Shapes', !0),
+          (0, i.jsxs)(i.Fragment, {
+            children: [
+              (0, i.jsx)(n.h1, { id: 'colorpicker-wrapper', children: 'ColorPicker Wrapper' }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The ',
+                      (0, i.jsx)(n.code, { children: 'ColorPicker' }),
+                      ' Wrapper is responsible for managing the built-in components.',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                type: 'caution',
+                children: (0, i.jsxs)(n.p, {
+                  children: [
+                    'All built-in components should be wrapped within the ',
+                    (0, i.jsx)(n.code, { children: 'ColorPicker' }),
+                    ' component.',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'You can nest components within the ',
+                      (0, i.jsx)(n.code, { children: 'ColorPicker' }),
+                      ' wrapper to achieve the desired level of customization.',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.pre, {
+                children: (0, i.jsx)(n.code, {
+                  className: 'language-jsx',
+                  children:
+                    '<ColorPicker>\r\n  <Preview />\r\n\r\n  <View>\r\n    <Panel1 />\r\n    <HueSlider vertical />\r\n  </View>\r\n\r\n  <View>\r\n    <Text>Opacity</Text>\r\n    <OpacitySlider />\r\n  </View>\r\n\r\n  <Swatches />\r\n</ColorPicker>\n',
+                }),
+              }),
+              '\n',
+              (0, i.jsx)(n.h2, { id: 'props', children: 'Props' }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'value', children: (0, i.jsx)(n.code, { children: 'value' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The initial color that should be displayed when the ',
+                      (0, i.jsx)(n.code, { children: 'ColorPicker' }),
+                      ' is loaded.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'If the ',
+                      (0, i.jsx)(n.code, { children: 'value' }),
+                      ' property is modified, the ',
+                      (0, i.jsx)(n.code, { children: 'ColorPicker' }),
+                      ' will automatically update the displayed color.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'Accepts: ',
+                      (0, i.jsx)(n.code, {
+                        children: "'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' | 'hwb' | 'hwba' | named colors",
+                      }),
+                      ' formats.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: "default: '#fff'" }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'adaptspectrum', children: (0, i.jsx)(n.code, { children: 'adaptSpectrum' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'A global property that allows the slider background color spectrum to adapt to changes in brightness and saturation for all descendant slider components.',
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'boundedthumb', children: (0, i.jsx)(n.code, { children: 'boundedThumb' }) }),
+              '\n',
+              (0, i.jsx)(n.p, {
+                children: (0, i.jsx)(n.img, { alt: 'boundedThumb', src: l(2737).Z + '', width: '180', height: '130' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'A global property for all descendant sliders and panels components.' }),
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'true' }),
+                      ', the thumb will not be allowed to move beyond the edges of the slider.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'When set to ',
+                      (0, i.jsx)(n.code, { children: 'false' }),
+                      ', part of it will be outside of the slider bounds.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: boolean' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: false' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'sliderthickness', children: (0, i.jsx)(n.code, { children: 'sliderThickness' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: 'A global property that allows for changing the thickness of all descendant slider components.',
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The thickness refers to the ',
+                      (0, i.jsx)(n.code, { children: 'width' }),
+                      ' of the slider in the case of a ',
+                      (0, i.jsx)(n.code, { children: 'vertical' }),
+                      ' orientation, and the ',
+                      (0, i.jsx)(n.code, { children: 'height' }),
+                      ' in the case of a ',
+                      (0, i.jsx)(n.code, { children: 'horizontal' }),
+                      ' orientation.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 25' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbanimationduration',
+                children: (0, i.jsx)(n.code, { children: 'thumbAnimationDuration' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: 'A global property to change the duration which the thumbs animate when the value prop changes.',
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 200' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbsize', children: (0, i.jsx)(n.code, { children: 'thumbSize' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: 'A global property for changing the thumb size of all descendant slider components.',
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 35' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbcolor', children: (0, i.jsx)(n.code, { children: 'thumbColor' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: 'A global property for changing the thumb color of all descendant slider components.',
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: undefined' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbshape', children: (0, i.jsx)(n.code, { children: 'thumbShape' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      'A global property that allows for the alteration of the thumb shape and appearance of all descendant slider components.',
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: string' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: "default: 'ring'" }) }),
+                  '\n',
+                  (0, i.jsxs)(n.li, { children: [(0, i.jsx)(n.code, { children: 'values:' }), (0, i.jsx)(t, {})] }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbstyle', children: (0, i.jsx)(n.code, { children: 'thumbStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: "A global property to change the style of the thumb's View for all descendant sliders components.",
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'thumbinnerstyle', children: (0, i.jsx)(n.code, { children: 'thumbInnerStyle' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children:
+                      "A global property to change the color of the thumb's inner View(s) for all descendant sliders components.",
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationvalue',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationValue' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: 'A global property to controls the scale value animation of the thumb when active.',
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 1.2' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, {
+                id: 'thumbscaleanimationduration',
+                children: (0, i.jsx)(n.code, { children: 'thumbScaleAnimationDuration' }),
+              }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, {
+                    children: 'A global property to sets the duration of the scale animation of the thumb when active.',
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: number' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: 100' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              '\n',
+              '\n',
+              (0, i.jsx)(d.ZP, {}),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'style', children: (0, i.jsx)(n.code, { children: 'style' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: ['The container style of the ', (0, i.jsx)(n.code, { children: 'ColorPicker' }), '.'],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: ViewStyle' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                title: 'note',
+                type: 'info',
+                children: (0, i.jsxs)(n.ul, {
+                  children: ['\n', (0, i.jsx)(n.li, { children: 'Certain style properties will be overridden.' }), '\n'],
+                }),
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'onchange', children: (0, i.jsx)(n.code, { children: 'onChange' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Triggers every time the user modifies the color.' }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'Accepts ',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' function only. For non-',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' functions, use ',
+                      (0, i.jsx)(n.code, { children: 'onChangeJS' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The passed color object has the following properties: ',
+                      (0, i.jsx)(n.code, { children: 'hex' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsv' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsva' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsl' }),
+                      ', and ',
+                      (0, i.jsx)(n.code, { children: 'hsla' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: (color: object) => void' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: undefined' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'onchangejs', children: (0, i.jsx)(n.code, { children: 'onChangeJS' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Triggers every time the user modifies the color.' }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'Accepts none-',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' function. For ',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' functions, use ',
+                      (0, i.jsx)(n.code, { children: 'onChange' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The passed color object has the following properties: ',
+                      (0, i.jsx)(n.code, { children: 'hex' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsv' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsva' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsl' }),
+                      ', and ',
+                      (0, i.jsx)(n.code, { children: 'hsla' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: (color: object) => void' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: undefined' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.admonition, {
+                type: 'tip',
+                children: (0, i.jsxs)(n.ul, {
+                  children: [
+                    '\n',
+                    (0, i.jsxs)(n.li, {
+                      children: [
+                        'To prevent performance issues, it is best to avoid using ',
+                        (0, i.jsx)(n.code, { children: 'setState' }),
+                        ' in the ',
+                        (0, i.jsx)(n.code, { children: 'onChange' }),
+                        ' callback.',
+                      ],
+                    }),
+                    '\n',
+                    (0, i.jsxs)(n.li, {
+                      children: [
+                        'It is highly recommended to utilize the ',
+                        (0, i.jsx)(n.code, { children: 'useSharedValue' }),
+                        ' function from the ',
+                        (0, i.jsx)(n.code, { children: 'react-native-reanimated' }),
+                        ' library.',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'oncomplete', children: (0, i.jsx)(n.code, { children: 'onComplete' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Triggered upon the user releasing the slider handle or clicking on a swatch.' }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'Accepts ',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' function only. For non-',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' functions, use ',
+                      (0, i.jsx)(n.code, { children: 'onCompleteJS' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: ['The function passed can be a ', (0, i.jsx)(n.code, { children: 'worklet' }), ' function.'],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The passed color object has the following properties: ',
+                      (0, i.jsx)(n.code, { children: 'hex' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsv' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsva' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsl' }),
+                      ', and ',
+                      (0, i.jsx)(n.code, { children: 'hsla' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: (color: object) => void' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: undefined' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'oncompletejs', children: (0, i.jsx)(n.code, { children: 'onCompleteJS' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsx)(n.li, { children: 'Triggered upon the user releasing the slider handle or clicking on a swatch.' }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'Accepts none-',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' function. For ',
+                      (0, i.jsx)(n.code, { children: 'worklet' }),
+                      ' functions, use ',
+                      (0, i.jsx)(n.code, { children: 'onComplete' }),
+                      '.',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: ['The function passed can be a ', (0, i.jsx)(n.code, { children: 'worklet' }), ' function.'],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      'The passed color object has the following properties: ',
+                      (0, i.jsx)(n.code, { children: 'hex' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'rgba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsv' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsva' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwb' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hwba' }),
+                      ', ',
+                      (0, i.jsx)(n.code, { children: 'hsl' }),
+                      ', and ',
+                      (0, i.jsx)(n.code, { children: 'hsla' }),
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'type: (color: object) => void' }) }),
+                  '\n',
+                  (0, i.jsx)(n.li, { children: (0, i.jsx)(n.code, { children: 'default: undefined' }) }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.h2, { id: 'methods', children: 'Methods' }),
+              '\n',
+              (0, i.jsx)(n.h3, { id: 'setcolor', children: (0, i.jsx)(n.code, { children: 'setColor' }) }),
+              '\n',
+              (0, i.jsxs)(n.ul, {
+                children: [
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.p, { children: 'Set the currently displayed color in the color picker to a new one.' }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, i.jsxs)(n.p, {
+                        children: [
+                          'Note that this won\u2019t trigger any events like ',
+                          (0, i.jsx)(n.code, { children: 'onChange' }),
+                          ' or ',
+                          (0, i.jsx)(n.code, { children: 'onComplete' }),
+                          '.',
+                        ],
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, i.jsxs)(n.p, {
+                        children: [
+                          'This is useful if you want to update the displayed color without binding a state to the color picker ',
+                          (0, i.jsx)(n.code, { children: 'value' }),
+                          ' property.',
+                        ],
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                  (0, i.jsxs)(n.li, {
+                    children: [
+                      '\n',
+                      (0, i.jsx)(n.p, {
+                        children: (0, i.jsx)(n.code, { children: 'type: (color: string, duration?: number) => void' }),
+                      }),
+                      '\n',
+                    ],
+                  }),
+                  '\n',
+                ],
+              }),
+              '\n',
+              (0, i.jsx)(n.pre, {
+                children: (0, i.jsx)(n.code, {
+                  className: 'language-tsx',
+                  children:
+                    "import ColorPicker from 'reanimated-color-picker';\r\nimport type { ColorPickerRef } from 'reanimated-color-picker';\r\n\r\nfunction MyComponent() {\r\n  const pickerRef = useRef<ColorPickerRef>(null);\r\n\r\n  const setNewColorHandle = () => {\r\n    if (pickerRef.current) {\r\n      pickerRef.current.setColor('orange');\r\n    }\r\n  };\r\n\r\n  return <ColorPicker ref={pickerRef}>{/* the rest of your code */}</ColorPicker>;\r\n}\n",
+                }),
+              }),
+            ],
+          })
+        );
+      }
+      function j(e = {}) {
+        const { wrapper: n } = { ...(0, r.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(a, { ...e }) }) : a(e);
+      }
+    },
+    435: (e, n, l) => {
+      l.d(n, { ZP: () => t });
+      var i = l(5893),
+        r = l(1151);
+      function d(e) {
+        const n = {
+          code: 'code',
+          h3: 'h3',
+          h4: 'h4',
+          li: 'li',
+          pre: 'pre',
+          table: 'table',
+          tbody: 'tbody',
+          td: 'td',
+          th: 'th',
+          thead: 'thead',
+          tr: 'tr',
+          ul: 'ul',
+          ...(0, r.a)(),
+          ...e.components,
+        };
+        return (0, i.jsxs)(i.Fragment, {
+          children: [
+            (0, i.jsx)(n.h3, { id: 'renderthumb', children: (0, i.jsx)(n.code, { children: 'renderThumb' }) }),
+            '\n',
+            (0, i.jsxs)(n.ul, {
+              children: [
+                '\n',
+                (0, i.jsxs)(n.li, {
+                  children: [
+                    'Function which receives ',
+                    (0, i.jsx)(n.code, { children: 'ThumbProps' }),
+                    ' and returns a custom thumb component.',
+                  ],
+                }),
+                '\n',
+                (0, i.jsxs)(n.li, { children: ['Overrides ', (0, i.jsx)(n.code, { children: 'thumbShape' })] }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, i.jsx)(n.h4, { id: 'thumbprops', children: (0, i.jsx)(n.code, { children: 'ThumbProps' }) }),
+            '\n',
+            (0, i.jsxs)(n.table, {
+              children: [
+                (0, i.jsx)(n.thead, {
+                  children: (0, i.jsxs)(n.tr, {
+                    children: [
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Prop' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'center' }, children: 'Type' }),
+                      (0, i.jsx)(n.th, { style: { textAlign: 'left' }, children: 'Description' }),
+                    ],
+                  }),
+                }),
+                (0, i.jsxs)(n.tbody, {
+                  children: [
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'positionStyle' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'StyleProp' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children:
+                            'This style determines the position of the thumb and is a crucial element that should be included.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, { style: { textAlign: 'center' }, children: (0, i.jsx)(n.code, { children: 'width' }) }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'height' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'number' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: [
+                            'Extracted from the ',
+                            (0, i.jsx)(n.code, { children: 'thumbSize' }),
+                            " prop and it's important for thumb position calculation.",
+                          ],
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'adaptiveColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'White or black based on the contrast ratio.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'currentColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'SharedValue<string>' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: 'This shared value will update whenever the color changes.',
+                        }),
+                      ],
+                    }),
+                    (0, i.jsxs)(n.tr, {
+                      children: [
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'initialColor' }),
+                        }),
+                        (0, i.jsx)(n.td, {
+                          style: { textAlign: 'center' },
+                          children: (0, i.jsx)(n.code, { children: 'string' }),
+                        }),
+                        (0, i.jsxs)(n.td, {
+                          style: { textAlign: 'left' },
+                          children: ['The initial color value as a ', (0, i.jsx)(n.code, { children: 'string' }), '.'],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+            '\n',
+            (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Example Usage:' }), '\n'] }),
+            '\n',
+            (0, i.jsx)(n.pre, {
+              children: (0, i.jsx)(n.code, {
+                className: 'language-tsx',
+                children:
+                  "import Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { RenderThumbProps } from 'reanimated-color-picker';\n\nfunction MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {\n  const animatedStyle = useAnimatedStyle(() => ({\n    borderColor: adaptiveColor.value,\n    backgroundColor: currentColor.value,\n  }));\n\n  return (\n    <Animated.View\n      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: 'hidden' }, animatedStyle, positionStyle]}\n    >\n      <View style={{ backgroundColor: initialColor, width: '50%', height, alignSelf: 'flex-end' }} />\n    </Animated.View>\n  );\n}\n",
+              }),
+            }),
+          ],
+        });
+      }
+      function t(e = {}) {
+        const { wrapper: n } = { ...(0, r.a)(), ...e.components };
+        return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(d, { ...e }) }) : d(e);
+      }
+    },
+    2737: (e, n, l) => {
+      l.d(n, { Z: () => i });
+      const i =
+        'data:image/png;base64,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';
+    },
+    1151: (e, n, l) => {
+      l.d(n, { Z: () => c, a: () => t });
+      var i = l(7294);
+      const r = {},
+        d = i.createContext(r);
+      function t(e) {
+        const n = i.useContext(d);
+        return i.useMemo(
+          function () {
+            return 'function' == typeof e ? e(n) : { ...n, ...e };
+          },
+          [n, e],
+        );
+      }
+      function c(e) {
+        let n;
+        return (
+          (n = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(r)
+              : e.components || r
+            : t(e.components)),
+          i.createElement(d.Provider, { value: n }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/f299953f.8356c462.js b/docs/build/assets/js/f299953f.8356c462.js
deleted file mode 100644
index 33a519f..0000000
--- a/docs/build/assets/js/f299953f.8356c462.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[144],{6533:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Preview","description":"API documentation for Preview components","slug":"/category/preview","permalink":"/reanimated-color-picker/docs/category/preview","sidebar":"tutorialSidebar","navigation":{"previous":{"title":"OpacitySlider","permalink":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider"},"next":{"title":"Preview","permalink":"/reanimated-color-picker/docs/API/Preview/"}}}}')}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/f8409a7e.0aa7ddad.js b/docs/build/assets/js/f8409a7e.0aa7ddad.js
new file mode 100644
index 0000000..3f90a25
--- /dev/null
+++ b/docs/build/assets/js/f8409a7e.0aa7ddad.js
@@ -0,0 +1,492 @@
+'use strict';
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [206],
+  {
+    9325: (e, i, s) => {
+      s.r(i),
+        s.d(i, {
+          assets: () => d,
+          contentTitle: () => a,
+          default: () => o,
+          frontMatter: () => r,
+          metadata: () => t,
+          toc: () => c,
+        });
+      var l = s(5893),
+        n = s(1151);
+      const r = { sidebar_label: 'Introduction', sidebar_position: 1, hide_table_of_contents: !0 },
+        a = 'Reanimated Color Picker',
+        t = {
+          id: 'intro',
+          title: 'Reanimated Color Picker',
+          description: '- A Pure JavaScript Color Picker for React Native.',
+          source: '@site/docs/intro.mdx',
+          sourceDirName: '.',
+          slug: '/intro',
+          permalink: '/reanimated-color-picker/docs/intro',
+          draft: !1,
+          unlisted: !1,
+          tags: [],
+          version: 'current',
+          sidebarPosition: 1,
+          frontMatter: { sidebar_label: 'Introduction', sidebar_position: 1, hide_table_of_contents: !0 },
+          sidebar: 'tutorialSidebar',
+          next: { title: 'Installation', permalink: '/reanimated-color-picker/docs/Installation' },
+        },
+        d = {},
+        c = [
+          {
+            value: '- A Pure JavaScript Color Picker for React Native.',
+            id: '--a-pure-javascript-color-picker-for-react-native',
+            level: 4,
+          },
+          { value: '- Highly customizable.', id: '--highly-customizable', level: 4 },
+          {
+            value: '- Supports IOS, Android, Expo, and Web platforms.',
+            id: '--supports-ios-android-expo-and-web-platforms',
+            level: 4,
+          },
+          { value: '- Supports right-to-left (RTL) layouts.', id: '--supports-right-to-left-rtl-layouts', level: 4 },
+          { value: '1. Installation', id: '1-installation', level: 3 },
+          { value: '2. Usage', id: '2-usage', level: 3 },
+          { value: '3. API', id: '3-api', level: 3 },
+          { value: '4. ColorKit', id: '4-colorkit', level: 3 },
+          { value: '5. Examples', id: '5-examples', level: 3 },
+        ];
+      function h(e) {
+        const i = {
+          a: 'a',
+          h1: 'h1',
+          h3: 'h3',
+          h4: 'h4',
+          img: 'img',
+          li: 'li',
+          p: 'p',
+          strong: 'strong',
+          ul: 'ul',
+          ...(0, n.a)(),
+          ...e.components,
+        };
+        return (0, l.jsxs)(l.Fragment, {
+          children: [
+            (0, l.jsx)(i.h1, { id: 'reanimated-color-picker', children: 'Reanimated Color Picker' }),
+            '\n',
+            (0, l.jsx)(i.h4, {
+              id: '--a-pure-javascript-color-picker-for-react-native',
+              children: '- A Pure JavaScript Color Picker for React Native.',
+            }),
+            '\n',
+            (0, l.jsx)(i.h4, { id: '--highly-customizable', children: '- Highly customizable.' }),
+            '\n',
+            (0, l.jsx)(i.h4, {
+              id: '--supports-ios-android-expo-and-web-platforms',
+              children: '- Supports IOS, Android, Expo, and Web platforms.',
+            }),
+            '\n',
+            (0, l.jsx)(i.h4, { id: '--supports-right-to-left-rtl-layouts', children: '- Supports right-to-left (RTL) layouts.' }),
+            '\n',
+            (0, l.jsx)('div', {
+              className: 'example-images',
+              children: (0, l.jsxs)(i.p, {
+                children: [
+                  (0, l.jsx)(i.img, { alt: 'Example_1', src: s(9391).Z + '', width: '240', height: '352' }),
+                  '\n',
+                  (0, l.jsx)(i.img, { alt: 'Example_7', src: s(4107).Z + '', width: '244', height: '352' }),
+                ],
+              }),
+            }),
+            '\n',
+            (0, l.jsx)('div', {
+              className: 'example-images',
+              children: (0, l.jsxs)(i.p, {
+                children: [
+                  (0, l.jsx)(i.img, { alt: 'Example_2', src: s(9736).Z + '', width: '240', height: '340' }),
+                  ' ',
+                  (0, l.jsx)(i.img, { alt: 'Example_3', src: s(4725).Z + '', width: '240', height: '340' }),
+                ],
+              }),
+            }),
+            '\n',
+            (0, l.jsx)('div', {
+              className: 'example-images',
+              children: (0, l.jsxs)(i.p, {
+                children: [
+                  (0, l.jsx)(i.img, { alt: 'Example_4', src: s(2222).Z + '', width: '240', height: '434' }),
+                  ' ',
+                  (0, l.jsx)(i.img, { alt: 'Example_5', src: s(629).Z + '', width: '240', height: '435' }),
+                ],
+              }),
+            }),
+            '\n',
+            (0, l.jsx)('div', {
+              className: 'example-images',
+              children: (0, l.jsxs)(i.p, {
+                children: [
+                  (0, l.jsx)(i.img, { alt: 'Example_8', src: s(2429).Z + '', width: '240', height: '340' }),
+                  ' ',
+                  (0, l.jsx)(i.img, { alt: 'Example_9', src: s(7995).Z + '', width: '217', height: '340' }),
+                ],
+              }),
+            }),
+            '\n',
+            (0, l.jsx)('div', {
+              className: 'example-images',
+              children: (0, l.jsxs)(i.p, {
+                children: [
+                  (0, l.jsx)(i.img, { alt: 'Example_10', src: s(2656).Z + '', width: '252', height: '375' }),
+                  ' ',
+                  (0, l.jsx)(i.img, { alt: 'Example_11', src: s(9799).Z + '', width: '228', height: '375' }),
+                ],
+              }),
+            }),
+            '\n',
+            (0, l.jsx)('div', {
+              className: 'example-images',
+              children: (0, l.jsxs)(i.p, {
+                children: [
+                  (0, l.jsx)(i.img, { alt: 'Example_6', src: s(3452).Z + '', width: '240', height: '278' }),
+                  ' ',
+                  (0, l.jsx)(i.img, { alt: 'Example_12', src: s(8681).Z + '', width: '230', height: '278' }),
+                ],
+              }),
+            }),
+            '\n',
+            (0, l.jsx)(i.h1, { id: 'table-of-contents', children: 'Table of contents' }),
+            '\n',
+            (0, l.jsxs)(i.h3, {
+              id: '1-installation',
+              children: ['1. ', (0, l.jsx)(i.a, { href: './Installation', children: 'Installation' })],
+            }),
+            '\n',
+            (0, l.jsxs)(i.h3, { id: '2-usage', children: ['2. ', (0, l.jsx)(i.a, { href: './Usage', children: 'Usage' })] }),
+            '\n',
+            (0, l.jsxs)(i.h3, { id: '3-api', children: ['3. ', (0, l.jsx)(i.a, { href: './category/api', children: 'API' })] }),
+            '\n',
+            (0, l.jsxs)(i.ul, {
+              children: [
+                '\n',
+                (0, l.jsxs)(i.li, {
+                  children: [
+                    '\n',
+                    (0, l.jsx)(i.p, {
+                      children: (0, l.jsx)(i.a, { href: './API/ColorPicker', children: 'ColorPicker Wrapper' }),
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(i.li, {
+                  children: [
+                    '\n',
+                    (0, l.jsx)(i.p, {
+                      children: (0, l.jsx)(i.a, {
+                        href: './category/Panels',
+                        children: (0, l.jsx)(i.strong, { children: 'Panels' }),
+                      }),
+                    }),
+                    '\n',
+                    (0, l.jsxs)(i.ul, {
+                      children: [
+                        '\n',
+                        (0, l.jsx)(i.li, { children: (0, l.jsx)(i.a, { href: './API/Panels/Panel1', children: 'Panel1' }) }),
+                        '\n',
+                        (0, l.jsx)(i.li, { children: (0, l.jsx)(i.a, { href: './API/Panels/Panel2', children: 'Panel2' }) }),
+                        '\n',
+                        (0, l.jsx)(i.li, { children: (0, l.jsx)(i.a, { href: './API/Panels/Panel3', children: 'Panel3' }) }),
+                        '\n',
+                        (0, l.jsx)(i.li, { children: (0, l.jsx)(i.a, { href: './API/Panels/Panel4', children: 'Panel4' }) }),
+                        '\n',
+                        (0, l.jsx)(i.li, { children: (0, l.jsx)(i.a, { href: './API/Panels/Panel5', children: 'Panel5' }) }),
+                        '\n',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+                (0, l.jsxs)(i.li, {
+                  children: [
+                    '\n',
+                    (0, l.jsx)(i.p, {
+                      children: (0, l.jsx)(i.a, {
+                        href: './category/Sliders',
+                        children: (0, l.jsx)(i.strong, { children: 'Sliders' }),
+                      }),
+                    }),
+                    '\n',
+                    (0, l.jsxs)(i.ul, {
+                      children: [
+                        '\n',
+                        (0, l.jsxs)(i.li, {
+                          children: [
+                            '\n',
+                            (0, l.jsx)(i.p, {
+                              children: (0, l.jsx)(i.a, {
+                                href: './category/Hue',
+                                children: (0, l.jsx)(i.strong, { children: 'Hue' }),
+                              }),
+                            }),
+                            '\n',
+                            (0, l.jsxs)(i.ul, {
+                              children: [
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Sliders/Hue/HueSlider', children: 'HueSlider' }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Sliders/Hue/HueCircular', children: 'HueCircular' }),
+                                }),
+                                '\n',
+                              ],
+                            }),
+                            '\n',
+                          ],
+                        }),
+                        '\n',
+                        (0, l.jsxs)(i.li, {
+                          children: [
+                            '\n',
+                            (0, l.jsx)(i.p, {
+                              children: (0, l.jsx)(i.a, {
+                                href: './category/HSB',
+                                children: (0, l.jsx)(i.strong, { children: 'HSB' }),
+                              }),
+                            }),
+                            '\n',
+                            (0, l.jsxs)(i.ul, {
+                              children: [
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, {
+                                    href: './API/Sliders/HSB/BrightnessSlider',
+                                    children: 'BrightnessSlider',
+                                  }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, {
+                                    href: './API/Sliders/HSB/SaturationSlider',
+                                    children: 'SaturationSlider',
+                                  }),
+                                }),
+                                '\n',
+                              ],
+                            }),
+                            '\n',
+                          ],
+                        }),
+                        '\n',
+                        (0, l.jsxs)(i.li, {
+                          children: [
+                            '\n',
+                            (0, l.jsx)(i.p, {
+                              children: (0, l.jsx)(i.a, {
+                                href: './category/HSL',
+                                children: (0, l.jsx)(i.strong, { children: 'HSL' }),
+                              }),
+                            }),
+                            '\n',
+                            (0, l.jsxs)(i.ul, {
+                              children: [
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, {
+                                    href: './API/Sliders/HSL/LuminanceSlider',
+                                    children: 'LuminanceSlider',
+                                  }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, {
+                                    href: './API/Sliders/HSL/HSLSaturationSlider',
+                                    children: 'HSLSaturationSlider',
+                                  }),
+                                }),
+                                '\n',
+                              ],
+                            }),
+                            '\n',
+                          ],
+                        }),
+                        '\n',
+                        (0, l.jsxs)(i.li, {
+                          children: [
+                            '\n',
+                            (0, l.jsx)(i.p, {
+                              children: (0, l.jsx)(i.a, {
+                                href: './category/RGB',
+                                children: (0, l.jsx)(i.strong, { children: 'HSL' }),
+                              }),
+                            }),
+                            '\n',
+                            (0, l.jsxs)(i.ul, {
+                              children: [
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Sliders/RGB/RedSlider', children: 'RedSlider' }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Sliders/RGB/GreenSlider', children: 'GreenSlider' }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Sliders/RGB/BlueSlider', children: 'BlueSlider' }),
+                                }),
+                                '\n',
+                              ],
+                            }),
+                            '\n',
+                          ],
+                        }),
+                        '\n',
+                        (0, l.jsxs)(i.li, {
+                          children: [
+                            '\n',
+                            (0, l.jsx)(i.p, {
+                              children: (0, l.jsx)(i.a, { href: './API/Sliders/OpacitySlider', children: 'OpacitySlider' }),
+                            }),
+                            '\n',
+                          ],
+                        }),
+                        '\n',
+                        (0, l.jsxs)(i.li, {
+                          children: [
+                            '\n',
+                            (0, l.jsx)(i.p, {
+                              children: (0, l.jsx)(i.a, {
+                                href: './category/Preview',
+                                children: (0, l.jsx)(i.strong, { children: 'Preview' }),
+                              }),
+                            }),
+                            '\n',
+                            (0, l.jsxs)(i.ul, {
+                              children: [
+                                '\n',
+                                (0, l.jsx)(i.li, { children: (0, l.jsx)(i.a, { href: './API/Preview', children: 'Preview' }) }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Preview/PreviewText', children: 'PreviewText' }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Preview/InputWidget', children: 'InputWidget' }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Preview/Swatches', children: 'Swatches' }),
+                                }),
+                                '\n',
+                                (0, l.jsx)(i.li, {
+                                  children: (0, l.jsx)(i.a, { href: './API/Preview/ExtraThumb', children: 'ExtraThumb' }),
+                                }),
+                                '\n',
+                              ],
+                            }),
+                            '\n',
+                          ],
+                        }),
+                        '\n',
+                      ],
+                    }),
+                    '\n',
+                  ],
+                }),
+                '\n',
+              ],
+            }),
+            '\n',
+            (0, l.jsxs)(i.h3, {
+              id: '4-colorkit',
+              children: ['4. ', (0, l.jsx)(i.a, { href: './ColorKit', children: 'ColorKit' })],
+            }),
+            '\n',
+            (0, l.jsxs)(i.h3, {
+              id: '5-examples',
+              children: ['5. ', (0, l.jsx)(i.a, { href: './Examples', children: 'Examples' })],
+            }),
+          ],
+        });
+      }
+      function o(e = {}) {
+        const { wrapper: i } = { ...(0, n.a)(), ...e.components };
+        return i ? (0, l.jsx)(i, { ...e, children: (0, l.jsx)(h, { ...e }) }) : h(e);
+      }
+    },
+    9391: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_1-0ed7e534ba652c042cf6754d8c149bef.png';
+    },
+    2656: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_10-731b20b59e6c13fa697c1951b32f1616.png';
+    },
+    9799: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_11-21b588267bf89dfaa5f67cc80507a7ec.png';
+    },
+    8681: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_12-ee0469e990f3ae0d1507fb1466bb7c3e.png';
+    },
+    9736: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_2-350479b77ee618f64f2fdcb3827e8d08.png';
+    },
+    4725: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_3-174fa0683db3c8e470687e7c3b50c423.png';
+    },
+    2222: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_4-3902fe7cb0699213de82952799f49181.png';
+    },
+    629: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_5-cef58d35c07395a6f562cdb3c417ee54.png';
+    },
+    3452: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_6-7747b4e33a80534c65d19bf5daef8399.png';
+    },
+    4107: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_7-f6591b25248729dcb1bef359e1802215.png';
+    },
+    2429: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_8-128db863c06d8621e2d3f7181c003866.png';
+    },
+    7995: (e, i, s) => {
+      s.d(i, { Z: () => l });
+      const l = s.p + 'assets/images/example_9-37a112525d3cfa90f12d537be5d1fbd4.png';
+    },
+    1151: (e, i, s) => {
+      s.d(i, { Z: () => t, a: () => a });
+      var l = s(7294);
+      const n = {},
+        r = l.createContext(n);
+      function a(e) {
+        const i = l.useContext(r);
+        return l.useMemo(
+          function () {
+            return 'function' == typeof e ? e(i) : { ...i, ...e };
+          },
+          [i, e],
+        );
+      }
+      function t(e) {
+        let i;
+        return (
+          (i = e.disableParentContext
+            ? 'function' == typeof e.components
+              ? e.components(n)
+              : e.components || n
+            : a(e.components)),
+          l.createElement(r.Provider, { value: i }, e.children)
+        );
+      }
+    },
+  },
+]);
diff --git a/docs/build/assets/js/f8409a7e.6f2e90a9.js b/docs/build/assets/js/f8409a7e.6f2e90a9.js
deleted file mode 100644
index cdc2c88..0000000
--- a/docs/build/assets/js/f8409a7e.6f2e90a9.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[903],{892:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_1-0ed7e534ba652c042cf6754d8c149bef.png"},951:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_2-350479b77ee618f64f2fdcb3827e8d08.png"},1059:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_6-7747b4e33a80534c65d19bf5daef8399.png"},2294:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_10-731b20b59e6c13fa697c1951b32f1616.png"},2372:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_12-ee0469e990f3ae0d1507fb1466bb7c3e.png"},2638:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_3-174fa0683db3c8e470687e7c3b50c423.png"},3341:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_8-128db863c06d8621e2d3f7181c003866.png"},3482:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_7-f6591b25248729dcb1bef359e1802215.png"},3649:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_4-3902fe7cb0699213de82952799f49181.png"},7044:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_9-37a112525d3cfa90f12d537be5d1fbd4.png"},7455:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>t,contentTitle:()=>d,default:()=>o,frontMatter:()=>a,metadata:()=>l,toc:()=>c});const l=JSON.parse('{"id":"intro","title":"Reanimated Color Picker","description":"- A Pure JavaScript Color Picker for React Native.","source":"@site/docs/intro.mdx","sourceDirName":".","slug":"/intro","permalink":"/reanimated-color-picker/docs/intro","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_label":"Introduction","sidebar_position":1,"hide_table_of_contents":true},"sidebar":"tutorialSidebar","next":{"title":"Installation","permalink":"/reanimated-color-picker/docs/Installation"}}');var n=s(4848),r=s(8453);const a={sidebar_label:"Introduction",sidebar_position:1,hide_table_of_contents:!0},d="Reanimated Color Picker",t={},c=[{value:"- A Pure JavaScript Color Picker for React Native.",id:"--a-pure-javascript-color-picker-for-react-native",level:4},{value:"- Highly customizable.",id:"--highly-customizable",level:4},{value:"- Supports IOS, Android, Expo, and Web platforms.",id:"--supports-ios-android-expo-and-web-platforms",level:4},{value:"- Supports right-to-left (RTL) layouts.",id:"--supports-right-to-left-rtl-layouts",level:4},{value:"1. Installation",id:"1-installation",level:3},{value:"2. Usage",id:"2-usage",level:3},{value:"3. API",id:"3-api",level:3},{value:"4. ColorKit",id:"4-colorkit",level:3},{value:"5. Examples",id:"5-examples",level:3}];function h(e){const i={a:"a",h1:"h1",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.header,{children:(0,n.jsx)(i.h1,{id:"reanimated-color-picker",children:"Reanimated Color Picker"})}),"\n",(0,n.jsx)(i.h4,{id:"--a-pure-javascript-color-picker-for-react-native",children:"- A Pure JavaScript Color Picker for React Native."}),"\n",(0,n.jsx)(i.h4,{id:"--highly-customizable",children:"- Highly customizable."}),"\n",(0,n.jsx)(i.h4,{id:"--supports-ios-android-expo-and-web-platforms",children:"- Supports IOS, Android, Expo, and Web platforms."}),"\n",(0,n.jsx)(i.h4,{id:"--supports-right-to-left-rtl-layouts",children:"- Supports right-to-left (RTL) layouts."}),"\n",(0,n.jsx)("div",{className:"example-images",children:(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.img,{alt:"Example_1",src:s(892).A+"",width:"240",height:"352"}),"\n",(0,n.jsx)(i.img,{alt:"Example_7",src:s(3482).A+"",width:"244",height:"352"})]})}),"\n",(0,n.jsx)("div",{className:"example-images",children:(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.img,{alt:"Example_2",src:s(951).A+"",width:"240",height:"340"})," ",(0,n.jsx)(i.img,{alt:"Example_3",src:s(2638).A+"",width:"240",height:"340"})]})}),"\n",(0,n.jsx)("div",{className:"example-images",children:(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.img,{alt:"Example_4",src:s(3649).A+"",width:"240",height:"434"})," ",(0,n.jsx)(i.img,{alt:"Example_5",src:s(9432).A+"",width:"240",height:"435"})]})}),"\n",(0,n.jsx)("div",{className:"example-images",children:(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.img,{alt:"Example_8",src:s(3341).A+"",width:"240",height:"340"})," ",(0,n.jsx)(i.img,{alt:"Example_9",src:s(7044).A+"",width:"217",height:"340"})]})}),"\n",(0,n.jsx)("div",{className:"example-images",children:(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.img,{alt:"Example_10",src:s(2294).A+"",width:"252",height:"375"})," ",(0,n.jsx)(i.img,{alt:"Example_11",src:s(9231).A+"",width:"228",height:"375"})]})}),"\n",(0,n.jsx)("div",{className:"example-images",children:(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.img,{alt:"Example_6",src:s(1059).A+"",width:"240",height:"278"})," ",(0,n.jsx)(i.img,{alt:"Example_12",src:s(2372).A+"",width:"230",height:"278"})]})}),"\n",(0,n.jsx)(i.h1,{id:"table-of-contents",children:"Table of contents"}),"\n",(0,n.jsxs)(i.h3,{id:"1-installation",children:["1. ",(0,n.jsx)(i.a,{href:"./Installation",children:"Installation"})]}),"\n",(0,n.jsxs)(i.h3,{id:"2-usage",children:["2. ",(0,n.jsx)(i.a,{href:"./Usage",children:"Usage"})]}),"\n",(0,n.jsxs)(i.h3,{id:"3-api",children:["3. ",(0,n.jsx)(i.a,{href:"./category/api",children:"API"})]}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./API/ColorPicker",children:"ColorPicker Wrapper"})}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./category/Panels",children:(0,n.jsx)(i.strong,{children:"Panels"})})}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Panels/Panel1",children:"Panel1"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Panels/Panel2",children:"Panel2"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Panels/Panel3",children:"Panel3"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Panels/Panel4",children:"Panel4"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Panels/Panel5",children:"Panel5"})}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./category/Sliders",children:(0,n.jsx)(i.strong,{children:"Sliders"})})}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./category/Hue",children:(0,n.jsx)(i.strong,{children:"Hue"})})}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/Hue/HueSlider",children:"HueSlider"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/Hue/HueCircular",children:"HueCircular"})}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./category/HSB",children:(0,n.jsx)(i.strong,{children:"HSB"})})}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/HSB/BrightnessSlider",children:"BrightnessSlider"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/HSB/SaturationSlider",children:"SaturationSlider"})}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./category/HSL",children:(0,n.jsx)(i.strong,{children:"HSL"})})}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/HSL/LuminanceSlider",children:"LuminanceSlider"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/HSL/HSLSaturationSlider",children:"HSLSaturationSlider"})}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./category/RGB",children:(0,n.jsx)(i.strong,{children:"HSL"})})}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/RGB/RedSlider",children:"RedSlider"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/RGB/GreenSlider",children:"GreenSlider"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/RGB/BlueSlider",children:"BlueSlider"})}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./API/Sliders/OpacitySlider",children:"OpacitySlider"})}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsx)(i.p,{children:(0,n.jsx)(i.a,{href:"./category/Preview",children:(0,n.jsx)(i.strong,{children:"Preview"})})}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Preview",children:"Preview"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Preview/PreviewText",children:"PreviewText"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Preview/InputWidget",children:"InputWidget"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Preview/Swatches",children:"Swatches"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"./API/Preview/ExtraThumb",children:"ExtraThumb"})}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.h3,{id:"4-colorkit",children:["4. ",(0,n.jsx)(i.a,{href:"./ColorKit",children:"ColorKit"})]}),"\n",(0,n.jsxs)(i.h3,{id:"5-examples",children:["5. ",(0,n.jsx)(i.a,{href:"./Examples",children:"Examples"})]})]})}function o(e={}){const{wrapper:i}={...(0,r.R)(),...e.components};return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},8453:(e,i,s)=>{s.d(i,{R:()=>a,x:()=>d});var l=s(6540);const n={},r=l.createContext(n);function a(e){const i=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function d(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),l.createElement(r.Provider,{value:i},e.children)}},9231:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_11-21b588267bf89dfaa5f67cc80507a7ec.png"},9432:(e,i,s)=>{s.d(i,{A:()=>l});const l=s.p+"assets/images/example_5-cef58d35c07395a6f562cdb3c417ee54.png"}}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/main.a2c80363.js b/docs/build/assets/js/main.a2c80363.js
new file mode 100644
index 0000000..cd2b0f6
--- /dev/null
+++ b/docs/build/assets/js/main.a2c80363.js
@@ -0,0 +1,17651 @@
+/*! For license information please see main.a2c80363.js.LICENSE.txt */
+(self.webpackChunkmy_docs = self.webpackChunkmy_docs || []).push([
+  [179],
+  {
+    723: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => p });
+      n(7294);
+      var r = n(8356),
+        a = n.n(r),
+        o = n(6887);
+      const i = {
+        '126391be': [() => n.e(985).then(n.bind(n, 7631)), '@site/docs/API/Preview/PreviewText.md', 7631],
+        '140a8099': [() => n.e(166).then(n.bind(n, 2290)), '@site/docs/API/Sliders/Hue/HueSlider.mdx', 2290],
+        '14eb3368': [() => Promise.all([n.e(532), n.e(817)]).then(n.bind(n, 4228)), '@theme/DocCategoryGeneratedIndexPage', 4228],
+        17896441: [() => Promise.all([n.e(532), n.e(349), n.e(918)]).then(n.bind(n, 7629)), '@theme/DocItem', 7629],
+        '2b9ac54a': [() => n.e(99).then(n.bind(n, 8526)), '@site/docs/API/Preview/InputWidget.md', 8526],
+        '2de8a64b': [() => n.e(454).then(n.bind(n, 8850)), '@site/docs/API/Panels/Panel2.mdx', 8850],
+        '2fc6c5ee': [() => n.e(639).then(n.bind(n, 7570)), '@site/docs/ColorKit.mdx', 7570],
+        '359ca393': [
+          () => n.e(241).then(n.t.bind(n, 5745, 19)),
+          'F:\\ReactNative\\reanimated-color-picker\\docs\\.docusaurus\\docusaurus-plugin-content-pages\\default\\plugin-route-context-module-100.json',
+          5745,
+        ],
+        '39eaec8f': [() => Promise.all([n.e(532), n.e(873)]).then(n.bind(n, 2783)), '@site/docs/Installation.mdx', 2783],
+        '4bdabec4': [
+          () => n.e(202).then(n.t.bind(n, 8920, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-preview-c96.json',
+          8920,
+        ],
+        '56316f3f': [() => n.e(257).then(n.bind(n, 280)), '@site/docs/API/Preview/Preview.md', 280],
+        '58a57edf': [() => n.e(943).then(n.bind(n, 1087)), '@site/docs/API/Sliders/RGB/RedSlider.mdx', 1087],
+        '5de8bf0b': [
+          () => n.e(928).then(n.t.bind(n, 9119, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-rgb-ddc.json',
+          9119,
+        ],
+        '5e95c892': [() => n.e(661).then(n.bind(n, 1892)), '@theme/DocsRoot', 1892],
+        '5e9f5e1a': [() => Promise.resolve().then(n.bind(n, 6809)), '@generated/docusaurus.config', 6809],
+        '63def8f5': [() => n.e(371).then(n.bind(n, 6443)), '@site/docs/API/Panels/Panel3.mdx', 6443],
+        '702bc698': [
+          () => n.e(756).then(n.t.bind(n, 1857, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-api-e4c.json',
+          1857,
+        ],
+        '7166dec0': [() => n.e(114).then(n.bind(n, 5928)), '@site/docs/API/Preview/Swatches.md', 5928],
+        '739c95ba': [
+          () => n.e(617).then(n.t.bind(n, 4029, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-hsl-df4.json',
+          4029,
+        ],
+        '79d873be': [() => n.e(622).then(n.bind(n, 508)), '@site/docs/API/Sliders/HSB/BrightnessSlider.mdx', 508],
+        '8771582a': [() => n.e(287).then(n.bind(n, 462)), '@site/docs/API/Panels/Panel5.mdx', 462],
+        '8bf99691': [() => n.e(405).then(n.bind(n, 3306)), '@site/docs/Examples.mdx', 3306],
+        '8d402cb0': [() => n.e(529).then(n.bind(n, 7757)), '@site/docs/API/Sliders/HSL/HSLSaturationSlider.mdx', 7757],
+        '90e27583': [() => n.e(839).then(n.bind(n, 5692)), '@site/docs/API/Preview/ExtraThumb.mdx', 5692],
+        '9180b37b': [() => n.e(998).then(n.bind(n, 779)), '@site/docs/API/Sliders/Hue/HueCircular.mdx', 779],
+        '932438b4': [() => n.e(390).then(n.bind(n, 4108)), '@site/docs/API/Sliders/RGB/BlueSlider.mdx', 4108],
+        '935f2afb': [() => n.e(53).then(n.t.bind(n, 1109, 19)), '~docs/default/version-current-metadata-prop-751.json', 1109],
+        '94e8e772': [() => n.e(786).then(n.bind(n, 8248)), '@site/docs/API/Sliders/OpacitySlider.mdx', 8248],
+        '9edb15d8': [() => n.e(404).then(n.bind(n, 6731)), '@site/docs/API/Sliders/RGB/GreenSlider.mdx', 6731],
+        a44a6861: [() => n.e(181).then(n.bind(n, 4013)), '@site/docs/API/Panels/Panel1.mdx', 4013],
+        a7bd4aaa: [() => n.e(518).then(n.bind(n, 8564)), '@theme/DocVersionRoot', 8564],
+        a94703ab: [() => Promise.all([n.e(532), n.e(368)]).then(n.bind(n, 2674)), '@theme/DocRoot', 2674],
+        ba30bb47: [() => n.e(387).then(n.bind(n, 8667)), '@site/docs/API/Sliders/HSL/LuminanceSlider.mdx', 8667],
+        be41ce4f: [
+          () => n.e(447).then(n.t.bind(n, 566, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-hue-d90.json',
+          566,
+        ],
+        bf417703: [() => n.e(476).then(n.bind(n, 9574)), '@site/docs/Usage.md', 9574],
+        c098eb0d: [
+          () => n.e(412).then(n.t.bind(n, 2649, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-panels-f4c.json',
+          2649,
+        ],
+        c23bd39a: [() => n.e(875).then(n.bind(n, 8311)), '@site/docs/API/Panels/Panel4.mdx', 8311],
+        c4f5d8e4: [() => Promise.all([n.e(532), n.e(195)]).then(n.bind(n, 9294)), '@site/src/pages/index.js', 9294],
+        c7c5d45f: [
+          () => n.e(176).then(n.t.bind(n, 4410, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-sliders-dbc.json',
+          4410,
+        ],
+        d779562e: [
+          () => n.e(657).then(n.t.bind(n, 472, 19)),
+          '~docs/default/category-reanimated-color-pickerdocs-tutorialsidebar-category-hsb-1e6.json',
+          472,
+        ],
+        e0d6e6dc: [() => n.e(519).then(n.bind(n, 6646)), '@site/docs/API/Sliders/HSB/SaturationSlider.mdx', 6646],
+        e73706c6: [() => n.e(218).then(n.bind(n, 1962)), '@site/docs/API/Sliders/HSL/LuminanceCircular.mdx', 1962],
+        ef3214ef: [
+          () => n.e(782).then(n.t.bind(n, 3769, 19)),
+          'F:\\ReactNative\\reanimated-color-picker\\docs\\.docusaurus\\docusaurus-plugin-content-docs\\default\\plugin-route-context-module-100.json',
+          3769,
+        ],
+        efeb2804: [() => n.e(753).then(n.bind(n, 2097)), '@site/docs/API/ColorPicker.mdx', 2097],
+        f8409a7e: [() => n.e(206).then(n.bind(n, 9325)), '@site/docs/intro.mdx', 9325],
+      };
+      var l = n(5893);
+      function s(e) {
+        let { error: t, retry: n, pastDelay: r } = e;
+        return t
+          ? (0, l.jsxs)('div', {
+              style: {
+                textAlign: 'center',
+                color: '#fff',
+                backgroundColor: '#fa383e',
+                borderColor: '#fa383e',
+                borderStyle: 'solid',
+                borderRadius: '0.25rem',
+                borderWidth: '1px',
+                boxSizing: 'border-box',
+                display: 'block',
+                padding: '1rem',
+                flex: '0 0 50%',
+                marginLeft: '25%',
+                marginRight: '25%',
+                marginTop: '5rem',
+                maxWidth: '50%',
+                width: '100%',
+              },
+              children: [
+                (0, l.jsx)('p', { children: String(t) }),
+                (0, l.jsx)('div', { children: (0, l.jsx)('button', { type: 'button', onClick: n, children: 'Retry' }) }),
+              ],
+            })
+          : r
+            ? (0, l.jsx)('div', {
+                style: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' },
+                children: (0, l.jsx)('svg', {
+                  id: 'loader',
+                  style: { width: 128, height: 110, position: 'absolute', top: 'calc(100vh - 64%)' },
+                  viewBox: '0 0 45 45',
+                  xmlns: 'http://www.w3.org/2000/svg',
+                  stroke: '#61dafb',
+                  children: (0, l.jsxs)('g', {
+                    fill: 'none',
+                    fillRule: 'evenodd',
+                    transform: 'translate(1 1)',
+                    strokeWidth: '2',
+                    children: [
+                      (0, l.jsxs)('circle', {
+                        cx: '22',
+                        cy: '22',
+                        r: '6',
+                        strokeOpacity: '0',
+                        children: [
+                          (0, l.jsx)('animate', {
+                            attributeName: 'r',
+                            begin: '1.5s',
+                            dur: '3s',
+                            values: '6;22',
+                            calcMode: 'linear',
+                            repeatCount: 'indefinite',
+                          }),
+                          (0, l.jsx)('animate', {
+                            attributeName: 'stroke-opacity',
+                            begin: '1.5s',
+                            dur: '3s',
+                            values: '1;0',
+                            calcMode: 'linear',
+                            repeatCount: 'indefinite',
+                          }),
+                          (0, l.jsx)('animate', {
+                            attributeName: 'stroke-width',
+                            begin: '1.5s',
+                            dur: '3s',
+                            values: '2;0',
+                            calcMode: 'linear',
+                            repeatCount: 'indefinite',
+                          }),
+                        ],
+                      }),
+                      (0, l.jsxs)('circle', {
+                        cx: '22',
+                        cy: '22',
+                        r: '6',
+                        strokeOpacity: '0',
+                        children: [
+                          (0, l.jsx)('animate', {
+                            attributeName: 'r',
+                            begin: '3s',
+                            dur: '3s',
+                            values: '6;22',
+                            calcMode: 'linear',
+                            repeatCount: 'indefinite',
+                          }),
+                          (0, l.jsx)('animate', {
+                            attributeName: 'stroke-opacity',
+                            begin: '3s',
+                            dur: '3s',
+                            values: '1;0',
+                            calcMode: 'linear',
+                            repeatCount: 'indefinite',
+                          }),
+                          (0, l.jsx)('animate', {
+                            attributeName: 'stroke-width',
+                            begin: '3s',
+                            dur: '3s',
+                            values: '2;0',
+                            calcMode: 'linear',
+                            repeatCount: 'indefinite',
+                          }),
+                        ],
+                      }),
+                      (0, l.jsx)('circle', {
+                        cx: '22',
+                        cy: '22',
+                        r: '8',
+                        children: (0, l.jsx)('animate', {
+                          attributeName: 'r',
+                          begin: '0s',
+                          dur: '1.5s',
+                          values: '6;1;2;3;4;5;6',
+                          calcMode: 'linear',
+                          repeatCount: 'indefinite',
+                        }),
+                      }),
+                    ],
+                  }),
+                }),
+              })
+            : null;
+      }
+      var c = n(9670),
+        u = n(226);
+      function d(e, t) {
+        if ('*' === e)
+          return a()({
+            loading: s,
+            loader: () => n.e(772).then(n.bind(n, 1772)),
+            modules: ['@theme/NotFound'],
+            webpack: () => [1772],
+            render(e, t) {
+              const n = e.default;
+              return (0, l.jsx)(u.z, { value: { plugin: { name: 'native', id: 'default' } }, children: (0, l.jsx)(n, { ...t }) });
+            },
+          });
+        const r = o[`${e}-${t}`],
+          d = {},
+          p = [],
+          f = [],
+          m = (0, c.Z)(r);
+        return (
+          Object.entries(m).forEach(e => {
+            let [t, n] = e;
+            const r = i[n];
+            r && ((d[t] = r[0]), p.push(r[1]), f.push(r[2]));
+          }),
+          a().Map({
+            loading: s,
+            loader: d,
+            modules: p,
+            webpack: () => f,
+            render(t, n) {
+              const a = JSON.parse(JSON.stringify(r));
+              Object.entries(t).forEach(t => {
+                let [n, r] = t;
+                const o = r.default;
+                if (!o)
+                  throw new Error(
+                    `The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`,
+                  );
+                ('object' != typeof o && 'function' != typeof o) ||
+                  Object.keys(r)
+                    .filter(e => 'default' !== e)
+                    .forEach(e => {
+                      o[e] = r[e];
+                    });
+                let i = a;
+                const l = n.split('.');
+                l.slice(0, -1).forEach(e => {
+                  i = i[e];
+                }),
+                  (i[l[l.length - 1]] = o);
+              });
+              const o = a.__comp;
+              delete a.__comp;
+              const i = a.__context;
+              return delete a.__context, (0, l.jsx)(u.z, { value: i, children: (0, l.jsx)(o, { ...a, ...n }) });
+            },
+          })
+        );
+      }
+      const p = [
+        {
+          path: '/reanimated-color-picker/docs',
+          component: d('/reanimated-color-picker/docs', '08c'),
+          routes: [
+            {
+              path: '/reanimated-color-picker/docs',
+              component: d('/reanimated-color-picker/docs', '1ce'),
+              routes: [
+                {
+                  path: '/reanimated-color-picker/docs',
+                  component: d('/reanimated-color-picker/docs', 'c34'),
+                  routes: [
+                    {
+                      path: '/reanimated-color-picker/docs/API/ColorPicker',
+                      component: d('/reanimated-color-picker/docs/API/ColorPicker', '3ec'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Panels/Panel1',
+                      component: d('/reanimated-color-picker/docs/API/Panels/Panel1', '6de'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Panels/Panel2',
+                      component: d('/reanimated-color-picker/docs/API/Panels/Panel2', '9e0'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Panels/Panel3',
+                      component: d('/reanimated-color-picker/docs/API/Panels/Panel3', 'e86'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Panels/Panel4',
+                      component: d('/reanimated-color-picker/docs/API/Panels/Panel4', 'c32'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Panels/Panel5',
+                      component: d('/reanimated-color-picker/docs/API/Panels/Panel5', '82a'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Preview/',
+                      component: d('/reanimated-color-picker/docs/API/Preview/', '42a'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Preview/ExtraThumb',
+                      component: d('/reanimated-color-picker/docs/API/Preview/ExtraThumb', '028'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Preview/InputWidget',
+                      component: d('/reanimated-color-picker/docs/API/Preview/InputWidget', '68e'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Preview/PreviewText',
+                      component: d('/reanimated-color-picker/docs/API/Preview/PreviewText', '2fe'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Preview/Swatches',
+                      component: d('/reanimated-color-picker/docs/API/Preview/Swatches', 'b61'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider', '341'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider', '709'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider', '6ef'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular', '866'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider', '4c1'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular', 'a31'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider', 'a97'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/OpacitySlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/OpacitySlider', 'cfb'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider', 'bb4'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider', '0bf'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider',
+                      component: d('/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider', 'c15'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/api',
+                      component: d('/reanimated-color-picker/docs/category/api', 'c69'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/hsb',
+                      component: d('/reanimated-color-picker/docs/category/hsb', 'bfa'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/hsl',
+                      component: d('/reanimated-color-picker/docs/category/hsl', '988'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/hue',
+                      component: d('/reanimated-color-picker/docs/category/hue', '848'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/panels',
+                      component: d('/reanimated-color-picker/docs/category/panels', '15b'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/preview',
+                      component: d('/reanimated-color-picker/docs/category/preview', '32f'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/rgb',
+                      component: d('/reanimated-color-picker/docs/category/rgb', '90c'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/category/sliders',
+                      component: d('/reanimated-color-picker/docs/category/sliders', '69c'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/ColorKit',
+                      component: d('/reanimated-color-picker/docs/ColorKit', 'e87'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/Examples',
+                      component: d('/reanimated-color-picker/docs/Examples', 'e49'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/Installation',
+                      component: d('/reanimated-color-picker/docs/Installation', 'aff'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/intro',
+                      component: d('/reanimated-color-picker/docs/intro', '3bf'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                    {
+                      path: '/reanimated-color-picker/docs/Usage',
+                      component: d('/reanimated-color-picker/docs/Usage', '8c3'),
+                      exact: !0,
+                      sidebar: 'tutorialSidebar',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        { path: '/reanimated-color-picker/', component: d('/reanimated-color-picker/', 'ee5'), exact: !0 },
+        { path: '*', component: d('*') },
+      ];
+    },
+    8934: (e, t, n) => {
+      'use strict';
+      n.d(t, { _: () => o, t: () => i });
+      var r = n(7294),
+        a = n(5893);
+      const o = r.createContext(!1);
+      function i(e) {
+        let { children: t } = e;
+        const [n, i] = (0, r.useState)(!1);
+        return (
+          (0, r.useEffect)(() => {
+            i(!0);
+          }, []),
+          (0, a.jsx)(o.Provider, { value: n, children: t })
+        );
+      }
+    },
+    7221: (e, t, n) => {
+      'use strict';
+      var r = n(7294),
+        a = n(745),
+        o = n(3727),
+        i = n(405),
+        l = n(412);
+      const s = [n(2497), n(3310), n(8320), n(2295)];
+      var c = n(723),
+        u = n(6550),
+        d = n(8790),
+        p = n(5893);
+      function f(e) {
+        let { children: t } = e;
+        return (0, p.jsx)(p.Fragment, { children: t });
+      }
+      var m = n(5742),
+        h = n(2263),
+        g = n(4996),
+        y = n(6668),
+        b = n(1944),
+        v = n(4711),
+        w = n(9727),
+        k = n(3320),
+        S = n(8780),
+        x = n(197);
+      function E() {
+        const {
+            i18n: { currentLocale: e, defaultLocale: t, localeConfigs: n },
+          } = (0, h.Z)(),
+          r = (0, v.l)(),
+          a = n[e].htmlLang,
+          o = e => e.replace('-', '_');
+        return (0, p.jsxs)(m.Z, {
+          children: [
+            Object.entries(n).map(e => {
+              let [t, { htmlLang: n }] = e;
+              return (0, p.jsx)(
+                'link',
+                { rel: 'alternate', href: r.createUrl({ locale: t, fullyQualified: !0 }), hrefLang: n },
+                t,
+              );
+            }),
+            (0, p.jsx)('link', { rel: 'alternate', href: r.createUrl({ locale: t, fullyQualified: !0 }), hrefLang: 'x-default' }),
+            (0, p.jsx)('meta', { property: 'og:locale', content: o(a) }),
+            Object.values(n)
+              .filter(e => a !== e.htmlLang)
+              .map(e => (0, p.jsx)('meta', { property: 'og:locale:alternate', content: o(e.htmlLang) }, `meta-og-${e.htmlLang}`)),
+          ],
+        });
+      }
+      function C(e) {
+        let { permalink: t } = e;
+        const {
+            siteConfig: { url: n },
+          } = (0, h.Z)(),
+          r = (function () {
+            const {
+                siteConfig: { url: e, baseUrl: t, trailingSlash: n },
+              } = (0, h.Z)(),
+              { pathname: r } = (0, u.TH)();
+            return e + (0, S.applyTrailingSlash)((0, g.Z)(r), { trailingSlash: n, baseUrl: t });
+          })(),
+          a = t ? `${n}${t}` : r;
+        return (0, p.jsxs)(m.Z, {
+          children: [(0, p.jsx)('meta', { property: 'og:url', content: a }), (0, p.jsx)('link', { rel: 'canonical', href: a })],
+        });
+      }
+      function _() {
+        const {
+            i18n: { currentLocale: e },
+          } = (0, h.Z)(),
+          { metadata: t, image: n } = (0, y.L)();
+        return (0, p.jsxs)(p.Fragment, {
+          children: [
+            (0, p.jsxs)(m.Z, {
+              children: [
+                (0, p.jsx)('meta', { name: 'twitter:card', content: 'summary_large_image' }),
+                (0, p.jsx)('body', { className: w.h }),
+              ],
+            }),
+            n && (0, p.jsx)(b.d, { image: n }),
+            (0, p.jsx)(C, {}),
+            (0, p.jsx)(E, {}),
+            (0, p.jsx)(x.Z, { tag: k.HX, locale: e }),
+            (0, p.jsx)(m.Z, { children: t.map((e, t) => (0, p.jsx)('meta', { ...e }, t)) }),
+          ],
+        });
+      }
+      const P = new Map();
+      function T(e) {
+        if (P.has(e.pathname)) return { ...e, pathname: P.get(e.pathname) };
+        if (
+          (0, d.f)(c.Z, e.pathname).some(e => {
+            let { route: t } = e;
+            return !0 === t.exact;
+          })
+        )
+          return P.set(e.pathname, e.pathname), e;
+        const t = e.pathname.trim().replace(/(?:\/index)?\.html$/, '') || '/';
+        return P.set(e.pathname, t), { ...e, pathname: t };
+      }
+      var A = n(8934),
+        L = n(8940),
+        j = n(469);
+      function R(e) {
+        for (var t = arguments.length, n = new Array(t > 1 ? t - 1 : 0), r = 1; r < t; r++) n[r - 1] = arguments[r];
+        const a = s.map(t => {
+          const r = t.default?.[e] ?? t[e];
+          return r?.(...n);
+        });
+        return () => a.forEach(e => e?.());
+      }
+      const I = function (e) {
+        let { children: t, location: n, previousLocation: r } = e;
+        return (
+          (0, j.Z)(() => {
+            r !== n &&
+              (!(function (e) {
+                let { location: t, previousLocation: n } = e;
+                if (!n) return;
+                const r = t.pathname === n.pathname,
+                  a = t.hash === n.hash,
+                  o = t.search === n.search;
+                if (r && a && !o) return;
+                const { hash: i } = t;
+                if (i) {
+                  const e = decodeURIComponent(i.substring(1)),
+                    t = document.getElementById(e);
+                  t?.scrollIntoView();
+                } else window.scrollTo(0, 0);
+              })({ location: n, previousLocation: r }),
+              R('onRouteDidUpdate', { previousLocation: r, location: n }));
+          }, [r, n]),
+          t
+        );
+      };
+      function N(e) {
+        const t = Array.from(new Set([e, decodeURI(e)]))
+          .map(e => (0, d.f)(c.Z, e))
+          .flat();
+        return Promise.all(t.map(e => e.route.component.preload?.()));
+      }
+      class O extends r.Component {
+        previousLocation;
+        routeUpdateCleanupCb;
+        constructor(e) {
+          super(e),
+            (this.previousLocation = null),
+            (this.routeUpdateCleanupCb = l.Z.canUseDOM
+              ? R('onRouteUpdate', { previousLocation: null, location: this.props.location })
+              : () => {}),
+            (this.state = { nextRouteHasLoaded: !0 });
+        }
+        shouldComponentUpdate(e, t) {
+          if (e.location === this.props.location) return t.nextRouteHasLoaded;
+          const n = e.location;
+          return (
+            (this.previousLocation = this.props.location),
+            this.setState({ nextRouteHasLoaded: !1 }),
+            (this.routeUpdateCleanupCb = R('onRouteUpdate', { previousLocation: this.previousLocation, location: n })),
+            N(n.pathname)
+              .then(() => {
+                this.routeUpdateCleanupCb(), this.setState({ nextRouteHasLoaded: !0 });
+              })
+              .catch(e => {
+                console.warn(e), window.location.reload();
+              }),
+            !1
+          );
+        }
+        render() {
+          const { children: e, location: t } = this.props;
+          return (0, p.jsx)(I, {
+            previousLocation: this.previousLocation,
+            location: t,
+            children: (0, p.jsx)(u.AW, { location: t, render: () => e }),
+          });
+        }
+      }
+      const D = O,
+        F = '__docusaurus-base-url-issue-banner-container',
+        M = '__docusaurus-base-url-issue-banner',
+        B = '__docusaurus-base-url-issue-banner-suggestion-container';
+      function z(e) {
+        return `\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n  var shouldInsert = typeof window['docusaurus'] === 'undefined';\n  shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n  var bannerContainer = document.createElement('div');\n  bannerContainer.id = '${F}';\n  var bannerHtml = ${JSON.stringify(
+          (function (e) {
+            return `\n<div id="${M}" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">${e}</span> ${'/' === e ? ' (default value)' : ''}</p>\n   <p>We suggest trying baseUrl = <span id="${B}" style="font-weight: bold; color: green;"></span></p>\n</div>\n`;
+          })(e),
+        ).replace(
+          /</g,
+          '\\<',
+        )};\n  bannerContainer.innerHTML = bannerHtml;\n  document.body.prepend(bannerContainer);\n  var suggestionContainer = document.getElementById('${B}');\n  var actualHomePagePath = window.location.pathname;\n  var suggestedBaseUrl = actualHomePagePath.substr(-1) === '/'\n        ? actualHomePagePath\n        : actualHomePagePath + '/';\n  suggestionContainer.innerHTML = suggestedBaseUrl;\n}\n`;
+      }
+      function $() {
+        const {
+          siteConfig: { baseUrl: e },
+        } = (0, h.Z)();
+        return (0, p.jsx)(p.Fragment, {
+          children: !l.Z.canUseDOM && (0, p.jsx)(m.Z, { children: (0, p.jsx)('script', { children: z(e) }) }),
+        });
+      }
+      function U() {
+        const {
+            siteConfig: { baseUrl: e, baseUrlIssueBanner: t },
+          } = (0, h.Z)(),
+          { pathname: n } = (0, u.TH)();
+        return t && n === e ? (0, p.jsx)($, {}) : null;
+      }
+      function H() {
+        const {
+            siteConfig: { favicon: e, title: t, noIndex: n },
+            i18n: { currentLocale: r, localeConfigs: a },
+          } = (0, h.Z)(),
+          o = (0, g.Z)(e),
+          { htmlLang: i, direction: l } = a[r];
+        return (0, p.jsxs)(m.Z, {
+          children: [
+            (0, p.jsx)('html', { lang: i, dir: l }),
+            (0, p.jsx)('title', { children: t }),
+            (0, p.jsx)('meta', { property: 'og:title', content: t }),
+            (0, p.jsx)('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }),
+            n && (0, p.jsx)('meta', { name: 'robots', content: 'noindex, nofollow' }),
+            e && (0, p.jsx)('link', { rel: 'icon', href: o }),
+          ],
+        });
+      }
+      var q = n(4763),
+        Z = n(2389);
+      function G() {
+        const e = (0, Z.Z)();
+        return (0, p.jsx)(m.Z, { children: (0, p.jsx)('html', { 'data-has-hydrated': e }) });
+      }
+      function W() {
+        const e = (0, d.H)(c.Z),
+          t = (0, u.TH)();
+        return (0, p.jsx)(q.Z, {
+          children: (0, p.jsx)(L.M, {
+            children: (0, p.jsxs)(A.t, {
+              children: [
+                (0, p.jsxs)(f, {
+                  children: [
+                    (0, p.jsx)(H, {}),
+                    (0, p.jsx)(_, {}),
+                    (0, p.jsx)(U, {}),
+                    (0, p.jsx)(D, { location: T(t), children: e }),
+                  ],
+                }),
+                (0, p.jsx)(G, {}),
+              ],
+            }),
+          }),
+        });
+      }
+      var V = n(6887);
+      const Q = (function (e) {
+        try {
+          return document.createElement('link').relList.supports(e);
+        } catch {
+          return !1;
+        }
+      })('prefetch')
+        ? function (e) {
+            return new Promise((t, n) => {
+              if ('undefined' == typeof document) return void n();
+              const r = document.createElement('link');
+              r.setAttribute('rel', 'prefetch'), r.setAttribute('href', e), (r.onload = () => t()), (r.onerror = () => n());
+              const a = document.getElementsByTagName('head')[0] ?? document.getElementsByName('script')[0]?.parentNode;
+              a?.appendChild(r);
+            });
+          }
+        : function (e) {
+            return new Promise((t, n) => {
+              const r = new XMLHttpRequest();
+              r.open('GET', e, !0),
+                (r.withCredentials = !0),
+                (r.onload = () => {
+                  200 === r.status ? t() : n();
+                }),
+                r.send(null);
+            });
+          };
+      var K = n(9670);
+      const Y = new Set(),
+        X = new Set(),
+        J = () => navigator.connection?.effectiveType.includes('2g') || navigator.connection?.saveData,
+        ee = {
+          prefetch(e) {
+            if (!(e => !J() && !X.has(e) && !Y.has(e))(e)) return !1;
+            Y.add(e);
+            const t = (0, d.f)(c.Z, e).flatMap(e => {
+              return (
+                (t = e.route.path),
+                Object.entries(V)
+                  .filter(e => {
+                    let [n] = e;
+                    return n.replace(/-[^-]+$/, '') === t;
+                  })
+                  .flatMap(e => {
+                    let [, t] = e;
+                    return Object.values((0, K.Z)(t));
+                  })
+              );
+              var t;
+            });
+            return Promise.all(
+              t.map(e => {
+                const t = n.gca(e);
+                return t && !t.includes('undefined') ? Q(t).catch(() => {}) : Promise.resolve();
+              }),
+            );
+          },
+          preload: e => !!(e => !J() && !X.has(e))(e) && (X.add(e), N(e)),
+        },
+        te = Object.freeze(ee),
+        ne = Boolean(!0);
+      if (l.Z.canUseDOM) {
+        window.docusaurus = te;
+        const e = document.getElementById('__docusaurus'),
+          t = (0, p.jsx)(i.B6, { children: (0, p.jsx)(o.VK, { children: (0, p.jsx)(W, {}) }) }),
+          n = (e, t) => {
+            console.error('Docusaurus React Root onRecoverableError:', e, t);
+          },
+          l = () => {
+            if (ne)
+              r.startTransition(() => {
+                a.hydrateRoot(e, t, { onRecoverableError: n });
+              });
+            else {
+              const o = a.createRoot(e, { onRecoverableError: n });
+              r.startTransition(() => {
+                o.render(t);
+              });
+            }
+          };
+        N(window.location.pathname).then(l);
+      }
+    },
+    8940: (e, t, n) => {
+      'use strict';
+      n.d(t, { _: () => d, M: () => p });
+      var r = n(7294),
+        a = n(6809);
+      const o = JSON.parse(
+          '{"docusaurus-plugin-content-docs":{"default":{"path":"/reanimated-color-picker/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/reanimated-color-picker/docs","mainDocId":"intro","docs":[{"id":"API/ColorPicker","path":"/reanimated-color-picker/docs/API/ColorPicker","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel1","path":"/reanimated-color-picker/docs/API/Panels/Panel1","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel2","path":"/reanimated-color-picker/docs/API/Panels/Panel2","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel3","path":"/reanimated-color-picker/docs/API/Panels/Panel3","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel4","path":"/reanimated-color-picker/docs/API/Panels/Panel4","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel5","path":"/reanimated-color-picker/docs/API/Panels/Panel5","sidebar":"tutorialSidebar"},{"id":"API/Preview/ExtraThumb","path":"/reanimated-color-picker/docs/API/Preview/ExtraThumb","sidebar":"tutorialSidebar"},{"id":"API/Preview/InputWidget","path":"/reanimated-color-picker/docs/API/Preview/InputWidget","sidebar":"tutorialSidebar"},{"id":"API/Preview/Preview","path":"/reanimated-color-picker/docs/API/Preview/","sidebar":"tutorialSidebar"},{"id":"API/Preview/PreviewText","path":"/reanimated-color-picker/docs/API/Preview/PreviewText","sidebar":"tutorialSidebar"},{"id":"API/Preview/Swatches","path":"/reanimated-color-picker/docs/API/Preview/Swatches","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSB/BrightnessSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSB/SaturationSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSL/HSLSaturationSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSL/LuminanceCircular","path":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSL/LuminanceSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/Hue/HueCircular","path":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular","sidebar":"tutorialSidebar"},{"id":"API/Sliders/Hue/HueSlider","path":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/OpacitySlider","path":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/RGB/BlueSlider","path":"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/RGB/GreenSlider","path":"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/RGB/RedSlider","path":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider","sidebar":"tutorialSidebar"},{"id":"ColorKit","path":"/reanimated-color-picker/docs/ColorKit","sidebar":"tutorialSidebar"},{"id":"Examples","path":"/reanimated-color-picker/docs/Examples","sidebar":"tutorialSidebar"},{"id":"Installation","path":"/reanimated-color-picker/docs/Installation","sidebar":"tutorialSidebar"},{"id":"intro","path":"/reanimated-color-picker/docs/intro","sidebar":"tutorialSidebar"},{"id":"Usage","path":"/reanimated-color-picker/docs/Usage","sidebar":"tutorialSidebar"},{"id":"/category/api","path":"/reanimated-color-picker/docs/category/api","sidebar":"tutorialSidebar"},{"id":"/category/panels","path":"/reanimated-color-picker/docs/category/panels","sidebar":"tutorialSidebar"},{"id":"/category/sliders","path":"/reanimated-color-picker/docs/category/sliders","sidebar":"tutorialSidebar"},{"id":"/category/hue","path":"/reanimated-color-picker/docs/category/hue","sidebar":"tutorialSidebar"},{"id":"/category/hsb","path":"/reanimated-color-picker/docs/category/hsb","sidebar":"tutorialSidebar"},{"id":"/category/hsl","path":"/reanimated-color-picker/docs/category/hsl","sidebar":"tutorialSidebar"},{"id":"/category/rgb","path":"/reanimated-color-picker/docs/category/rgb","sidebar":"tutorialSidebar"},{"id":"/category/preview","path":"/reanimated-color-picker/docs/category/preview","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/reanimated-color-picker/docs/intro","label":"Introduction"}}}}],"breadcrumbs":true}}}',
+        ),
+        i = JSON.parse(
+          '{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}',
+        );
+      var l = n(7529);
+      const s = JSON.parse(
+        '{"docusaurusVersion":"3.1.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.1.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.1.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.1.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.1.0"}}}',
+      );
+      var c = n(5893);
+      const u = { siteConfig: a.default, siteMetadata: s, globalData: o, i18n: i, codeTranslations: l },
+        d = r.createContext(u);
+      function p(e) {
+        let { children: t } = e;
+        return (0, c.jsx)(d.Provider, { value: u, children: t });
+      }
+    },
+    4763: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => f });
+      var r = n(7294),
+        a = n(412),
+        o = n(5742),
+        i = n(8780),
+        l = n(6040),
+        s = n(5893);
+      function c(e) {
+        let { error: t, tryAgain: n } = e;
+        return (0, s.jsxs)('div', {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            minHeight: '100vh',
+            width: '100%',
+            maxWidth: '80ch',
+            fontSize: '20px',
+            margin: '0 auto',
+            padding: '1rem',
+          },
+          children: [
+            (0, s.jsx)('h1', { style: { fontSize: '3rem' }, children: 'This page crashed' }),
+            (0, s.jsx)('button', {
+              type: 'button',
+              onClick: n,
+              style: { margin: '1rem 0', fontSize: '2rem', cursor: 'pointer', borderRadius: 20, padding: '1rem' },
+              children: 'Try again',
+            }),
+            (0, s.jsx)(u, { error: t }),
+          ],
+        });
+      }
+      function u(e) {
+        let { error: t } = e;
+        const n = (0, i.getErrorCausalChain)(t)
+          .map(e => e.message)
+          .join('\n\nCause:\n');
+        return (0, s.jsx)('p', { style: { whiteSpace: 'pre-wrap' }, children: n });
+      }
+      function d(e) {
+        let { error: t, tryAgain: n } = e;
+        return (0, s.jsxs)(f, {
+          fallback: () => (0, s.jsx)(c, { error: t, tryAgain: n }),
+          children: [
+            (0, s.jsx)(o.Z, { children: (0, s.jsx)('title', { children: 'Page Error' }) }),
+            (0, s.jsx)(l.Z, { children: (0, s.jsx)(c, { error: t, tryAgain: n }) }),
+          ],
+        });
+      }
+      const p = e => (0, s.jsx)(d, { ...e });
+      class f extends r.Component {
+        constructor(e) {
+          super(e), (this.state = { error: null });
+        }
+        componentDidCatch(e) {
+          a.Z.canUseDOM && this.setState({ error: e });
+        }
+        render() {
+          const { children: e } = this.props,
+            { error: t } = this.state;
+          if (t) {
+            const e = { error: t, tryAgain: () => this.setState({ error: null }) };
+            return (this.props.fallback ?? p)(e);
+          }
+          return e ?? null;
+        }
+      }
+    },
+    412: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => a });
+      const r = 'undefined' != typeof window && 'document' in window && 'createElement' in window.document,
+        a = {
+          canUseDOM: r,
+          canUseEventListeners: r && ('addEventListener' in window || 'attachEvent' in window),
+          canUseIntersectionObserver: r && 'IntersectionObserver' in window,
+          canUseViewport: r && 'screen' in window,
+        };
+    },
+    5742: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => o });
+      n(7294);
+      var r = n(405),
+        a = n(5893);
+      function o(e) {
+        return (0, a.jsx)(r.ql, { ...e });
+      }
+    },
+    3692: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => f });
+      var r = n(7294),
+        a = n(3727),
+        o = n(8780),
+        i = n(2263),
+        l = n(3919),
+        s = n(412),
+        c = n(8138),
+        u = n(4996),
+        d = n(5893);
+      function p(e, t) {
+        let {
+          isNavLink: n,
+          to: p,
+          href: f,
+          activeClassName: m,
+          isActive: h,
+          'data-noBrokenLinkCheck': g,
+          autoAddBaseUrl: y = !0,
+          ...b
+        } = e;
+        const {
+            siteConfig: { trailingSlash: v, baseUrl: w },
+          } = (0, i.Z)(),
+          { withBaseUrl: k } = (0, u.C)(),
+          S = (0, c.Z)(),
+          x = (0, r.useRef)(null);
+        (0, r.useImperativeHandle)(t, () => x.current);
+        const E = p || f;
+        const C = (0, l.Z)(E),
+          _ = E?.replace('pathname://', '');
+        let P = void 0 !== _ ? ((T = _), y && (e => e.startsWith('/'))(T) ? k(T) : T) : void 0;
+        var T;
+        P && C && (P = (0, o.applyTrailingSlash)(P, { trailingSlash: v, baseUrl: w }));
+        const A = (0, r.useRef)(!1),
+          L = n ? a.OL : a.rU,
+          j = s.Z.canUseIntersectionObserver,
+          R = (0, r.useRef)(),
+          I = () => {
+            A.current || null == P || (window.docusaurus.preload(P), (A.current = !0));
+          };
+        (0, r.useEffect)(
+          () => (
+            !j && C && null != P && window.docusaurus.prefetch(P),
+            () => {
+              j && R.current && R.current.disconnect();
+            }
+          ),
+          [R, P, j, C],
+        );
+        const N = P?.startsWith('#') ?? !1,
+          O = !P || !C || N;
+        return (
+          O || g || S.collectLink(P),
+          O
+            ? (0, d.jsx)('a', { ref: x, href: P, ...(E && !C && { target: '_blank', rel: 'noopener noreferrer' }), ...b })
+            : (0, d.jsx)(L, {
+                ...b,
+                onMouseEnter: I,
+                onTouchStart: I,
+                innerRef: e => {
+                  (x.current = e),
+                    j &&
+                      e &&
+                      C &&
+                      ((R.current = new window.IntersectionObserver(t => {
+                        t.forEach(t => {
+                          e === t.target &&
+                            (t.isIntersecting || t.intersectionRatio > 0) &&
+                            (R.current.unobserve(e), R.current.disconnect(), null != P && window.docusaurus.prefetch(P));
+                        });
+                      })),
+                      R.current.observe(e));
+                },
+                to: P,
+                ...(n && { isActive: h, activeClassName: m }),
+              })
+        );
+      }
+      const f = r.forwardRef(p);
+    },
+    1875: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => r });
+      const r = () => null;
+    },
+    5999: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => c, I: () => s });
+      var r = n(7294),
+        a = n(5893);
+      function o(e, t) {
+        const n = e.split(/(\{\w+\})/).map((e, n) => {
+          if (n % 2 == 1) {
+            const n = t?.[e.slice(1, -1)];
+            if (void 0 !== n) return n;
+          }
+          return e;
+        });
+        return n.some(e => (0, r.isValidElement)(e))
+          ? n.map((e, t) => ((0, r.isValidElement)(e) ? r.cloneElement(e, { key: t }) : e)).filter(e => '' !== e)
+          : n.join('');
+      }
+      var i = n(7529);
+      function l(e) {
+        let { id: t, message: n } = e;
+        if (void 0 === t && void 0 === n)
+          throw new Error(
+            'Docusaurus translation declarations must have at least a translation id or a default translation message',
+          );
+        return i[t ?? n] ?? n ?? t;
+      }
+      function s(e, t) {
+        let { message: n, id: r } = e;
+        return o(l({ message: n, id: r }), t);
+      }
+      function c(e) {
+        let { children: t, id: n, values: r } = e;
+        if (t && 'string' != typeof t)
+          throw (
+            (console.warn('Illegal <Translate> children', t),
+            new Error('The Docusaurus <Translate> component only accept simple string values'))
+          );
+        const i = l({ message: t, id: n });
+        return (0, a.jsx)(a.Fragment, { children: o(i, r) });
+      }
+    },
+    9935: (e, t, n) => {
+      'use strict';
+      n.d(t, { m: () => r });
+      const r = 'default';
+    },
+    3919: (e, t, n) => {
+      'use strict';
+      function r(e) {
+        return /^(?:\w*:|\/\/)/.test(e);
+      }
+      function a(e) {
+        return void 0 !== e && !r(e);
+      }
+      n.d(t, { Z: () => a, b: () => r });
+    },
+    4996: (e, t, n) => {
+      'use strict';
+      n.d(t, { C: () => i, Z: () => l });
+      var r = n(7294),
+        a = n(2263),
+        o = n(3919);
+      function i() {
+        const {
+            siteConfig: { baseUrl: e, url: t },
+          } = (0, a.Z)(),
+          n = (0, r.useCallback)(
+            (n, r) =>
+              (function (e, t, n, r) {
+                let { forcePrependBaseUrl: a = !1, absolute: i = !1 } = void 0 === r ? {} : r;
+                if (!n || n.startsWith('#') || (0, o.b)(n)) return n;
+                if (a) return t + n.replace(/^\//, '');
+                if (n === t.replace(/\/$/, '')) return t;
+                const l = n.startsWith(t) ? n : t + n.replace(/^\//, '');
+                return i ? e + l : l;
+              })(t, e, n, r),
+            [t, e],
+          );
+        return { withBaseUrl: n };
+      }
+      function l(e, t) {
+        void 0 === t && (t = {});
+        const { withBaseUrl: n } = i();
+        return n(e, t);
+      }
+    },
+    8138: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => i });
+      var r = n(7294);
+      n(5893);
+      const a = r.createContext({ collectAnchor: () => {}, collectLink: () => {} }),
+        o = () => (0, r.useContext)(a);
+      function i() {
+        return o();
+      }
+    },
+    2263: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => o });
+      var r = n(7294),
+        a = n(8940);
+      function o() {
+        return (0, r.useContext)(a._);
+      }
+    },
+    2389: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => o });
+      var r = n(7294),
+        a = n(8934);
+      function o() {
+        return (0, r.useContext)(a._);
+      }
+    },
+    469: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => a });
+      var r = n(7294);
+      const a = n(412).Z.canUseDOM ? r.useLayoutEffect : r.useEffect;
+    },
+    9670: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => a });
+      const r = e => 'object' == typeof e && !!e && Object.keys(e).length > 0;
+      function a(e) {
+        const t = {};
+        return (
+          (function e(n, a) {
+            Object.entries(n).forEach(n => {
+              let [o, i] = n;
+              const l = a ? `${a}.${o}` : o;
+              r(i) ? e(i, l) : (t[l] = i);
+            });
+          })(e),
+          t
+        );
+      }
+    },
+    226: (e, t, n) => {
+      'use strict';
+      n.d(t, { _: () => o, z: () => i });
+      var r = n(7294),
+        a = n(5893);
+      const o = r.createContext(null);
+      function i(e) {
+        let { children: t, value: n } = e;
+        const i = r.useContext(o),
+          l = (0, r.useMemo)(
+            () =>
+              (function (e) {
+                let { parent: t, value: n } = e;
+                if (!t) {
+                  if (!n) throw new Error('Unexpected: no Docusaurus route context found');
+                  if (!('plugin' in n)) throw new Error('Unexpected: Docusaurus topmost route context has no `plugin` attribute');
+                  return n;
+                }
+                const r = { ...t.data, ...n?.data };
+                return { plugin: t.plugin, data: r };
+              })({ parent: i, value: n }),
+            [i, n],
+          );
+        return (0, a.jsx)(o.Provider, { value: l, children: t });
+      }
+    },
+    143: (e, t, n) => {
+      'use strict';
+      n.d(t, { Iw: () => h, gA: () => p, _r: () => u, Jo: () => g, zh: () => d, yW: () => m, gB: () => f });
+      var r = n(6550),
+        a = n(2263),
+        o = n(9935);
+      function i(e, t) {
+        void 0 === t && (t = {});
+        const n = (function () {
+          const { globalData: e } = (0, a.Z)();
+          return e;
+        })()[e];
+        if (!n && t.failfast) throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);
+        return n;
+      }
+      const l = e => e.versions.find(e => e.isLast);
+      function s(e, t) {
+        const n = (function (e, t) {
+            const n = l(e);
+            return [...e.versions.filter(e => e !== n), n].find(e => !!(0, r.LX)(t, { path: e.path, exact: !1, strict: !1 }));
+          })(e, t),
+          a = n?.docs.find(e => !!(0, r.LX)(t, { path: e.path, exact: !0, strict: !1 }));
+        return {
+          activeVersion: n,
+          activeDoc: a,
+          alternateDocVersions: a
+            ? (function (t) {
+                const n = {};
+                return (
+                  e.versions.forEach(e => {
+                    e.docs.forEach(r => {
+                      r.id === t && (n[e.name] = r);
+                    });
+                  }),
+                  n
+                );
+              })(a.id)
+            : {},
+        };
+      }
+      const c = {},
+        u = () => i('docusaurus-plugin-content-docs') ?? c,
+        d = e =>
+          (function (e, t, n) {
+            void 0 === t && (t = o.m), void 0 === n && (n = {});
+            const r = i(e),
+              a = r?.[t];
+            if (!a && n.failfast) throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);
+            return a;
+          })('docusaurus-plugin-content-docs', e, { failfast: !0 });
+      function p(e) {
+        void 0 === e && (e = {});
+        const t = u(),
+          { pathname: n } = (0, r.TH)();
+        return (function (e, t, n) {
+          void 0 === n && (n = {});
+          const a = Object.entries(e)
+              .sort((e, t) => t[1].path.localeCompare(e[1].path))
+              .find(e => {
+                let [, n] = e;
+                return !!(0, r.LX)(t, { path: n.path, exact: !1, strict: !1 });
+              }),
+            o = a ? { pluginId: a[0], pluginData: a[1] } : void 0;
+          if (!o && n.failfast)
+            throw new Error(
+              `Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(
+                e,
+              )
+                .map(e => e.path)
+                .join(', ')}`,
+            );
+          return o;
+        })(t, n, e);
+      }
+      function f(e) {
+        return d(e).versions;
+      }
+      function m(e) {
+        const t = d(e);
+        return l(t);
+      }
+      function h(e) {
+        const t = d(e),
+          { pathname: n } = (0, r.TH)();
+        return s(t, n);
+      }
+      function g(e) {
+        const t = d(e),
+          { pathname: n } = (0, r.TH)();
+        return (function (e, t) {
+          const n = l(e);
+          return { latestDocSuggestion: s(e, t).alternateDocVersions[n.name], latestVersionSuggestion: n };
+        })(t, n);
+      }
+    },
+    8320: (e, t, n) => {
+      'use strict';
+      n.r(t), n.d(t, { default: () => o });
+      var r = n(4865),
+        a = n.n(r);
+      a().configure({ showSpinner: !1 });
+      const o = {
+        onRouteUpdate(e) {
+          let { location: t, previousLocation: n } = e;
+          if (n && t.pathname !== n.pathname) {
+            const e = window.setTimeout(() => {
+              a().start();
+            }, 200);
+            return () => window.clearTimeout(e);
+          }
+        },
+        onRouteDidUpdate() {
+          a().done();
+        },
+      };
+    },
+    3310: (e, t, n) => {
+      'use strict';
+      n.r(t);
+      var r = n(2573),
+        a = n(6809);
+      !(function (e) {
+        const {
+            themeConfig: { prism: t },
+          } = a.default,
+          { additionalLanguages: r } = t;
+        (globalThis.Prism = e),
+          r.forEach(e => {
+            'php' === e && n(6854), n(6726)(`./prism-${e}`);
+          }),
+          delete globalThis.Prism;
+      })(r.p1);
+    },
+    2503: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => u });
+      n(7294);
+      var r = n(512),
+        a = n(5999),
+        o = n(6668),
+        i = n(3692),
+        l = n(8138);
+      const s = {
+        anchorWithStickyNavbar: 'anchorWithStickyNavbar_LWe7',
+        anchorWithHideOnScrollNavbar: 'anchorWithHideOnScrollNavbar_WYt5',
+      };
+      var c = n(5893);
+      function u(e) {
+        let { as: t, id: n, ...u } = e;
+        const d = (0, l.Z)(),
+          {
+            navbar: { hideOnScroll: p },
+          } = (0, o.L)();
+        if ('h1' === t || !n) return (0, c.jsx)(t, { ...u, id: void 0 });
+        d.collectAnchor(n);
+        const f = (0, a.I)(
+          { id: 'theme.common.headingLinkTitle', message: 'Direct link to {heading}', description: 'Title for link to heading' },
+          { heading: 'string' == typeof u.children ? u.children : n },
+        );
+        return (0, c.jsxs)(t, {
+          ...u,
+          className: (0, r.Z)('anchor', p ? s.anchorWithHideOnScrollNavbar : s.anchorWithStickyNavbar, u.className),
+          id: n,
+          children: [
+            u.children,
+            (0, c.jsx)(i.Z, { className: 'hash-link', to: `#${n}`, 'aria-label': f, title: f, children: '\u200b' }),
+          ],
+        });
+      }
+    },
+    9471: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => o });
+      n(7294);
+      const r = { iconExternalLink: 'iconExternalLink_nPIU' };
+      var a = n(5893);
+      function o(e) {
+        let { width: t = 13.5, height: n = 13.5 } = e;
+        return (0, a.jsx)('svg', {
+          width: t,
+          height: n,
+          'aria-hidden': 'true',
+          viewBox: '0 0 24 24',
+          className: r.iconExternalLink,
+          children: (0, a.jsx)('path', {
+            fill: 'currentColor',
+            d: 'M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z',
+          }),
+        });
+      }
+    },
+    6040: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => ft });
+      var r = n(7294),
+        a = n(512),
+        o = n(4763),
+        i = n(1944),
+        l = n(6550),
+        s = n(5999),
+        c = n(5936),
+        u = n(5893);
+      const d = '__docusaurus_skipToContent_fallback';
+      function p(e) {
+        e.setAttribute('tabindex', '-1'), e.focus(), e.removeAttribute('tabindex');
+      }
+      function f() {
+        const e = (0, r.useRef)(null),
+          { action: t } = (0, l.k6)(),
+          n = (0, r.useCallback)(e => {
+            e.preventDefault();
+            const t = document.querySelector('main:first-of-type') ?? document.getElementById(d);
+            t && p(t);
+          }, []);
+        return (
+          (0, c.S)(n => {
+            let { location: r } = n;
+            e.current && !r.hash && 'PUSH' === t && p(e.current);
+          }),
+          { containerRef: e, onClick: n }
+        );
+      }
+      const m = (0, s.I)({
+        id: 'theme.common.skipToMainContent',
+        description:
+          'The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation',
+        message: 'Skip to main content',
+      });
+      function h(e) {
+        const t = e.children ?? m,
+          { containerRef: n, onClick: r } = f();
+        return (0, u.jsx)('div', {
+          ref: n,
+          role: 'region',
+          'aria-label': m,
+          children: (0, u.jsx)('a', { ...e, href: `#${d}`, onClick: r, children: t }),
+        });
+      }
+      var g = n(5281),
+        y = n(9727);
+      const b = { skipToContent: 'skipToContent_fXgn' };
+      function v() {
+        return (0, u.jsx)(h, { className: b.skipToContent });
+      }
+      var w = n(6668),
+        k = n(9689);
+      function S(e) {
+        let { width: t = 21, height: n = 21, color: r = 'currentColor', strokeWidth: a = 1.2, className: o, ...i } = e;
+        return (0, u.jsx)('svg', {
+          viewBox: '0 0 15 15',
+          width: t,
+          height: n,
+          ...i,
+          children: (0, u.jsx)('g', {
+            stroke: r,
+            strokeWidth: a,
+            children: (0, u.jsx)('path', { d: 'M.75.75l13.5 13.5M14.25.75L.75 14.25' }),
+          }),
+        });
+      }
+      const x = { closeButton: 'closeButton_CVFx' };
+      function E(e) {
+        return (0, u.jsx)('button', {
+          type: 'button',
+          'aria-label': (0, s.I)({
+            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+            message: 'Close',
+            description: 'The ARIA label for close button of announcement bar',
+          }),
+          ...e,
+          className: (0, a.Z)('clean-btn close', x.closeButton, e.className),
+          children: (0, u.jsx)(S, { width: 14, height: 14, strokeWidth: 3.1 }),
+        });
+      }
+      const C = { content: 'content_knG7' };
+      function _(e) {
+        const { announcementBar: t } = (0, w.L)(),
+          { content: n } = t;
+        return (0, u.jsx)('div', { ...e, className: (0, a.Z)(C.content, e.className), dangerouslySetInnerHTML: { __html: n } });
+      }
+      const P = {
+        announcementBar: 'announcementBar_mb4j',
+        announcementBarPlaceholder: 'announcementBarPlaceholder_vyr4',
+        announcementBarClose: 'announcementBarClose_gvF7',
+        announcementBarContent: 'announcementBarContent_xLdY',
+      };
+      function T() {
+        const { announcementBar: e } = (0, w.L)(),
+          { isActive: t, close: n } = (0, k.nT)();
+        if (!t) return null;
+        const { backgroundColor: r, textColor: a, isCloseable: o } = e;
+        return (0, u.jsxs)('div', {
+          className: P.announcementBar,
+          style: { backgroundColor: r, color: a },
+          role: 'banner',
+          children: [
+            o && (0, u.jsx)('div', { className: P.announcementBarPlaceholder }),
+            (0, u.jsx)(_, { className: P.announcementBarContent }),
+            o && (0, u.jsx)(E, { onClick: n, className: P.announcementBarClose }),
+          ],
+        });
+      }
+      var A = n(3163),
+        L = n(2466);
+      var j = n(902),
+        R = n(3102);
+      const I = r.createContext(null);
+      function N(e) {
+        let { children: t } = e;
+        const n = (function () {
+          const e = (0, A.e)(),
+            t = (0, R.HY)(),
+            [n, a] = (0, r.useState)(!1),
+            o = null !== t.component,
+            i = (0, j.D9)(o);
+          return (
+            (0, r.useEffect)(() => {
+              o && !i && a(!0);
+            }, [o, i]),
+            (0, r.useEffect)(() => {
+              o ? e.shown || a(!0) : a(!1);
+            }, [e.shown, o]),
+            (0, r.useMemo)(() => [n, a], [n])
+          );
+        })();
+        return (0, u.jsx)(I.Provider, { value: n, children: t });
+      }
+      function O(e) {
+        if (e.component) {
+          const t = e.component;
+          return (0, u.jsx)(t, { ...e.props });
+        }
+      }
+      function D() {
+        const e = (0, r.useContext)(I);
+        if (!e) throw new j.i6('NavbarSecondaryMenuDisplayProvider');
+        const [t, n] = e,
+          a = (0, r.useCallback)(() => n(!1), [n]),
+          o = (0, R.HY)();
+        return (0, r.useMemo)(() => ({ shown: t, hide: a, content: O(o) }), [a, o, t]);
+      }
+      function F(e) {
+        let { header: t, primaryMenu: n, secondaryMenu: r } = e;
+        const { shown: o } = D();
+        return (0, u.jsxs)('div', {
+          className: 'navbar-sidebar',
+          children: [
+            t,
+            (0, u.jsxs)('div', {
+              className: (0, a.Z)('navbar-sidebar__items', { 'navbar-sidebar__items--show-secondary': o }),
+              children: [
+                (0, u.jsx)('div', { className: 'navbar-sidebar__item menu', children: n }),
+                (0, u.jsx)('div', { className: 'navbar-sidebar__item menu', children: r }),
+              ],
+            }),
+          ],
+        });
+      }
+      var M = n(2949),
+        B = n(2389);
+      function z(e) {
+        return (0, u.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          width: 24,
+          height: 24,
+          ...e,
+          children: (0, u.jsx)('path', {
+            fill: 'currentColor',
+            d: 'M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z',
+          }),
+        });
+      }
+      function $(e) {
+        return (0, u.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          width: 24,
+          height: 24,
+          ...e,
+          children: (0, u.jsx)('path', {
+            fill: 'currentColor',
+            d: 'M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z',
+          }),
+        });
+      }
+      const U = {
+        toggle: 'toggle_vylO',
+        toggleButton: 'toggleButton_gllP',
+        darkToggleIcon: 'darkToggleIcon_wfgR',
+        lightToggleIcon: 'lightToggleIcon_pyhR',
+        toggleButtonDisabled: 'toggleButtonDisabled_aARS',
+      };
+      function H(e) {
+        let { className: t, buttonClassName: n, value: r, onChange: o } = e;
+        const i = (0, B.Z)(),
+          l = (0, s.I)(
+            {
+              message: 'Switch between dark and light mode (currently {mode})',
+              id: 'theme.colorToggle.ariaLabel',
+              description: 'The ARIA label for the navbar color mode toggle',
+            },
+            {
+              mode:
+                'dark' === r
+                  ? (0, s.I)({
+                      message: 'dark mode',
+                      id: 'theme.colorToggle.ariaLabel.mode.dark',
+                      description: 'The name for the dark color mode',
+                    })
+                  : (0, s.I)({
+                      message: 'light mode',
+                      id: 'theme.colorToggle.ariaLabel.mode.light',
+                      description: 'The name for the light color mode',
+                    }),
+            },
+          );
+        return (0, u.jsx)('div', {
+          className: (0, a.Z)(U.toggle, t),
+          children: (0, u.jsxs)('button', {
+            className: (0, a.Z)('clean-btn', U.toggleButton, !i && U.toggleButtonDisabled, n),
+            type: 'button',
+            onClick: () => o('dark' === r ? 'light' : 'dark'),
+            disabled: !i,
+            title: l,
+            'aria-label': l,
+            'aria-live': 'polite',
+            children: [
+              (0, u.jsx)(z, { className: (0, a.Z)(U.toggleIcon, U.lightToggleIcon) }),
+              (0, u.jsx)($, { className: (0, a.Z)(U.toggleIcon, U.darkToggleIcon) }),
+            ],
+          }),
+        });
+      }
+      const q = r.memo(H),
+        Z = { darkNavbarColorModeToggle: 'darkNavbarColorModeToggle_X3D1' };
+      function G(e) {
+        let { className: t } = e;
+        const n = (0, w.L)().navbar.style,
+          r = (0, w.L)().colorMode.disableSwitch,
+          { colorMode: a, setColorMode: o } = (0, M.I)();
+        return r
+          ? null
+          : (0, u.jsx)(q, {
+              className: t,
+              buttonClassName: 'dark' === n ? Z.darkNavbarColorModeToggle : void 0,
+              value: a,
+              onChange: o,
+            });
+      }
+      var W = n(1327);
+      function V() {
+        return (0, u.jsx)(W.Z, {
+          className: 'navbar__brand',
+          imageClassName: 'navbar__logo',
+          titleClassName: 'navbar__title text--truncate',
+        });
+      }
+      function Q() {
+        const e = (0, A.e)();
+        return (0, u.jsx)('button', {
+          type: 'button',
+          'aria-label': (0, s.I)({
+            id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+            message: 'Close navigation bar',
+            description: 'The ARIA label for close button of mobile sidebar',
+          }),
+          className: 'clean-btn navbar-sidebar__close',
+          onClick: () => e.toggle(),
+          children: (0, u.jsx)(S, { color: 'var(--ifm-color-emphasis-600)' }),
+        });
+      }
+      function K() {
+        return (0, u.jsxs)('div', {
+          className: 'navbar-sidebar__brand',
+          children: [(0, u.jsx)(V, {}), (0, u.jsx)(G, { className: 'margin-right--md' }), (0, u.jsx)(Q, {})],
+        });
+      }
+      var Y = n(3692),
+        X = n(4996),
+        J = n(3919);
+      function ee(e, t) {
+        return void 0 !== e && void 0 !== t && new RegExp(e, 'gi').test(t);
+      }
+      var te = n(9471);
+      function ne(e) {
+        let {
+          activeBasePath: t,
+          activeBaseRegex: n,
+          to: r,
+          href: a,
+          label: o,
+          html: i,
+          isDropdownLink: l,
+          prependBaseUrlToHref: s,
+          ...c
+        } = e;
+        const d = (0, X.Z)(r),
+          p = (0, X.Z)(t),
+          f = (0, X.Z)(a, { forcePrependBaseUrl: !0 }),
+          m = o && a && !(0, J.Z)(a),
+          h = i
+            ? { dangerouslySetInnerHTML: { __html: i } }
+            : {
+                children: (0, u.jsxs)(u.Fragment, {
+                  children: [o, m && (0, u.jsx)(te.Z, { ...(l && { width: 12, height: 12 }) })],
+                }),
+              };
+        return a
+          ? (0, u.jsx)(Y.Z, { href: s ? f : a, ...c, ...h })
+          : (0, u.jsx)(Y.Z, {
+              to: d,
+              isNavLink: !0,
+              ...((t || n) && { isActive: (e, t) => (n ? ee(n, t.pathname) : t.pathname.startsWith(p)) }),
+              ...c,
+              ...h,
+            });
+      }
+      function re(e) {
+        let { className: t, isDropdownItem: n = !1, ...r } = e;
+        const o = (0, u.jsx)(ne, {
+          className: (0, a.Z)(n ? 'dropdown__link' : 'navbar__item navbar__link', t),
+          isDropdownLink: n,
+          ...r,
+        });
+        return n ? (0, u.jsx)('li', { children: o }) : o;
+      }
+      function ae(e) {
+        let { className: t, isDropdownItem: n, ...r } = e;
+        return (0, u.jsx)('li', {
+          className: 'menu__list-item',
+          children: (0, u.jsx)(ne, { className: (0, a.Z)('menu__link', t), ...r }),
+        });
+      }
+      function oe(e) {
+        let { mobile: t = !1, position: n, ...r } = e;
+        const a = t ? ae : re;
+        return (0, u.jsx)(a, { ...r, activeClassName: r.activeClassName ?? (t ? 'menu__link--active' : 'navbar__link--active') });
+      }
+      var ie = n(6043),
+        le = n(8596),
+        se = n(2263);
+      const ce = { dropdownNavbarItemMobile: 'dropdownNavbarItemMobile_S0Fm' };
+      function ue(e, t) {
+        return e.some(e =>
+          (function (e, t) {
+            return !!(0, le.Mg)(e.to, t) || !!ee(e.activeBaseRegex, t) || !(!e.activeBasePath || !t.startsWith(e.activeBasePath));
+          })(e, t),
+        );
+      }
+      function de(e) {
+        let { items: t, position: n, className: o, onClick: i, ...l } = e;
+        const s = (0, r.useRef)(null),
+          [c, d] = (0, r.useState)(!1);
+        return (
+          (0, r.useEffect)(() => {
+            const e = e => {
+              s.current && !s.current.contains(e.target) && d(!1);
+            };
+            return (
+              document.addEventListener('mousedown', e),
+              document.addEventListener('touchstart', e),
+              document.addEventListener('focusin', e),
+              () => {
+                document.removeEventListener('mousedown', e),
+                  document.removeEventListener('touchstart', e),
+                  document.removeEventListener('focusin', e);
+              }
+            );
+          }, [s]),
+          (0, u.jsxs)('div', {
+            ref: s,
+            className: (0, a.Z)('navbar__item', 'dropdown', 'dropdown--hoverable', {
+              'dropdown--right': 'right' === n,
+              'dropdown--show': c,
+            }),
+            children: [
+              (0, u.jsx)(ne, {
+                'aria-haspopup': 'true',
+                'aria-expanded': c,
+                role: 'button',
+                href: l.to ? void 0 : '#',
+                className: (0, a.Z)('navbar__link', o),
+                ...l,
+                onClick: l.to ? void 0 : e => e.preventDefault(),
+                onKeyDown: e => {
+                  'Enter' === e.key && (e.preventDefault(), d(!c));
+                },
+                children: l.children ?? l.label,
+              }),
+              (0, u.jsx)('ul', {
+                className: 'dropdown__menu',
+                children: t.map((e, t) =>
+                  (0, r.createElement)(Ce, { isDropdownItem: !0, activeClassName: 'dropdown__link--active', ...e, key: t }),
+                ),
+              }),
+            ],
+          })
+        );
+      }
+      function pe(e) {
+        let { items: t, className: n, position: o, onClick: i, ...s } = e;
+        const c = (function () {
+            const {
+                siteConfig: { baseUrl: e },
+              } = (0, se.Z)(),
+              { pathname: t } = (0, l.TH)();
+            return t.replace(e, '/');
+          })(),
+          d = ue(t, c),
+          { collapsed: p, toggleCollapsed: f, setCollapsed: m } = (0, ie.u)({ initialState: () => !d });
+        return (
+          (0, r.useEffect)(() => {
+            d && m(!d);
+          }, [c, d, m]),
+          (0, u.jsxs)('li', {
+            className: (0, a.Z)('menu__list-item', { 'menu__list-item--collapsed': p }),
+            children: [
+              (0, u.jsx)(ne, {
+                role: 'button',
+                className: (0, a.Z)(ce.dropdownNavbarItemMobile, 'menu__link menu__link--sublist menu__link--sublist-caret', n),
+                ...s,
+                onClick: e => {
+                  e.preventDefault(), f();
+                },
+                children: s.children ?? s.label,
+              }),
+              (0, u.jsx)(ie.z, {
+                lazy: !0,
+                as: 'ul',
+                className: 'menu__list',
+                collapsed: p,
+                children: t.map((e, t) =>
+                  (0, r.createElement)(Ce, {
+                    mobile: !0,
+                    isDropdownItem: !0,
+                    onClick: i,
+                    activeClassName: 'menu__link--active',
+                    ...e,
+                    key: t,
+                  }),
+                ),
+              }),
+            ],
+          })
+        );
+      }
+      function fe(e) {
+        let { mobile: t = !1, ...n } = e;
+        const r = t ? pe : de;
+        return (0, u.jsx)(r, { ...n });
+      }
+      var me = n(4711);
+      function he(e) {
+        let { width: t = 20, height: n = 20, ...r } = e;
+        return (0, u.jsx)('svg', {
+          viewBox: '0 0 24 24',
+          width: t,
+          height: n,
+          'aria-hidden': !0,
+          ...r,
+          children: (0, u.jsx)('path', {
+            fill: 'currentColor',
+            d: 'M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z',
+          }),
+        });
+      }
+      const ge = 'iconLanguage_nlXk';
+      var ye = n(1875);
+      const be = { navbarSearchContainer: 'navbarSearchContainer_Bca1' };
+      function ve(e) {
+        let { children: t, className: n } = e;
+        return (0, u.jsx)('div', { className: (0, a.Z)(n, be.navbarSearchContainer), children: t });
+      }
+      var we = n(143),
+        ke = n(3438);
+      var Se = n(373);
+      const xe = e => e.docs.find(t => t.id === e.mainDocId);
+      const Ee = {
+        default: oe,
+        localeDropdown: function (e) {
+          let { mobile: t, dropdownItemsBefore: n, dropdownItemsAfter: r, queryString: a = '', ...o } = e;
+          const {
+              i18n: { currentLocale: i, locales: c, localeConfigs: d },
+            } = (0, se.Z)(),
+            p = (0, me.l)(),
+            { search: f, hash: m } = (0, l.TH)(),
+            h = [
+              ...n,
+              ...c.map(e => {
+                const n = `${`pathname://${p.createUrl({ locale: e, fullyQualified: !1 })}`}${f}${m}${a}`;
+                return {
+                  label: d[e].label,
+                  lang: d[e].htmlLang,
+                  to: n,
+                  target: '_self',
+                  autoAddBaseUrl: !1,
+                  className: e === i ? (t ? 'menu__link--active' : 'dropdown__link--active') : '',
+                };
+              }),
+              ...r,
+            ],
+            g = t
+              ? (0, s.I)({
+                  message: 'Languages',
+                  id: 'theme.navbar.mobileLanguageDropdown.label',
+                  description: 'The label for the mobile language switcher dropdown',
+                })
+              : d[i].label;
+          return (0, u.jsx)(fe, {
+            ...o,
+            mobile: t,
+            label: (0, u.jsxs)(u.Fragment, { children: [(0, u.jsx)(he, { className: ge }), g] }),
+            items: h,
+          });
+        },
+        search: function (e) {
+          let { mobile: t, className: n } = e;
+          return t ? null : (0, u.jsx)(ve, { className: n, children: (0, u.jsx)(ye.Z, {}) });
+        },
+        dropdown: fe,
+        html: function (e) {
+          let { value: t, className: n, mobile: r = !1, isDropdownItem: o = !1 } = e;
+          const i = o ? 'li' : 'div';
+          return (0, u.jsx)(i, {
+            className: (0, a.Z)({ navbar__item: !r && !o, 'menu__list-item': r }, n),
+            dangerouslySetInnerHTML: { __html: t },
+          });
+        },
+        doc: function (e) {
+          let { docId: t, label: n, docsPluginId: r, ...a } = e;
+          const { activeDoc: o } = (0, we.Iw)(r),
+            i = (0, ke.vY)(t, r),
+            l = o?.path === i?.path;
+          return null === i || (i.unlisted && !l)
+            ? null
+            : (0, u.jsx)(oe, {
+                exact: !0,
+                ...a,
+                isActive: () => l || (!!o?.sidebar && o.sidebar === i.sidebar),
+                label: n ?? i.id,
+                to: i.path,
+              });
+        },
+        docSidebar: function (e) {
+          let { sidebarId: t, label: n, docsPluginId: r, ...a } = e;
+          const { activeDoc: o } = (0, we.Iw)(r),
+            i = (0, ke.oz)(t, r).link;
+          if (!i) throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);
+          return (0, u.jsx)(oe, { exact: !0, ...a, isActive: () => o?.sidebar === t, label: n ?? i.label, to: i.path });
+        },
+        docsVersion: function (e) {
+          let { label: t, to: n, docsPluginId: r, ...a } = e;
+          const o = (0, ke.lO)(r)[0],
+            i = t ?? o.label,
+            l = n ?? (e => e.docs.find(t => t.id === e.mainDocId))(o).path;
+          return (0, u.jsx)(oe, { ...a, label: i, to: l });
+        },
+        docsVersionDropdown: function (e) {
+          let {
+            mobile: t,
+            docsPluginId: n,
+            dropdownActiveClassDisabled: r,
+            dropdownItemsBefore: a,
+            dropdownItemsAfter: o,
+            ...i
+          } = e;
+          const { search: c, hash: d } = (0, l.TH)(),
+            p = (0, we.Iw)(n),
+            f = (0, we.gB)(n),
+            { savePreferredVersionName: m } = (0, Se.J)(n),
+            h = [
+              ...a,
+              ...f.map(e => {
+                const t = p.alternateDocVersions[e.name] ?? xe(e);
+                return {
+                  label: e.label,
+                  to: `${t.path}${c}${d}`,
+                  isActive: () => e === p.activeVersion,
+                  onClick: () => m(e.name),
+                };
+              }),
+              ...o,
+            ],
+            g = (0, ke.lO)(n)[0],
+            y =
+              t && h.length > 1
+                ? (0, s.I)({
+                    id: 'theme.navbar.mobileVersionsDropdown.label',
+                    message: 'Versions',
+                    description: 'The label for the navbar versions dropdown on mobile view',
+                  })
+                : g.label,
+            b = t && h.length > 1 ? void 0 : xe(g).path;
+          return h.length <= 1
+            ? (0, u.jsx)(oe, { ...i, mobile: t, label: y, to: b, isActive: r ? () => !1 : void 0 })
+            : (0, u.jsx)(fe, { ...i, mobile: t, label: y, to: b, items: h, isActive: r ? () => !1 : void 0 });
+        },
+      };
+      function Ce(e) {
+        let { type: t, ...n } = e;
+        const r = (function (e, t) {
+            return e && 'default' !== e ? e : 'items' in t ? 'dropdown' : 'default';
+          })(t, n),
+          a = Ee[r];
+        if (!a) throw new Error(`No NavbarItem component found for type "${t}".`);
+        return (0, u.jsx)(a, { ...n });
+      }
+      function _e() {
+        const e = (0, A.e)(),
+          t = (0, w.L)().navbar.items;
+        return (0, u.jsx)('ul', {
+          className: 'menu__list',
+          children: t.map((t, n) => (0, r.createElement)(Ce, { mobile: !0, ...t, onClick: () => e.toggle(), key: n })),
+        });
+      }
+      function Pe(e) {
+        return (0, u.jsx)('button', {
+          ...e,
+          type: 'button',
+          className: 'clean-btn navbar-sidebar__back',
+          children: (0, u.jsx)(s.Z, {
+            id: 'theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel',
+            description:
+              'The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)',
+            children: '\u2190 Back to main menu',
+          }),
+        });
+      }
+      function Te() {
+        const e = 0 === (0, w.L)().navbar.items.length,
+          t = D();
+        return (0, u.jsxs)(u.Fragment, { children: [!e && (0, u.jsx)(Pe, { onClick: () => t.hide() }), t.content] });
+      }
+      function Ae() {
+        const e = (0, A.e)();
+        var t;
+        return (
+          void 0 === (t = e.shown) && (t = !0),
+          (0, r.useEffect)(
+            () => (
+              (document.body.style.overflow = t ? 'hidden' : 'visible'),
+              () => {
+                document.body.style.overflow = 'visible';
+              }
+            ),
+            [t],
+          ),
+          e.shouldRender
+            ? (0, u.jsx)(F, { header: (0, u.jsx)(K, {}), primaryMenu: (0, u.jsx)(_e, {}), secondaryMenu: (0, u.jsx)(Te, {}) })
+            : null
+        );
+      }
+      const Le = { navbarHideable: 'navbarHideable_m1mJ', navbarHidden: 'navbarHidden_jGov' };
+      function je(e) {
+        return (0, u.jsx)('div', { role: 'presentation', ...e, className: (0, a.Z)('navbar-sidebar__backdrop', e.className) });
+      }
+      function Re(e) {
+        let { children: t } = e;
+        const {
+            navbar: { hideOnScroll: n, style: o },
+          } = (0, w.L)(),
+          i = (0, A.e)(),
+          { navbarRef: l, isNavbarVisible: d } = (function (e) {
+            const [t, n] = (0, r.useState)(e),
+              a = (0, r.useRef)(!1),
+              o = (0, r.useRef)(0),
+              i = (0, r.useCallback)(e => {
+                null !== e && (o.current = e.getBoundingClientRect().height);
+              }, []);
+            return (
+              (0, L.RF)((t, r) => {
+                let { scrollY: i } = t;
+                if (!e) return;
+                if (i < o.current) return void n(!0);
+                if (a.current) return void (a.current = !1);
+                const l = r?.scrollY,
+                  s = document.documentElement.scrollHeight - o.current,
+                  c = window.innerHeight;
+                l && i >= l ? n(!1) : i + c < s && n(!0);
+              }),
+              (0, c.S)(t => {
+                if (!e) return;
+                const r = t.location.hash;
+                if (r ? document.getElementById(r.substring(1)) : void 0) return (a.current = !0), void n(!1);
+                n(!0);
+              }),
+              { navbarRef: i, isNavbarVisible: t }
+            );
+          })(n);
+        return (0, u.jsxs)('nav', {
+          ref: l,
+          'aria-label': (0, s.I)({
+            id: 'theme.NavBar.navAriaLabel',
+            message: 'Main',
+            description: 'The ARIA label for the main navigation',
+          }),
+          className: (0, a.Z)('navbar', 'navbar--fixed-top', n && [Le.navbarHideable, !d && Le.navbarHidden], {
+            'navbar--dark': 'dark' === o,
+            'navbar--primary': 'primary' === o,
+            'navbar-sidebar--show': i.shown,
+          }),
+          children: [t, (0, u.jsx)(je, { onClick: i.toggle }), (0, u.jsx)(Ae, {})],
+        });
+      }
+      var Ie = n(8780);
+      const Ne = { errorBoundaryError: 'errorBoundaryError_a6uf', errorBoundaryFallback: 'errorBoundaryFallback_VBag' };
+      function Oe(e) {
+        return (0, u.jsx)('button', {
+          type: 'button',
+          ...e,
+          children: (0, u.jsx)(s.Z, {
+            id: 'theme.ErrorPageContent.tryAgain',
+            description: 'The label of the button to try again rendering when the React error boundary captures an error',
+            children: 'Try again',
+          }),
+        });
+      }
+      function De(e) {
+        let { error: t } = e;
+        const n = (0, Ie.getErrorCausalChain)(t)
+          .map(e => e.message)
+          .join('\n\nCause:\n');
+        return (0, u.jsx)('p', { className: Ne.errorBoundaryError, children: n });
+      }
+      class Fe extends r.Component {
+        componentDidCatch(e, t) {
+          throw this.props.onError(e, t);
+        }
+        render() {
+          return this.props.children;
+        }
+      }
+      const Me = 'right';
+      function Be(e) {
+        let { width: t = 30, height: n = 30, className: r, ...a } = e;
+        return (0, u.jsx)('svg', {
+          className: r,
+          width: t,
+          height: n,
+          viewBox: '0 0 30 30',
+          'aria-hidden': 'true',
+          ...a,
+          children: (0, u.jsx)('path', {
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeMiterlimit: '10',
+            strokeWidth: '2',
+            d: 'M4 7h22M4 15h22M4 23h22',
+          }),
+        });
+      }
+      function ze() {
+        const { toggle: e, shown: t } = (0, A.e)();
+        return (0, u.jsx)('button', {
+          onClick: e,
+          'aria-label': (0, s.I)({
+            id: 'theme.docs.sidebar.toggleSidebarButtonAriaLabel',
+            message: 'Toggle navigation bar',
+            description: 'The ARIA label for hamburger menu button of mobile navigation',
+          }),
+          'aria-expanded': t,
+          className: 'navbar__toggle clean-btn',
+          type: 'button',
+          children: (0, u.jsx)(Be, {}),
+        });
+      }
+      const $e = { colorModeToggle: 'colorModeToggle_DEke' };
+      function Ue(e) {
+        let { items: t } = e;
+        return (0, u.jsx)(u.Fragment, {
+          children: t.map((e, t) =>
+            (0, u.jsx)(
+              Fe,
+              {
+                onError: t =>
+                  new Error(
+                    `A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e, null, 2)}`,
+                    { cause: t },
+                  ),
+                children: (0, u.jsx)(Ce, { ...e }),
+              },
+              t,
+            ),
+          ),
+        });
+      }
+      function He(e) {
+        let { left: t, right: n } = e;
+        return (0, u.jsxs)('div', {
+          className: 'navbar__inner',
+          children: [
+            (0, u.jsx)('div', { className: 'navbar__items', children: t }),
+            (0, u.jsx)('div', { className: 'navbar__items navbar__items--right', children: n }),
+          ],
+        });
+      }
+      function qe() {
+        const e = (0, A.e)(),
+          t = (0, w.L)().navbar.items,
+          [n, r] = (function (e) {
+            function t(e) {
+              return 'left' === (e.position ?? Me);
+            }
+            return [e.filter(t), e.filter(e => !t(e))];
+          })(t),
+          a = t.find(e => 'search' === e.type);
+        return (0, u.jsx)(He, {
+          left: (0, u.jsxs)(u.Fragment, {
+            children: [!e.disabled && (0, u.jsx)(ze, {}), (0, u.jsx)(V, {}), (0, u.jsx)(Ue, { items: n })],
+          }),
+          right: (0, u.jsxs)(u.Fragment, {
+            children: [
+              (0, u.jsx)(Ue, { items: r }),
+              (0, u.jsx)(G, { className: $e.colorModeToggle }),
+              !a && (0, u.jsx)(ve, { children: (0, u.jsx)(ye.Z, {}) }),
+            ],
+          }),
+        });
+      }
+      function Ze() {
+        return (0, u.jsx)(Re, { children: (0, u.jsx)(qe, {}) });
+      }
+      function Ge(e) {
+        let { item: t } = e;
+        const { to: n, href: r, label: a, prependBaseUrlToHref: o, ...i } = t,
+          l = (0, X.Z)(n),
+          s = (0, X.Z)(r, { forcePrependBaseUrl: !0 });
+        return (0, u.jsxs)(Y.Z, {
+          className: 'footer__link-item',
+          ...(r ? { href: o ? s : r } : { to: l }),
+          ...i,
+          children: [a, r && !(0, J.Z)(r) && (0, u.jsx)(te.Z, {})],
+        });
+      }
+      function We(e) {
+        let { item: t } = e;
+        return t.html
+          ? (0, u.jsx)('li', { className: 'footer__item', dangerouslySetInnerHTML: { __html: t.html } })
+          : (0, u.jsx)('li', { className: 'footer__item', children: (0, u.jsx)(Ge, { item: t }) }, t.href ?? t.to);
+      }
+      function Ve(e) {
+        let { column: t } = e;
+        return (0, u.jsxs)('div', {
+          className: 'col footer__col',
+          children: [
+            (0, u.jsx)('div', { className: 'footer__title', children: t.title }),
+            (0, u.jsx)('ul', {
+              className: 'footer__items clean-list',
+              children: t.items.map((e, t) => (0, u.jsx)(We, { item: e }, t)),
+            }),
+          ],
+        });
+      }
+      function Qe(e) {
+        let { columns: t } = e;
+        return (0, u.jsx)('div', { className: 'row footer__links', children: t.map((e, t) => (0, u.jsx)(Ve, { column: e }, t)) });
+      }
+      function Ke() {
+        return (0, u.jsx)('span', { className: 'footer__link-separator', children: '\xb7' });
+      }
+      function Ye(e) {
+        let { item: t } = e;
+        return t.html
+          ? (0, u.jsx)('span', { className: 'footer__link-item', dangerouslySetInnerHTML: { __html: t.html } })
+          : (0, u.jsx)(Ge, { item: t });
+      }
+      function Xe(e) {
+        let { links: t } = e;
+        return (0, u.jsx)('div', {
+          className: 'footer__links text--center',
+          children: (0, u.jsx)('div', {
+            className: 'footer__links',
+            children: t.map((e, n) =>
+              (0, u.jsxs)(r.Fragment, { children: [(0, u.jsx)(Ye, { item: e }), t.length !== n + 1 && (0, u.jsx)(Ke, {})] }, n),
+            ),
+          }),
+        });
+      }
+      function Je(e) {
+        let { links: t } = e;
+        return (function (e) {
+          return 'title' in e[0];
+        })(t)
+          ? (0, u.jsx)(Qe, { columns: t })
+          : (0, u.jsx)(Xe, { links: t });
+      }
+      var et = n(9965);
+      const tt = { footerLogoLink: 'footerLogoLink_BH7S' };
+      function nt(e) {
+        let { logo: t } = e;
+        const { withBaseUrl: n } = (0, X.C)(),
+          r = { light: n(t.src), dark: n(t.srcDark ?? t.src) };
+        return (0, u.jsx)(et.Z, {
+          className: (0, a.Z)('footer__logo', t.className),
+          alt: t.alt,
+          sources: r,
+          width: t.width,
+          height: t.height,
+          style: t.style,
+        });
+      }
+      function rt(e) {
+        let { logo: t } = e;
+        return t.href
+          ? (0, u.jsx)(Y.Z, {
+              href: t.href,
+              className: tt.footerLogoLink,
+              target: t.target,
+              children: (0, u.jsx)(nt, { logo: t }),
+            })
+          : (0, u.jsx)(nt, { logo: t });
+      }
+      function at(e) {
+        let { copyright: t } = e;
+        return (0, u.jsx)('div', { className: 'footer__copyright', dangerouslySetInnerHTML: { __html: t } });
+      }
+      function ot(e) {
+        let { style: t, links: n, logo: r, copyright: o } = e;
+        return (0, u.jsx)('footer', {
+          className: (0, a.Z)('footer', { 'footer--dark': 'dark' === t }),
+          children: (0, u.jsxs)('div', {
+            className: 'container container-fluid',
+            children: [
+              n,
+              (r || o) &&
+                (0, u.jsxs)('div', {
+                  className: 'footer__bottom text--center',
+                  children: [r && (0, u.jsx)('div', { className: 'margin-bottom--sm', children: r }), o],
+                }),
+            ],
+          }),
+        });
+      }
+      function it() {
+        const { footer: e } = (0, w.L)();
+        if (!e) return null;
+        const { copyright: t, links: n, logo: r, style: a } = e;
+        return (0, u.jsx)(ot, {
+          style: a,
+          links: n && n.length > 0 && (0, u.jsx)(Je, { links: n }),
+          logo: r && (0, u.jsx)(rt, { logo: r }),
+          copyright: t && (0, u.jsx)(at, { copyright: t }),
+        });
+      }
+      const lt = r.memo(it),
+        st = (0, j.Qc)([
+          M.S,
+          k.pl,
+          L.OC,
+          Se.L5,
+          i.VC,
+          function (e) {
+            let { children: t } = e;
+            return (0, u.jsx)(R.n2, { children: (0, u.jsx)(A.M, { children: (0, u.jsx)(N, { children: t }) }) });
+          },
+        ]);
+      function ct(e) {
+        let { children: t } = e;
+        return (0, u.jsx)(st, { children: t });
+      }
+      var ut = n(2503);
+      function dt(e) {
+        let { error: t, tryAgain: n } = e;
+        return (0, u.jsx)('main', {
+          className: 'container margin-vert--xl',
+          children: (0, u.jsx)('div', {
+            className: 'row',
+            children: (0, u.jsxs)('div', {
+              className: 'col col--6 col--offset-3',
+              children: [
+                (0, u.jsx)(ut.Z, {
+                  as: 'h1',
+                  className: 'hero__title',
+                  children: (0, u.jsx)(s.Z, {
+                    id: 'theme.ErrorPageContent.title',
+                    description: 'The title of the fallback page when the page crashed',
+                    children: 'This page crashed.',
+                  }),
+                }),
+                (0, u.jsx)('div', {
+                  className: 'margin-vert--lg',
+                  children: (0, u.jsx)(Oe, { onClick: n, className: 'button button--primary shadow--lw' }),
+                }),
+                (0, u.jsx)('hr', {}),
+                (0, u.jsx)('div', { className: 'margin-vert--md', children: (0, u.jsx)(De, { error: t }) }),
+              ],
+            }),
+          }),
+        });
+      }
+      const pt = { mainWrapper: 'mainWrapper_z2l0' };
+      function ft(e) {
+        const { children: t, noFooter: n, wrapperClassName: r, title: l, description: s } = e;
+        return (
+          (0, y.t)(),
+          (0, u.jsxs)(ct, {
+            children: [
+              (0, u.jsx)(i.d, { title: l, description: s }),
+              (0, u.jsx)(v, {}),
+              (0, u.jsx)(T, {}),
+              (0, u.jsx)(Ze, {}),
+              (0, u.jsx)('div', {
+                id: d,
+                className: (0, a.Z)(g.k.wrapper.main, pt.mainWrapper, r),
+                children: (0, u.jsx)(o.Z, { fallback: e => (0, u.jsx)(dt, { ...e }), children: t }),
+              }),
+              !n && (0, u.jsx)(lt, {}),
+            ],
+          })
+        );
+      }
+    },
+    1327: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => u });
+      n(7294);
+      var r = n(3692),
+        a = n(4996),
+        o = n(2263),
+        i = n(6668),
+        l = n(9965),
+        s = n(5893);
+      function c(e) {
+        let { logo: t, alt: n, imageClassName: r } = e;
+        const o = { light: (0, a.Z)(t.src), dark: (0, a.Z)(t.srcDark || t.src) },
+          i = (0, s.jsx)(l.Z, { className: t.className, sources: o, height: t.height, width: t.width, alt: n, style: t.style });
+        return r ? (0, s.jsx)('div', { className: r, children: i }) : i;
+      }
+      function u(e) {
+        const {
+            siteConfig: { title: t },
+          } = (0, o.Z)(),
+          {
+            navbar: { title: n, logo: l },
+          } = (0, i.L)(),
+          { imageClassName: u, titleClassName: d, ...p } = e,
+          f = (0, a.Z)(l?.href || '/'),
+          m = n ? '' : t,
+          h = l?.alt ?? m;
+        return (0, s.jsxs)(r.Z, {
+          to: f,
+          ...p,
+          ...(l?.target && { target: l.target }),
+          children: [
+            l && (0, s.jsx)(c, { logo: l, alt: h, imageClassName: u }),
+            null != n && (0, s.jsx)('b', { className: d, children: n }),
+          ],
+        });
+      }
+    },
+    197: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => o });
+      n(7294);
+      var r = n(5742),
+        a = n(5893);
+      function o(e) {
+        let { locale: t, version: n, tag: o } = e;
+        const i = t;
+        return (0, a.jsxs)(r.Z, {
+          children: [
+            t && (0, a.jsx)('meta', { name: 'docusaurus_locale', content: t }),
+            n && (0, a.jsx)('meta', { name: 'docusaurus_version', content: n }),
+            o && (0, a.jsx)('meta', { name: 'docusaurus_tag', content: o }),
+            i && (0, a.jsx)('meta', { name: 'docsearch:language', content: i }),
+            n && (0, a.jsx)('meta', { name: 'docsearch:version', content: n }),
+            o && (0, a.jsx)('meta', { name: 'docsearch:docusaurus_tag', content: o }),
+          ],
+        });
+      }
+    },
+    9965: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => u });
+      var r = n(7294),
+        a = n(512),
+        o = n(2389),
+        i = n(2949);
+      const l = {
+        themedComponent: 'themedComponent_mlkZ',
+        'themedComponent--light': 'themedComponent--light_NVdE',
+        'themedComponent--dark': 'themedComponent--dark_xIcU',
+      };
+      var s = n(5893);
+      function c(e) {
+        let { className: t, children: n } = e;
+        const c = (0, o.Z)(),
+          { colorMode: u } = (0, i.I)();
+        return (0, s.jsx)(s.Fragment, {
+          children: (c ? ('dark' === u ? ['dark'] : ['light']) : ['light', 'dark']).map(e => {
+            const o = n({ theme: e, className: (0, a.Z)(t, l.themedComponent, l[`themedComponent--${e}`]) });
+            return (0, s.jsx)(r.Fragment, { children: o }, e);
+          }),
+        });
+      }
+      function u(e) {
+        const { sources: t, className: n, alt: r, ...a } = e;
+        return (0, s.jsx)(c, {
+          className: n,
+          children: e => {
+            let { theme: n, className: o } = e;
+            return (0, s.jsx)('img', { src: t[n], alt: r, className: o, ...a });
+          },
+        });
+      }
+    },
+    6043: (e, t, n) => {
+      'use strict';
+      n.d(t, { u: () => c, z: () => y });
+      var r = n(7294),
+        a = n(412),
+        o = n(469),
+        i = n(1442),
+        l = n(5893);
+      const s = 'ease-in-out';
+      function c(e) {
+        let { initialState: t } = e;
+        const [n, a] = (0, r.useState)(t ?? !1),
+          o = (0, r.useCallback)(() => {
+            a(e => !e);
+          }, []);
+        return { collapsed: n, setCollapsed: a, toggleCollapsed: o };
+      }
+      const u = { display: 'none', overflow: 'hidden', height: '0px' },
+        d = { display: 'block', overflow: 'visible', height: 'auto' };
+      function p(e, t) {
+        const n = t ? u : d;
+        (e.style.display = n.display), (e.style.overflow = n.overflow), (e.style.height = n.height);
+      }
+      function f(e) {
+        let { collapsibleRef: t, collapsed: n, animation: a } = e;
+        const o = (0, r.useRef)(!1);
+        (0, r.useEffect)(() => {
+          const e = t.current;
+          function r() {
+            const t = e.scrollHeight,
+              n =
+                a?.duration ??
+                (function (e) {
+                  if ((0, i.n)()) return 1;
+                  const t = e / 36;
+                  return Math.round(10 * (4 + 15 * t ** 0.25 + t / 5));
+                })(t);
+            return { transition: `height ${n}ms ${a?.easing ?? s}`, height: `${t}px` };
+          }
+          function l() {
+            const t = r();
+            (e.style.transition = t.transition), (e.style.height = t.height);
+          }
+          if (!o.current) return p(e, n), void (o.current = !0);
+          return (
+            (e.style.willChange = 'height'),
+            (function () {
+              const t = requestAnimationFrame(() => {
+                n
+                  ? (l(),
+                    requestAnimationFrame(() => {
+                      (e.style.height = u.height), (e.style.overflow = u.overflow);
+                    }))
+                  : ((e.style.display = 'block'),
+                    requestAnimationFrame(() => {
+                      l();
+                    }));
+              });
+              return () => cancelAnimationFrame(t);
+            })()
+          );
+        }, [t, n, a]);
+      }
+      function m(e) {
+        if (!a.Z.canUseDOM) return e ? u : d;
+      }
+      function h(e) {
+        let {
+          as: t = 'div',
+          collapsed: n,
+          children: a,
+          animation: o,
+          onCollapseTransitionEnd: i,
+          className: s,
+          disableSSRStyle: c,
+        } = e;
+        const u = (0, r.useRef)(null);
+        return (
+          f({ collapsibleRef: u, collapsed: n, animation: o }),
+          (0, l.jsx)(t, {
+            ref: u,
+            style: c ? void 0 : m(n),
+            onTransitionEnd: e => {
+              'height' === e.propertyName && (p(u.current, n), i?.(n));
+            },
+            className: s,
+            children: a,
+          })
+        );
+      }
+      function g(e) {
+        let { collapsed: t, ...n } = e;
+        const [a, i] = (0, r.useState)(!t),
+          [s, c] = (0, r.useState)(t);
+        return (
+          (0, o.Z)(() => {
+            t || i(!0);
+          }, [t]),
+          (0, o.Z)(() => {
+            a && c(t);
+          }, [a, t]),
+          a ? (0, l.jsx)(h, { ...n, collapsed: s }) : null
+        );
+      }
+      function y(e) {
+        let { lazy: t, ...n } = e;
+        const r = t ? g : h;
+        return (0, l.jsx)(r, { ...n });
+      }
+    },
+    9689: (e, t, n) => {
+      'use strict';
+      n.d(t, { nT: () => h, pl: () => m });
+      var r = n(7294),
+        a = n(2389),
+        o = n(12),
+        i = n(902),
+        l = n(6668),
+        s = n(5893);
+      const c = (0, o.WA)('docusaurus.announcement.dismiss'),
+        u = (0, o.WA)('docusaurus.announcement.id'),
+        d = () => 'true' === c.get(),
+        p = e => c.set(String(e)),
+        f = r.createContext(null);
+      function m(e) {
+        let { children: t } = e;
+        const n = (function () {
+          const { announcementBar: e } = (0, l.L)(),
+            t = (0, a.Z)(),
+            [n, o] = (0, r.useState)(() => !!t && d());
+          (0, r.useEffect)(() => {
+            o(d());
+          }, []);
+          const i = (0, r.useCallback)(() => {
+            p(!0), o(!0);
+          }, []);
+          return (
+            (0, r.useEffect)(() => {
+              if (!e) return;
+              const { id: t } = e;
+              let n = u.get();
+              'annoucement-bar' === n && (n = 'announcement-bar');
+              const r = t !== n;
+              u.set(t), r && p(!1), (!r && d()) || o(!1);
+            }, [e]),
+            (0, r.useMemo)(() => ({ isActive: !!e && !n, close: i }), [e, n, i])
+          );
+        })();
+        return (0, s.jsx)(f.Provider, { value: n, children: t });
+      }
+      function h() {
+        const e = (0, r.useContext)(f);
+        if (!e) throw new i.i6('AnnouncementBarProvider');
+        return e;
+      }
+    },
+    2949: (e, t, n) => {
+      'use strict';
+      n.d(t, { I: () => y, S: () => g });
+      var r = n(7294),
+        a = n(412),
+        o = n(902),
+        i = n(12),
+        l = n(6668),
+        s = n(5893);
+      const c = r.createContext(void 0),
+        u = 'theme',
+        d = (0, i.WA)(u),
+        p = { light: 'light', dark: 'dark' },
+        f = e => (e === p.dark ? p.dark : p.light),
+        m = e => (a.Z.canUseDOM ? f(document.documentElement.getAttribute('data-theme')) : f(e)),
+        h = e => {
+          d.set(f(e));
+        };
+      function g(e) {
+        let { children: t } = e;
+        const n = (function () {
+          const {
+              colorMode: { defaultMode: e, disableSwitch: t, respectPrefersColorScheme: n },
+            } = (0, l.L)(),
+            [a, o] = (0, r.useState)(m(e));
+          (0, r.useEffect)(() => {
+            t && d.del();
+          }, [t]);
+          const i = (0, r.useCallback)(
+            function (t, r) {
+              void 0 === r && (r = {});
+              const { persist: a = !0 } = r;
+              t
+                ? (o(t), a && h(t))
+                : (o(n ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? p.dark : p.light) : e), d.del());
+            },
+            [n, e],
+          );
+          (0, r.useEffect)(() => {
+            document.documentElement.setAttribute('data-theme', f(a));
+          }, [a]),
+            (0, r.useEffect)(() => {
+              if (t) return;
+              const e = e => {
+                if (e.key !== u) return;
+                const t = d.get();
+                null !== t && i(f(t));
+              };
+              return window.addEventListener('storage', e), () => window.removeEventListener('storage', e);
+            }, [t, i]);
+          const s = (0, r.useRef)(!1);
+          return (
+            (0, r.useEffect)(() => {
+              if (t && !n) return;
+              const e = window.matchMedia('(prefers-color-scheme: dark)'),
+                r = () => {
+                  window.matchMedia('print').matches || s.current ? (s.current = window.matchMedia('print').matches) : i(null);
+                };
+              return e.addListener(r), () => e.removeListener(r);
+            }, [i, t, n]),
+            (0, r.useMemo)(
+              () => ({
+                colorMode: a,
+                setColorMode: i,
+                get isDarkTheme() {
+                  return a === p.dark;
+                },
+                setLightTheme() {
+                  i(p.light);
+                },
+                setDarkTheme() {
+                  i(p.dark);
+                },
+              }),
+              [a, i],
+            )
+          );
+        })();
+        return (0, s.jsx)(c.Provider, { value: n, children: t });
+      }
+      function y() {
+        const e = (0, r.useContext)(c);
+        if (null == e)
+          throw new o.i6('ColorModeProvider', 'Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.');
+        return e;
+      }
+    },
+    373: (e, t, n) => {
+      'use strict';
+      n.d(t, { J: () => v, L5: () => y });
+      var r = n(7294),
+        a = n(143),
+        o = n(9935),
+        i = n(6668),
+        l = n(3438),
+        s = n(902),
+        c = n(12),
+        u = n(5893);
+      const d = e => `docs-preferred-version-${e}`,
+        p = {
+          save: (e, t, n) => {
+            (0, c.WA)(d(e), { persistence: t }).set(n);
+          },
+          read: (e, t) => (0, c.WA)(d(e), { persistence: t }).get(),
+          clear: (e, t) => {
+            (0, c.WA)(d(e), { persistence: t }).del();
+          },
+        },
+        f = e => Object.fromEntries(e.map(e => [e, { preferredVersionName: null }]));
+      const m = r.createContext(null);
+      function h() {
+        const e = (0, a._r)(),
+          t = (0, i.L)().docs.versionPersistence,
+          n = (0, r.useMemo)(() => Object.keys(e), [e]),
+          [o, l] = (0, r.useState)(() => f(n));
+        (0, r.useEffect)(() => {
+          l(
+            (function (e) {
+              let { pluginIds: t, versionPersistence: n, allDocsData: r } = e;
+              function a(e) {
+                const t = p.read(e, n);
+                return r[e].versions.some(e => e.name === t)
+                  ? { preferredVersionName: t }
+                  : (p.clear(e, n), { preferredVersionName: null });
+              }
+              return Object.fromEntries(t.map(e => [e, a(e)]));
+            })({ allDocsData: e, versionPersistence: t, pluginIds: n }),
+          );
+        }, [e, t, n]);
+        return [
+          o,
+          (0, r.useMemo)(
+            () => ({
+              savePreferredVersion: function (e, n) {
+                p.save(e, t, n), l(t => ({ ...t, [e]: { preferredVersionName: n } }));
+              },
+            }),
+            [t],
+          ),
+        ];
+      }
+      function g(e) {
+        let { children: t } = e;
+        const n = h();
+        return (0, u.jsx)(m.Provider, { value: n, children: t });
+      }
+      function y(e) {
+        let { children: t } = e;
+        return l.cE ? (0, u.jsx)(g, { children: t }) : (0, u.jsx)(u.Fragment, { children: t });
+      }
+      function b() {
+        const e = (0, r.useContext)(m);
+        if (!e) throw new s.i6('DocsPreferredVersionContextProvider');
+        return e;
+      }
+      function v(e) {
+        void 0 === e && (e = o.m);
+        const t = (0, a.zh)(e),
+          [n, i] = b(),
+          { preferredVersionName: l } = n[e];
+        return {
+          preferredVersion: t.versions.find(e => e.name === l) ?? null,
+          savePreferredVersionName: (0, r.useCallback)(
+            t => {
+              i.savePreferredVersion(e, t);
+            },
+            [i, e],
+          ),
+        };
+      }
+    },
+    1116: (e, t, n) => {
+      'use strict';
+      n.d(t, { V: () => c, b: () => s });
+      var r = n(7294),
+        a = n(902),
+        o = n(5893);
+      const i = Symbol('EmptyContext'),
+        l = r.createContext(i);
+      function s(e) {
+        let { children: t, name: n, items: a } = e;
+        const i = (0, r.useMemo)(() => (n && a ? { name: n, items: a } : null), [n, a]);
+        return (0, o.jsx)(l.Provider, { value: i, children: t });
+      }
+      function c() {
+        const e = (0, r.useContext)(l);
+        if (e === i) throw new a.i6('DocsSidebarProvider');
+        return e;
+      }
+    },
+    4477: (e, t, n) => {
+      'use strict';
+      n.d(t, { E: () => s, q: () => l });
+      var r = n(7294),
+        a = n(902),
+        o = n(5893);
+      const i = r.createContext(null);
+      function l(e) {
+        let { children: t, version: n } = e;
+        return (0, o.jsx)(i.Provider, { value: n, children: t });
+      }
+      function s() {
+        const e = (0, r.useContext)(i);
+        if (null === e) throw new a.i6('DocsVersionProvider');
+        return e;
+      }
+    },
+    3163: (e, t, n) => {
+      'use strict';
+      n.d(t, { M: () => p, e: () => f });
+      var r = n(7294),
+        a = n(3102),
+        o = n(7524),
+        i = n(1980),
+        l = n(6668),
+        s = n(902),
+        c = n(5893);
+      const u = r.createContext(void 0);
+      function d() {
+        const e = (function () {
+            const e = (0, a.HY)(),
+              { items: t } = (0, l.L)().navbar;
+            return 0 === t.length && !e.component;
+          })(),
+          t = (0, o.i)(),
+          n = !e && 'mobile' === t,
+          [s, c] = (0, r.useState)(!1);
+        (0, i.Rb)(() => {
+          if (s) return c(!1), !1;
+        });
+        const u = (0, r.useCallback)(() => {
+          c(e => !e);
+        }, []);
+        return (
+          (0, r.useEffect)(() => {
+            'desktop' === t && c(!1);
+          }, [t]),
+          (0, r.useMemo)(() => ({ disabled: e, shouldRender: n, toggle: u, shown: s }), [e, n, u, s])
+        );
+      }
+      function p(e) {
+        let { children: t } = e;
+        const n = d();
+        return (0, c.jsx)(u.Provider, { value: n, children: t });
+      }
+      function f() {
+        const e = r.useContext(u);
+        if (void 0 === e) throw new s.i6('NavbarMobileSidebarProvider');
+        return e;
+      }
+    },
+    3102: (e, t, n) => {
+      'use strict';
+      n.d(t, { HY: () => s, Zo: () => c, n2: () => l });
+      var r = n(7294),
+        a = n(902),
+        o = n(5893);
+      const i = r.createContext(null);
+      function l(e) {
+        let { children: t } = e;
+        const n = (0, r.useState)({ component: null, props: null });
+        return (0, o.jsx)(i.Provider, { value: n, children: t });
+      }
+      function s() {
+        const e = (0, r.useContext)(i);
+        if (!e) throw new a.i6('NavbarSecondaryMenuContentProvider');
+        return e[0];
+      }
+      function c(e) {
+        let { component: t, props: n } = e;
+        const o = (0, r.useContext)(i);
+        if (!o) throw new a.i6('NavbarSecondaryMenuContentProvider');
+        const [, l] = o,
+          s = (0, a.Ql)(n);
+        return (
+          (0, r.useEffect)(() => {
+            l({ component: t, props: s });
+          }, [l, t, s]),
+          (0, r.useEffect)(() => () => l({ component: null, props: null }), [l]),
+          null
+        );
+      }
+    },
+    9727: (e, t, n) => {
+      'use strict';
+      n.d(t, { h: () => a, t: () => o });
+      var r = n(7294);
+      const a = 'navigation-with-keyboard';
+      function o() {
+        (0, r.useEffect)(() => {
+          function e(e) {
+            'keydown' === e.type && 'Tab' === e.key && document.body.classList.add(a),
+              'mousedown' === e.type && document.body.classList.remove(a);
+          }
+          return (
+            document.addEventListener('keydown', e),
+            document.addEventListener('mousedown', e),
+            () => {
+              document.body.classList.remove(a),
+                document.removeEventListener('keydown', e),
+                document.removeEventListener('mousedown', e);
+            }
+          );
+        }, []);
+      }
+    },
+    7524: (e, t, n) => {
+      'use strict';
+      n.d(t, { i: () => l });
+      var r = n(7294),
+        a = n(412);
+      const o = { desktop: 'desktop', mobile: 'mobile', ssr: 'ssr' },
+        i = 996;
+      function l(e) {
+        let { desktopBreakpoint: t = i } = void 0 === e ? {} : e;
+        const [n, l] = (0, r.useState)(() => 'ssr');
+        return (
+          (0, r.useEffect)(() => {
+            function e() {
+              l(
+                (function (e) {
+                  if (!a.Z.canUseDOM) throw new Error('getWindowSize() should only be called after React hydration');
+                  return window.innerWidth > e ? o.desktop : o.mobile;
+                })(t),
+              );
+            }
+            return (
+              e(),
+              window.addEventListener('resize', e),
+              () => {
+                window.removeEventListener('resize', e);
+              }
+            );
+          }, [t]),
+          n
+        );
+      }
+    },
+    5281: (e, t, n) => {
+      'use strict';
+      n.d(t, { k: () => r });
+      const r = {
+        page: {
+          blogListPage: 'blog-list-page',
+          blogPostPage: 'blog-post-page',
+          blogTagsListPage: 'blog-tags-list-page',
+          blogTagPostListPage: 'blog-tags-post-list-page',
+          docsDocPage: 'docs-doc-page',
+          docsTagsListPage: 'docs-tags-list-page',
+          docsTagDocListPage: 'docs-tags-doc-list-page',
+          mdxPage: 'mdx-page',
+        },
+        wrapper: { main: 'main-wrapper', blogPages: 'blog-wrapper', docsPages: 'docs-wrapper', mdxPages: 'mdx-wrapper' },
+        common: {
+          editThisPage: 'theme-edit-this-page',
+          lastUpdated: 'theme-last-updated',
+          backToTopButton: 'theme-back-to-top-button',
+          codeBlock: 'theme-code-block',
+          admonition: 'theme-admonition',
+          unlistedBanner: 'theme-unlisted-banner',
+          admonitionType: e => `theme-admonition-${e}`,
+        },
+        layout: {},
+        docs: {
+          docVersionBanner: 'theme-doc-version-banner',
+          docVersionBadge: 'theme-doc-version-badge',
+          docBreadcrumbs: 'theme-doc-breadcrumbs',
+          docMarkdown: 'theme-doc-markdown',
+          docTocMobile: 'theme-doc-toc-mobile',
+          docTocDesktop: 'theme-doc-toc-desktop',
+          docFooter: 'theme-doc-footer',
+          docFooterTagsRow: 'theme-doc-footer-tags-row',
+          docFooterEditMetaRow: 'theme-doc-footer-edit-meta-row',
+          docSidebarContainer: 'theme-doc-sidebar-container',
+          docSidebarMenu: 'theme-doc-sidebar-menu',
+          docSidebarItemCategory: 'theme-doc-sidebar-item-category',
+          docSidebarItemLink: 'theme-doc-sidebar-item-link',
+          docSidebarItemCategoryLevel: e => `theme-doc-sidebar-item-category-level-${e}`,
+          docSidebarItemLinkLevel: e => `theme-doc-sidebar-item-link-level-${e}`,
+        },
+        blog: {},
+      };
+    },
+    1442: (e, t, n) => {
+      'use strict';
+      function r() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      }
+      n.d(t, { n: () => r });
+    },
+    3438: (e, t, n) => {
+      'use strict';
+      n.d(t, {
+        LM: () => m,
+        MN: () => P,
+        SN: () => _,
+        _F: () => b,
+        cE: () => p,
+        f: () => w,
+        jA: () => h,
+        lO: () => x,
+        oz: () => E,
+        s1: () => S,
+        vY: () => C,
+        xz: () => f,
+      });
+      var r = n(7294),
+        a = n(6550),
+        o = n(8790),
+        i = n(143),
+        l = n(373),
+        s = n(4477),
+        c = n(1116),
+        u = n(7392),
+        d = n(8596);
+      const p = !!i._r;
+      function f(e) {
+        const t = (0, s.E)();
+        if (!e) return;
+        const n = t.docs[e];
+        if (!n) throw new Error(`no version doc found by id=${e}`);
+        return n;
+      }
+      function m(e) {
+        return 'link' !== e.type || e.unlisted
+          ? 'category' === e.type
+            ? (function (e) {
+                if (e.href && !e.linkUnlisted) return e.href;
+                for (const t of e.items) {
+                  const e = m(t);
+                  if (e) return e;
+                }
+              })(e)
+            : void 0
+          : e.href;
+      }
+      function h() {
+        const { pathname: e } = (0, a.TH)(),
+          t = (0, c.V)();
+        if (!t) throw new Error('Unexpected: cant find current sidebar in context');
+        const n = k({ sidebarItems: t.items, pathname: e, onlyCategories: !0 }).slice(-1)[0];
+        if (!n)
+          throw new Error(
+            `${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`,
+          );
+        return n;
+      }
+      const g = (e, t) => void 0 !== e && (0, d.Mg)(e, t),
+        y = (e, t) => e.some(e => b(e, t));
+      function b(e, t) {
+        return 'link' === e.type ? g(e.href, t) : 'category' === e.type && (g(e.href, t) || y(e.items, t));
+      }
+      function v(e, t) {
+        switch (e.type) {
+          case 'category':
+            return b(e, t) || e.items.some(e => v(e, t));
+          case 'link':
+            return !e.unlisted || b(e, t);
+          default:
+            return !0;
+        }
+      }
+      function w(e, t) {
+        return (0, r.useMemo)(() => e.filter(e => v(e, t)), [e, t]);
+      }
+      function k(e) {
+        let { sidebarItems: t, pathname: n, onlyCategories: r = !1 } = e;
+        const a = [];
+        return (
+          (function e(t) {
+            for (const o of t)
+              if (
+                ('category' === o.type && ((0, d.Mg)(o.href, n) || e(o.items))) ||
+                ('link' === o.type && (0, d.Mg)(o.href, n))
+              ) {
+                return (r && 'category' !== o.type) || a.unshift(o), !0;
+              }
+            return !1;
+          })(t),
+          a
+        );
+      }
+      function S() {
+        const e = (0, c.V)(),
+          { pathname: t } = (0, a.TH)(),
+          n = (0, i.gA)()?.pluginData.breadcrumbs;
+        return !1 !== n && e ? k({ sidebarItems: e.items, pathname: t }) : null;
+      }
+      function x(e) {
+        const { activeVersion: t } = (0, i.Iw)(e),
+          { preferredVersion: n } = (0, l.J)(e),
+          a = (0, i.yW)(e);
+        return (0, r.useMemo)(() => (0, u.j)([t, n, a].filter(Boolean)), [t, n, a]);
+      }
+      function E(e, t) {
+        const n = x(t);
+        return (0, r.useMemo)(() => {
+          const t = n.flatMap(e => (e.sidebars ? Object.entries(e.sidebars) : [])),
+            r = t.find(t => t[0] === e);
+          if (!r)
+            throw new Error(
+              `Can't find any sidebar with id "${e}" in version${n.length > 1 ? 's' : ''} ${n.map(e => e.name).join(', ')}".\nAvailable sidebar ids are:\n- ${t.map(e => e[0]).join('\n- ')}`,
+            );
+          return r[1];
+        }, [e, n]);
+      }
+      function C(e, t) {
+        const n = x(t);
+        return (0, r.useMemo)(() => {
+          const t = n.flatMap(e => e.docs),
+            r = t.find(t => t.id === e);
+          if (!r) {
+            if (n.flatMap(e => e.draftIds).includes(e)) return null;
+            throw new Error(
+              `Couldn't find any doc with id "${e}" in version${n.length > 1 ? 's' : ''} "${n.map(e => e.name).join(', ')}".\nAvailable doc ids are:\n- ${(0, u.j)(t.map(e => e.id)).join('\n- ')}`,
+            );
+          }
+          return r;
+        }, [e, n]);
+      }
+      function _(e) {
+        let { route: t } = e;
+        const n = (0, a.TH)(),
+          r = (0, s.E)(),
+          i = t.routes,
+          l = i.find(e => (0, a.LX)(n.pathname, e));
+        if (!l) return null;
+        const c = l.sidebar,
+          u = c ? r.docsSidebars[c] : void 0;
+        return { docElement: (0, o.H)(i), sidebarName: c, sidebarItems: u };
+      }
+      function P(e) {
+        return e.filter(e => !('category' === e.type || 'link' === e.type) || !!m(e));
+      }
+    },
+    1980: (e, t, n) => {
+      'use strict';
+      n.d(t, { Rb: () => i, _X: () => l });
+      var r = n(7294),
+        a = n(6550),
+        o = n(902);
+      function i(e) {
+        !(function (e) {
+          const t = (0, a.k6)(),
+            n = (0, o.zX)(e);
+          (0, r.useEffect)(() => t.block((e, t) => n(e, t)), [t, n]);
+        })((t, n) => {
+          if ('POP' === n) return e(t, n);
+        });
+      }
+      function l(e) {
+        return (function (e) {
+          const t = (0, a.k6)();
+          return (0, r.useSyncExternalStore)(
+            t.listen,
+            () => e(t),
+            () => e(t),
+          );
+        })(t => (null === e ? null : new URLSearchParams(t.location.search).get(e)));
+      }
+    },
+    7392: (e, t, n) => {
+      'use strict';
+      function r(e, t) {
+        return void 0 === t && (t = (e, t) => e === t), e.filter((n, r) => e.findIndex(e => t(e, n)) !== r);
+      }
+      function a(e) {
+        return Array.from(new Set(e));
+      }
+      n.d(t, { j: () => a, l: () => r });
+    },
+    1944: (e, t, n) => {
+      'use strict';
+      n.d(t, { FG: () => f, d: () => d, VC: () => m });
+      var r = n(7294),
+        a = n(512),
+        o = n(5742),
+        i = n(226);
+      function l() {
+        const e = r.useContext(i._);
+        if (!e) throw new Error('Unexpected: no Docusaurus route context found');
+        return e;
+      }
+      var s = n(4996),
+        c = n(2263);
+      var u = n(5893);
+      function d(e) {
+        let { title: t, description: n, keywords: r, image: a, children: i } = e;
+        const l = (function (e) {
+            const { siteConfig: t } = (0, c.Z)(),
+              { title: n, titleDelimiter: r } = t;
+            return e?.trim().length ? `${e.trim()} ${r} ${n}` : n;
+          })(t),
+          { withBaseUrl: d } = (0, s.C)(),
+          p = a ? d(a, { absolute: !0 }) : void 0;
+        return (0, u.jsxs)(o.Z, {
+          children: [
+            t && (0, u.jsx)('title', { children: l }),
+            t && (0, u.jsx)('meta', { property: 'og:title', content: l }),
+            n && (0, u.jsx)('meta', { name: 'description', content: n }),
+            n && (0, u.jsx)('meta', { property: 'og:description', content: n }),
+            r && (0, u.jsx)('meta', { name: 'keywords', content: Array.isArray(r) ? r.join(',') : r }),
+            p && (0, u.jsx)('meta', { property: 'og:image', content: p }),
+            p && (0, u.jsx)('meta', { name: 'twitter:image', content: p }),
+            i,
+          ],
+        });
+      }
+      const p = r.createContext(void 0);
+      function f(e) {
+        let { className: t, children: n } = e;
+        const i = r.useContext(p),
+          l = (0, a.Z)(i, t);
+        return (0, u.jsxs)(p.Provider, {
+          value: l,
+          children: [(0, u.jsx)(o.Z, { children: (0, u.jsx)('html', { className: l }) }), n],
+        });
+      }
+      function m(e) {
+        let { children: t } = e;
+        const n = l(),
+          r = `plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi, '')}`;
+        const o = `plugin-id-${n.plugin.id}`;
+        return (0, u.jsx)(f, { className: (0, a.Z)(r, o), children: t });
+      }
+    },
+    902: (e, t, n) => {
+      'use strict';
+      n.d(t, { D9: () => l, Qc: () => u, Ql: () => c, i6: () => s, zX: () => i });
+      var r = n(7294),
+        a = n(469),
+        o = n(5893);
+      function i(e) {
+        const t = (0, r.useRef)(e);
+        return (
+          (0, a.Z)(() => {
+            t.current = e;
+          }, [e]),
+          (0, r.useCallback)(function () {
+            return t.current(...arguments);
+          }, [])
+        );
+      }
+      function l(e) {
+        const t = (0, r.useRef)();
+        return (
+          (0, a.Z)(() => {
+            t.current = e;
+          }),
+          t.current
+        );
+      }
+      class s extends Error {
+        constructor(e, t) {
+          super(),
+            (this.name = 'ReactContextError'),
+            (this.message = `Hook ${this.stack?.split('\n')[1]?.match(/at (?:\w+\.)?(?<name>\w+)/)?.groups.name ?? ''} is called outside the <${e}>. ${t ?? ''}`);
+        }
+      }
+      function c(e) {
+        const t = Object.entries(e);
+        return t.sort((e, t) => e[0].localeCompare(t[0])), (0, r.useMemo)(() => e, t.flat());
+      }
+      function u(e) {
+        return t => {
+          let { children: n } = t;
+          return (0, o.jsx)(o.Fragment, { children: e.reduceRight((e, t) => (0, o.jsx)(t, { children: e }), n) });
+        };
+      }
+    },
+    8596: (e, t, n) => {
+      'use strict';
+      n.d(t, { Mg: () => i, Ns: () => l });
+      var r = n(7294),
+        a = n(723),
+        o = n(2263);
+      function i(e, t) {
+        const n = e => (!e || e.endsWith('/') ? e : `${e}/`)?.toLowerCase();
+        return n(e) === n(t);
+      }
+      function l() {
+        const { baseUrl: e } = (0, o.Z)().siteConfig;
+        return (0, r.useMemo)(
+          () =>
+            (function (e) {
+              let { baseUrl: t, routes: n } = e;
+              function r(e) {
+                return e.path === t && !0 === e.exact;
+              }
+              function a(e) {
+                return e.path === t && !e.exact;
+              }
+              return (function e(t) {
+                if (0 === t.length) return;
+                return t.find(r) || e(t.filter(a).flatMap(e => e.routes ?? []));
+              })(n);
+            })({ routes: a.Z, baseUrl: e }),
+          [e],
+        );
+      }
+    },
+    2466: (e, t, n) => {
+      'use strict';
+      n.d(t, { Ct: () => h, OC: () => u, RF: () => f, o5: () => m });
+      var r = n(7294),
+        a = n(412),
+        o = n(2389),
+        i = n(469),
+        l = n(902),
+        s = n(5893);
+      const c = r.createContext(void 0);
+      function u(e) {
+        let { children: t } = e;
+        const n = (function () {
+          const e = (0, r.useRef)(!0);
+          return (0, r.useMemo)(
+            () => ({
+              scrollEventsEnabledRef: e,
+              enableScrollEvents: () => {
+                e.current = !0;
+              },
+              disableScrollEvents: () => {
+                e.current = !1;
+              },
+            }),
+            [],
+          );
+        })();
+        return (0, s.jsx)(c.Provider, { value: n, children: t });
+      }
+      function d() {
+        const e = (0, r.useContext)(c);
+        if (null == e) throw new l.i6('ScrollControllerProvider');
+        return e;
+      }
+      const p = () => (a.Z.canUseDOM ? { scrollX: window.pageXOffset, scrollY: window.pageYOffset } : null);
+      function f(e, t) {
+        void 0 === t && (t = []);
+        const { scrollEventsEnabledRef: n } = d(),
+          a = (0, r.useRef)(p()),
+          o = (0, l.zX)(e);
+        (0, r.useEffect)(() => {
+          const e = () => {
+              if (!n.current) return;
+              const e = p();
+              o(e, a.current), (a.current = e);
+            },
+            t = { passive: !0 };
+          return e(), window.addEventListener('scroll', e, t), () => window.removeEventListener('scroll', e, t);
+        }, [o, n, ...t]);
+      }
+      function m() {
+        const e = d(),
+          t = (function () {
+            const e = (0, r.useRef)({ elem: null, top: 0 }),
+              t = (0, r.useCallback)(t => {
+                e.current = { elem: t, top: t.getBoundingClientRect().top };
+              }, []),
+              n = (0, r.useCallback)(() => {
+                const {
+                  current: { elem: t, top: n },
+                } = e;
+                if (!t) return { restored: !1 };
+                const r = t.getBoundingClientRect().top - n;
+                return r && window.scrollBy({ left: 0, top: r }), (e.current = { elem: null, top: 0 }), { restored: 0 !== r };
+              }, []);
+            return (0, r.useMemo)(() => ({ save: t, restore: n }), [n, t]);
+          })(),
+          n = (0, r.useRef)(void 0),
+          a = (0, r.useCallback)(
+            r => {
+              t.save(r),
+                e.disableScrollEvents(),
+                (n.current = () => {
+                  const { restored: r } = t.restore();
+                  if (((n.current = void 0), r)) {
+                    const t = () => {
+                      e.enableScrollEvents(), window.removeEventListener('scroll', t);
+                    };
+                    window.addEventListener('scroll', t);
+                  } else e.enableScrollEvents();
+                });
+            },
+            [e, t],
+          );
+        return (
+          (0, i.Z)(() => {
+            queueMicrotask(() => n.current?.());
+          }),
+          { blockElementScrollPositionUntilNextRender: a }
+        );
+      }
+      function h() {
+        const e = (0, r.useRef)(null),
+          t = (0, o.Z)() && 'smooth' === getComputedStyle(document.documentElement).scrollBehavior;
+        return {
+          startScroll: n => {
+            e.current = t
+              ? (function (e) {
+                  return window.scrollTo({ top: e, behavior: 'smooth' }), () => {};
+                })(n)
+              : (function (e) {
+                  let t = null;
+                  const n = document.documentElement.scrollTop > e;
+                  return (
+                    (function r() {
+                      const a = document.documentElement.scrollTop;
+                      ((n && a > e) || (!n && a < e)) &&
+                        ((t = requestAnimationFrame(r)), window.scrollTo(0, Math.floor(0.85 * (a - e)) + e));
+                    })(),
+                    () => t && cancelAnimationFrame(t)
+                  );
+                })(n);
+          },
+          cancelScroll: () => e.current?.(),
+        };
+      }
+    },
+    3320: (e, t, n) => {
+      'use strict';
+      n.d(t, { HX: () => r, os: () => a });
+      n(2263);
+      const r = 'default';
+      function a(e, t) {
+        return `docs-${e}-${t}`;
+      }
+    },
+    12: (e, t, n) => {
+      'use strict';
+      n.d(t, { Nk: () => u, WA: () => c });
+      var r = n(7294);
+      const a = 'localStorage';
+      function o(e) {
+        let { key: t, oldValue: n, newValue: r, storage: a } = e;
+        if (n === r) return;
+        const o = document.createEvent('StorageEvent');
+        o.initStorageEvent('storage', !1, !1, t, n, r, window.location.href, a), window.dispatchEvent(o);
+      }
+      function i(e) {
+        if ((void 0 === e && (e = a), 'undefined' == typeof window))
+          throw new Error('Browser storage is not available on Node.js/Docusaurus SSR process.');
+        if ('none' === e) return null;
+        try {
+          return window[e];
+        } catch (n) {
+          return (
+            (t = n),
+            l ||
+              (console.warn(
+                'Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.',
+                t,
+              ),
+              (l = !0)),
+            null
+          );
+        }
+        var t;
+      }
+      let l = !1;
+      const s = { get: () => null, set: () => {}, del: () => {}, listen: () => () => {} };
+      function c(e, t) {
+        if ('undefined' == typeof window)
+          return (function (e) {
+            function t() {
+              throw new Error(
+                `Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`,
+              );
+            }
+            return { get: t, set: t, del: t, listen: t };
+          })(e);
+        const n = i(t?.persistence);
+        return null === n
+          ? s
+          : {
+              get: () => {
+                try {
+                  return n.getItem(e);
+                } catch (t) {
+                  return console.error(`Docusaurus storage error, can't get key=${e}`, t), null;
+                }
+              },
+              set: t => {
+                try {
+                  const r = n.getItem(e);
+                  n.setItem(e, t), o({ key: e, oldValue: r, newValue: t, storage: n });
+                } catch (r) {
+                  console.error(`Docusaurus storage error, can't set ${e}=${t}`, r);
+                }
+              },
+              del: () => {
+                try {
+                  const t = n.getItem(e);
+                  n.removeItem(e), o({ key: e, oldValue: t, newValue: null, storage: n });
+                } catch (t) {
+                  console.error(`Docusaurus storage error, can't delete key=${e}`, t);
+                }
+              },
+              listen: t => {
+                try {
+                  const r = r => {
+                    r.storageArea === n && r.key === e && t(r);
+                  };
+                  return window.addEventListener('storage', r), () => window.removeEventListener('storage', r);
+                } catch (r) {
+                  return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`, r), () => {};
+                }
+              },
+            };
+      }
+      function u(e, t) {
+        const n = (0, r.useRef)(() => (null === e ? s : c(e, t))).current(),
+          a = (0, r.useCallback)(e => ('undefined' == typeof window ? () => {} : n.listen(e)), [n]);
+        return [
+          (0, r.useSyncExternalStore)(
+            a,
+            () => ('undefined' == typeof window ? null : n.get()),
+            () => null,
+          ),
+          n,
+        ];
+      }
+    },
+    4711: (e, t, n) => {
+      'use strict';
+      n.d(t, { l: () => i });
+      var r = n(2263),
+        a = n(6550),
+        o = n(8780);
+      function i() {
+        const {
+            siteConfig: { baseUrl: e, url: t, trailingSlash: n },
+            i18n: { defaultLocale: i, currentLocale: l },
+          } = (0, r.Z)(),
+          { pathname: s } = (0, a.TH)(),
+          c = (0, o.applyTrailingSlash)(s, { trailingSlash: n, baseUrl: e }),
+          u = l === i ? e : e.replace(`/${l}/`, '/'),
+          d = c.replace(e, '');
+        return {
+          createUrl: function (e) {
+            let { locale: n, fullyQualified: r } = e;
+            return `${r ? t : ''}${(function (e) {
+              return e === i ? `${u}` : `${u}${e}/`;
+            })(n)}${d}`;
+          },
+        };
+      }
+    },
+    5936: (e, t, n) => {
+      'use strict';
+      n.d(t, { S: () => i });
+      var r = n(7294),
+        a = n(6550),
+        o = n(902);
+      function i(e) {
+        const t = (0, a.TH)(),
+          n = (0, o.D9)(t),
+          i = (0, o.zX)(e);
+        (0, r.useEffect)(() => {
+          n && t !== n && i({ location: t, previousLocation: n });
+        }, [i, t, n]);
+      }
+    },
+    6668: (e, t, n) => {
+      'use strict';
+      n.d(t, { L: () => a });
+      var r = n(2263);
+      function a() {
+        return (0, r.Z)().siteConfig.themeConfig;
+      }
+    },
+    8802: (e, t) => {
+      'use strict';
+      Object.defineProperty(t, '__esModule', { value: !0 }),
+        (t.default = function (e, t) {
+          const { trailingSlash: n, baseUrl: r } = t;
+          if (e.startsWith('#')) return e;
+          if (void 0 === n) return e;
+          const [a] = e.split(/[#?]/),
+            o =
+              '/' === a || a === r
+                ? a
+                : ((i = a),
+                  n
+                    ? (function (e) {
+                        return e.endsWith('/') ? e : `${e}/`;
+                      })(i)
+                    : (function (e) {
+                        return e.endsWith('/') ? e.slice(0, -1) : e;
+                      })(i));
+          var i;
+          return e.replace(a, o);
+        });
+    },
+    4143: (e, t) => {
+      'use strict';
+      Object.defineProperty(t, '__esModule', { value: !0 }),
+        (t.getErrorCausalChain = void 0),
+        (t.getErrorCausalChain = function e(t) {
+          return t.cause ? [t, ...e(t.cause)] : [t];
+        });
+    },
+    8780: function (e, t, n) {
+      'use strict';
+      var r =
+        (this && this.__importDefault) ||
+        function (e) {
+          return e && e.__esModule ? e : { default: e };
+        };
+      Object.defineProperty(t, '__esModule', { value: !0 }),
+        (t.getErrorCausalChain = t.applyTrailingSlash = t.blogPostContainerID = void 0),
+        (t.blogPostContainerID = '__blog-post-container');
+      var a = n(8802);
+      Object.defineProperty(t, 'applyTrailingSlash', {
+        enumerable: !0,
+        get: function () {
+          return r(a).default;
+        },
+      });
+      var o = n(4143);
+      Object.defineProperty(t, 'getErrorCausalChain', {
+        enumerable: !0,
+        get: function () {
+          return o.getErrorCausalChain;
+        },
+      });
+    },
+    9318: (e, t, n) => {
+      'use strict';
+      n.d(t, { lX: () => w, q_: () => _, ob: () => f, PP: () => T, Ep: () => p });
+      var r = n(7462);
+      function a(e) {
+        return '/' === e.charAt(0);
+      }
+      function o(e, t) {
+        for (var n = t, r = n + 1, a = e.length; r < a; n += 1, r += 1) e[n] = e[r];
+        e.pop();
+      }
+      const i = function (e, t) {
+        void 0 === t && (t = '');
+        var n,
+          r = (e && e.split('/')) || [],
+          i = (t && t.split('/')) || [],
+          l = e && a(e),
+          s = t && a(t),
+          c = l || s;
+        if ((e && a(e) ? (i = r) : r.length && (i.pop(), (i = i.concat(r))), !i.length)) return '/';
+        if (i.length) {
+          var u = i[i.length - 1];
+          n = '.' === u || '..' === u || '' === u;
+        } else n = !1;
+        for (var d = 0, p = i.length; p >= 0; p--) {
+          var f = i[p];
+          '.' === f ? o(i, p) : '..' === f ? (o(i, p), d++) : d && (o(i, p), d--);
+        }
+        if (!c) for (; d--; d) i.unshift('..');
+        !c || '' === i[0] || (i[0] && a(i[0])) || i.unshift('');
+        var m = i.join('/');
+        return n && '/' !== m.substr(-1) && (m += '/'), m;
+      };
+      var l = n(8776);
+      function s(e) {
+        return '/' === e.charAt(0) ? e : '/' + e;
+      }
+      function c(e) {
+        return '/' === e.charAt(0) ? e.substr(1) : e;
+      }
+      function u(e, t) {
+        return (function (e, t) {
+          return 0 === e.toLowerCase().indexOf(t.toLowerCase()) && -1 !== '/?#'.indexOf(e.charAt(t.length));
+        })(e, t)
+          ? e.substr(t.length)
+          : e;
+      }
+      function d(e) {
+        return '/' === e.charAt(e.length - 1) ? e.slice(0, -1) : e;
+      }
+      function p(e) {
+        var t = e.pathname,
+          n = e.search,
+          r = e.hash,
+          a = t || '/';
+        return (
+          n && '?' !== n && (a += '?' === n.charAt(0) ? n : '?' + n),
+          r && '#' !== r && (a += '#' === r.charAt(0) ? r : '#' + r),
+          a
+        );
+      }
+      function f(e, t, n, a) {
+        var o;
+        'string' == typeof e
+          ? ((o = (function (e) {
+              var t = e || '/',
+                n = '',
+                r = '',
+                a = t.indexOf('#');
+              -1 !== a && ((r = t.substr(a)), (t = t.substr(0, a)));
+              var o = t.indexOf('?');
+              return (
+                -1 !== o && ((n = t.substr(o)), (t = t.substr(0, o))),
+                { pathname: t, search: '?' === n ? '' : n, hash: '#' === r ? '' : r }
+              );
+            })(e)),
+            (o.state = t))
+          : (void 0 === (o = (0, r.Z)({}, e)).pathname && (o.pathname = ''),
+            o.search ? '?' !== o.search.charAt(0) && (o.search = '?' + o.search) : (o.search = ''),
+            o.hash ? '#' !== o.hash.charAt(0) && (o.hash = '#' + o.hash) : (o.hash = ''),
+            void 0 !== t && void 0 === o.state && (o.state = t));
+        try {
+          o.pathname = decodeURI(o.pathname);
+        } catch (l) {
+          throw l instanceof URIError
+            ? new URIError(
+                'Pathname "' + o.pathname + '" could not be decoded. This is likely caused by an invalid percent-encoding.',
+              )
+            : l;
+        }
+        return (
+          n && (o.key = n),
+          a
+            ? o.pathname
+              ? '/' !== o.pathname.charAt(0) && (o.pathname = i(o.pathname, a.pathname))
+              : (o.pathname = a.pathname)
+            : o.pathname || (o.pathname = '/'),
+          o
+        );
+      }
+      function m() {
+        var e = null;
+        var t = [];
+        return {
+          setPrompt: function (t) {
+            return (
+              (e = t),
+              function () {
+                e === t && (e = null);
+              }
+            );
+          },
+          confirmTransitionTo: function (t, n, r, a) {
+            if (null != e) {
+              var o = 'function' == typeof e ? e(t, n) : e;
+              'string' == typeof o ? ('function' == typeof r ? r(o, a) : a(!0)) : a(!1 !== o);
+            } else a(!0);
+          },
+          appendListener: function (e) {
+            var n = !0;
+            function r() {
+              n && e.apply(void 0, arguments);
+            }
+            return (
+              t.push(r),
+              function () {
+                (n = !1),
+                  (t = t.filter(function (e) {
+                    return e !== r;
+                  }));
+              }
+            );
+          },
+          notifyListeners: function () {
+            for (var e = arguments.length, n = new Array(e), r = 0; r < e; r++) n[r] = arguments[r];
+            t.forEach(function (e) {
+              return e.apply(void 0, n);
+            });
+          },
+        };
+      }
+      var h = !('undefined' == typeof window || !window.document || !window.document.createElement);
+      function g(e, t) {
+        t(window.confirm(e));
+      }
+      var y = 'popstate',
+        b = 'hashchange';
+      function v() {
+        try {
+          return window.history.state || {};
+        } catch (e) {
+          return {};
+        }
+      }
+      function w(e) {
+        void 0 === e && (e = {}), h || (0, l.Z)(!1);
+        var t,
+          n = window.history,
+          a =
+            ((-1 === (t = window.navigator.userAgent).indexOf('Android 2.') && -1 === t.indexOf('Android 4.0')) ||
+              -1 === t.indexOf('Mobile Safari') ||
+              -1 !== t.indexOf('Chrome') ||
+              -1 !== t.indexOf('Windows Phone')) &&
+            window.history &&
+            'pushState' in window.history,
+          o = !(-1 === window.navigator.userAgent.indexOf('Trident')),
+          i = e,
+          c = i.forceRefresh,
+          w = void 0 !== c && c,
+          k = i.getUserConfirmation,
+          S = void 0 === k ? g : k,
+          x = i.keyLength,
+          E = void 0 === x ? 6 : x,
+          C = e.basename ? d(s(e.basename)) : '';
+        function _(e) {
+          var t = e || {},
+            n = t.key,
+            r = t.state,
+            a = window.location,
+            o = a.pathname + a.search + a.hash;
+          return C && (o = u(o, C)), f(o, r, n);
+        }
+        function P() {
+          return Math.random().toString(36).substr(2, E);
+        }
+        var T = m();
+        function A(e) {
+          (0, r.Z)($, e), ($.length = n.length), T.notifyListeners($.location, $.action);
+        }
+        function L(e) {
+          (function (e) {
+            return void 0 === e.state && -1 === navigator.userAgent.indexOf('CriOS');
+          })(e) || I(_(e.state));
+        }
+        function j() {
+          I(_(v()));
+        }
+        var R = !1;
+        function I(e) {
+          if (R) (R = !1), A();
+          else {
+            T.confirmTransitionTo(e, 'POP', S, function (t) {
+              t
+                ? A({ action: 'POP', location: e })
+                : (function (e) {
+                    var t = $.location,
+                      n = O.indexOf(t.key);
+                    -1 === n && (n = 0);
+                    var r = O.indexOf(e.key);
+                    -1 === r && (r = 0);
+                    var a = n - r;
+                    a && ((R = !0), F(a));
+                  })(e);
+            });
+          }
+        }
+        var N = _(v()),
+          O = [N.key];
+        function D(e) {
+          return C + p(e);
+        }
+        function F(e) {
+          n.go(e);
+        }
+        var M = 0;
+        function B(e) {
+          1 === (M += e) && 1 === e
+            ? (window.addEventListener(y, L), o && window.addEventListener(b, j))
+            : 0 === M && (window.removeEventListener(y, L), o && window.removeEventListener(b, j));
+        }
+        var z = !1;
+        var $ = {
+          length: n.length,
+          action: 'POP',
+          location: N,
+          createHref: D,
+          push: function (e, t) {
+            var r = 'PUSH',
+              o = f(e, t, P(), $.location);
+            T.confirmTransitionTo(o, r, S, function (e) {
+              if (e) {
+                var t = D(o),
+                  i = o.key,
+                  l = o.state;
+                if (a)
+                  if ((n.pushState({ key: i, state: l }, null, t), w)) window.location.href = t;
+                  else {
+                    var s = O.indexOf($.location.key),
+                      c = O.slice(0, s + 1);
+                    c.push(o.key), (O = c), A({ action: r, location: o });
+                  }
+                else window.location.href = t;
+              }
+            });
+          },
+          replace: function (e, t) {
+            var r = 'REPLACE',
+              o = f(e, t, P(), $.location);
+            T.confirmTransitionTo(o, r, S, function (e) {
+              if (e) {
+                var t = D(o),
+                  i = o.key,
+                  l = o.state;
+                if (a)
+                  if ((n.replaceState({ key: i, state: l }, null, t), w)) window.location.replace(t);
+                  else {
+                    var s = O.indexOf($.location.key);
+                    -1 !== s && (O[s] = o.key), A({ action: r, location: o });
+                  }
+                else window.location.replace(t);
+              }
+            });
+          },
+          go: F,
+          goBack: function () {
+            F(-1);
+          },
+          goForward: function () {
+            F(1);
+          },
+          block: function (e) {
+            void 0 === e && (e = !1);
+            var t = T.setPrompt(e);
+            return (
+              z || (B(1), (z = !0)),
+              function () {
+                return z && ((z = !1), B(-1)), t();
+              }
+            );
+          },
+          listen: function (e) {
+            var t = T.appendListener(e);
+            return (
+              B(1),
+              function () {
+                B(-1), t();
+              }
+            );
+          },
+        };
+        return $;
+      }
+      var k = 'hashchange',
+        S = {
+          hashbang: {
+            encodePath: function (e) {
+              return '!' === e.charAt(0) ? e : '!/' + c(e);
+            },
+            decodePath: function (e) {
+              return '!' === e.charAt(0) ? e.substr(1) : e;
+            },
+          },
+          noslash: { encodePath: c, decodePath: s },
+          slash: { encodePath: s, decodePath: s },
+        };
+      function x(e) {
+        var t = e.indexOf('#');
+        return -1 === t ? e : e.slice(0, t);
+      }
+      function E() {
+        var e = window.location.href,
+          t = e.indexOf('#');
+        return -1 === t ? '' : e.substring(t + 1);
+      }
+      function C(e) {
+        window.location.replace(x(window.location.href) + '#' + e);
+      }
+      function _(e) {
+        void 0 === e && (e = {}), h || (0, l.Z)(!1);
+        var t = window.history,
+          n = (window.navigator.userAgent.indexOf('Firefox'), e),
+          a = n.getUserConfirmation,
+          o = void 0 === a ? g : a,
+          i = n.hashType,
+          c = void 0 === i ? 'slash' : i,
+          y = e.basename ? d(s(e.basename)) : '',
+          b = S[c],
+          v = b.encodePath,
+          w = b.decodePath;
+        function _() {
+          var e = w(E());
+          return y && (e = u(e, y)), f(e);
+        }
+        var P = m();
+        function T(e) {
+          (0, r.Z)(z, e), (z.length = t.length), P.notifyListeners(z.location, z.action);
+        }
+        var A = !1,
+          L = null;
+        function j() {
+          var e,
+            t,
+            n = E(),
+            r = v(n);
+          if (n !== r) C(r);
+          else {
+            var a = _(),
+              i = z.location;
+            if (!A && ((t = a), (e = i).pathname === t.pathname && e.search === t.search && e.hash === t.hash)) return;
+            if (L === p(a)) return;
+            (L = null),
+              (function (e) {
+                if (A) (A = !1), T();
+                else {
+                  var t = 'POP';
+                  P.confirmTransitionTo(e, t, o, function (n) {
+                    n
+                      ? T({ action: t, location: e })
+                      : (function (e) {
+                          var t = z.location,
+                            n = O.lastIndexOf(p(t));
+                          -1 === n && (n = 0);
+                          var r = O.lastIndexOf(p(e));
+                          -1 === r && (r = 0);
+                          var a = n - r;
+                          a && ((A = !0), D(a));
+                        })(e);
+                  });
+                }
+              })(a);
+          }
+        }
+        var R = E(),
+          I = v(R);
+        R !== I && C(I);
+        var N = _(),
+          O = [p(N)];
+        function D(e) {
+          t.go(e);
+        }
+        var F = 0;
+        function M(e) {
+          1 === (F += e) && 1 === e ? window.addEventListener(k, j) : 0 === F && window.removeEventListener(k, j);
+        }
+        var B = !1;
+        var z = {
+          length: t.length,
+          action: 'POP',
+          location: N,
+          createHref: function (e) {
+            var t = document.querySelector('base'),
+              n = '';
+            return t && t.getAttribute('href') && (n = x(window.location.href)), n + '#' + v(y + p(e));
+          },
+          push: function (e, t) {
+            var n = 'PUSH',
+              r = f(e, void 0, void 0, z.location);
+            P.confirmTransitionTo(r, n, o, function (e) {
+              if (e) {
+                var t = p(r),
+                  a = v(y + t);
+                if (E() !== a) {
+                  (L = t),
+                    (function (e) {
+                      window.location.hash = e;
+                    })(a);
+                  var o = O.lastIndexOf(p(z.location)),
+                    i = O.slice(0, o + 1);
+                  i.push(t), (O = i), T({ action: n, location: r });
+                } else T();
+              }
+            });
+          },
+          replace: function (e, t) {
+            var n = 'REPLACE',
+              r = f(e, void 0, void 0, z.location);
+            P.confirmTransitionTo(r, n, o, function (e) {
+              if (e) {
+                var t = p(r),
+                  a = v(y + t);
+                E() !== a && ((L = t), C(a));
+                var o = O.indexOf(p(z.location));
+                -1 !== o && (O[o] = t), T({ action: n, location: r });
+              }
+            });
+          },
+          go: D,
+          goBack: function () {
+            D(-1);
+          },
+          goForward: function () {
+            D(1);
+          },
+          block: function (e) {
+            void 0 === e && (e = !1);
+            var t = P.setPrompt(e);
+            return (
+              B || (M(1), (B = !0)),
+              function () {
+                return B && ((B = !1), M(-1)), t();
+              }
+            );
+          },
+          listen: function (e) {
+            var t = P.appendListener(e);
+            return (
+              M(1),
+              function () {
+                M(-1), t();
+              }
+            );
+          },
+        };
+        return z;
+      }
+      function P(e, t, n) {
+        return Math.min(Math.max(e, t), n);
+      }
+      function T(e) {
+        void 0 === e && (e = {});
+        var t = e,
+          n = t.getUserConfirmation,
+          a = t.initialEntries,
+          o = void 0 === a ? ['/'] : a,
+          i = t.initialIndex,
+          l = void 0 === i ? 0 : i,
+          s = t.keyLength,
+          c = void 0 === s ? 6 : s,
+          u = m();
+        function d(e) {
+          (0, r.Z)(w, e), (w.length = w.entries.length), u.notifyListeners(w.location, w.action);
+        }
+        function h() {
+          return Math.random().toString(36).substr(2, c);
+        }
+        var g = P(l, 0, o.length - 1),
+          y = o.map(function (e) {
+            return f(e, void 0, 'string' == typeof e ? h() : e.key || h());
+          }),
+          b = p;
+        function v(e) {
+          var t = P(w.index + e, 0, w.entries.length - 1),
+            r = w.entries[t];
+          u.confirmTransitionTo(r, 'POP', n, function (e) {
+            e ? d({ action: 'POP', location: r, index: t }) : d();
+          });
+        }
+        var w = {
+          length: y.length,
+          action: 'POP',
+          location: y[g],
+          index: g,
+          entries: y,
+          createHref: b,
+          push: function (e, t) {
+            var r = 'PUSH',
+              a = f(e, t, h(), w.location);
+            u.confirmTransitionTo(a, r, n, function (e) {
+              if (e) {
+                var t = w.index + 1,
+                  n = w.entries.slice(0);
+                n.length > t ? n.splice(t, n.length - t, a) : n.push(a), d({ action: r, location: a, index: t, entries: n });
+              }
+            });
+          },
+          replace: function (e, t) {
+            var r = 'REPLACE',
+              a = f(e, t, h(), w.location);
+            u.confirmTransitionTo(a, r, n, function (e) {
+              e && ((w.entries[w.index] = a), d({ action: r, location: a }));
+            });
+          },
+          go: v,
+          goBack: function () {
+            v(-1);
+          },
+          goForward: function () {
+            v(1);
+          },
+          canGo: function (e) {
+            var t = w.index + e;
+            return t >= 0 && t < w.entries.length;
+          },
+          block: function (e) {
+            return void 0 === e && (e = !1), u.setPrompt(e);
+          },
+          listen: function (e) {
+            return u.appendListener(e);
+          },
+        };
+        return w;
+      }
+    },
+    8679: (e, t, n) => {
+      'use strict';
+      var r = n(9864),
+        a = {
+          childContextTypes: !0,
+          contextType: !0,
+          contextTypes: !0,
+          defaultProps: !0,
+          displayName: !0,
+          getDefaultProps: !0,
+          getDerivedStateFromError: !0,
+          getDerivedStateFromProps: !0,
+          mixins: !0,
+          propTypes: !0,
+          type: !0,
+        },
+        o = { name: !0, length: !0, prototype: !0, caller: !0, callee: !0, arguments: !0, arity: !0 },
+        i = { $$typeof: !0, compare: !0, defaultProps: !0, displayName: !0, propTypes: !0, type: !0 },
+        l = {};
+      function s(e) {
+        return r.isMemo(e) ? i : l[e.$$typeof] || a;
+      }
+      (l[r.ForwardRef] = { $$typeof: !0, render: !0, defaultProps: !0, displayName: !0, propTypes: !0 }), (l[r.Memo] = i);
+      var c = Object.defineProperty,
+        u = Object.getOwnPropertyNames,
+        d = Object.getOwnPropertySymbols,
+        p = Object.getOwnPropertyDescriptor,
+        f = Object.getPrototypeOf,
+        m = Object.prototype;
+      e.exports = function e(t, n, r) {
+        if ('string' != typeof n) {
+          if (m) {
+            var a = f(n);
+            a && a !== m && e(t, a, r);
+          }
+          var i = u(n);
+          d && (i = i.concat(d(n)));
+          for (var l = s(t), h = s(n), g = 0; g < i.length; ++g) {
+            var y = i[g];
+            if (!(o[y] || (r && r[y]) || (h && h[y]) || (l && l[y]))) {
+              var b = p(n, y);
+              try {
+                c(t, y, b);
+              } catch (v) {}
+            }
+          }
+        }
+        return t;
+      };
+    },
+    1143: e => {
+      'use strict';
+      e.exports = function (e, t, n, r, a, o, i, l) {
+        if (!e) {
+          var s;
+          if (void 0 === t)
+            s = new Error(
+              'Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.',
+            );
+          else {
+            var c = [n, r, a, o, i, l],
+              u = 0;
+            (s = new Error(
+              t.replace(/%s/g, function () {
+                return c[u++];
+              }),
+            )).name = 'Invariant Violation';
+          }
+          throw ((s.framesToPop = 1), s);
+        }
+      };
+    },
+    5826: e => {
+      e.exports =
+        Array.isArray ||
+        function (e) {
+          return '[object Array]' == Object.prototype.toString.call(e);
+        };
+    },
+    2497: (e, t, n) => {
+      'use strict';
+      n.r(t);
+    },
+    2295: (e, t, n) => {
+      'use strict';
+      n.r(t);
+    },
+    4865: function (e, t, n) {
+      var r, a;
+      (r = function () {
+        var e,
+          t,
+          n = { version: '0.2.0' },
+          r = (n.settings = {
+            minimum: 0.08,
+            easing: 'ease',
+            positionUsing: '',
+            speed: 200,
+            trickle: !0,
+            trickleRate: 0.02,
+            trickleSpeed: 800,
+            showSpinner: !0,
+            barSelector: '[role="bar"]',
+            spinnerSelector: '[role="spinner"]',
+            parent: 'body',
+            template:
+              '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>',
+          });
+        function a(e, t, n) {
+          return e < t ? t : e > n ? n : e;
+        }
+        function o(e) {
+          return 100 * (-1 + e);
+        }
+        function i(e, t, n) {
+          var a;
+          return (
+            ((a =
+              'translate3d' === r.positionUsing
+                ? { transform: 'translate3d(' + o(e) + '%,0,0)' }
+                : 'translate' === r.positionUsing
+                  ? { transform: 'translate(' + o(e) + '%,0)' }
+                  : { 'margin-left': o(e) + '%' }).transition = 'all ' + t + 'ms ' + n),
+            a
+          );
+        }
+        (n.configure = function (e) {
+          var t, n;
+          for (t in e) void 0 !== (n = e[t]) && e.hasOwnProperty(t) && (r[t] = n);
+          return this;
+        }),
+          (n.status = null),
+          (n.set = function (e) {
+            var t = n.isStarted();
+            (e = a(e, r.minimum, 1)), (n.status = 1 === e ? null : e);
+            var o = n.render(!t),
+              c = o.querySelector(r.barSelector),
+              u = r.speed,
+              d = r.easing;
+            return (
+              o.offsetWidth,
+              l(function (t) {
+                '' === r.positionUsing && (r.positionUsing = n.getPositioningCSS()),
+                  s(c, i(e, u, d)),
+                  1 === e
+                    ? (s(o, { transition: 'none', opacity: 1 }),
+                      o.offsetWidth,
+                      setTimeout(function () {
+                        s(o, { transition: 'all ' + u + 'ms linear', opacity: 0 }),
+                          setTimeout(function () {
+                            n.remove(), t();
+                          }, u);
+                      }, u))
+                    : setTimeout(t, u);
+              }),
+              this
+            );
+          }),
+          (n.isStarted = function () {
+            return 'number' == typeof n.status;
+          }),
+          (n.start = function () {
+            n.status || n.set(0);
+            var e = function () {
+              setTimeout(function () {
+                n.status && (n.trickle(), e());
+              }, r.trickleSpeed);
+            };
+            return r.trickle && e(), this;
+          }),
+          (n.done = function (e) {
+            return e || n.status ? n.inc(0.3 + 0.5 * Math.random()).set(1) : this;
+          }),
+          (n.inc = function (e) {
+            var t = n.status;
+            return t
+              ? ('number' != typeof e && (e = (1 - t) * a(Math.random() * t, 0.1, 0.95)), (t = a(t + e, 0, 0.994)), n.set(t))
+              : n.start();
+          }),
+          (n.trickle = function () {
+            return n.inc(Math.random() * r.trickleRate);
+          }),
+          (e = 0),
+          (t = 0),
+          (n.promise = function (r) {
+            return r && 'resolved' !== r.state()
+              ? (0 === t && n.start(),
+                e++,
+                t++,
+                r.always(function () {
+                  0 == --t ? ((e = 0), n.done()) : n.set((e - t) / e);
+                }),
+                this)
+              : this;
+          }),
+          (n.render = function (e) {
+            if (n.isRendered()) return document.getElementById('nprogress');
+            u(document.documentElement, 'nprogress-busy');
+            var t = document.createElement('div');
+            (t.id = 'nprogress'), (t.innerHTML = r.template);
+            var a,
+              i = t.querySelector(r.barSelector),
+              l = e ? '-100' : o(n.status || 0),
+              c = document.querySelector(r.parent);
+            return (
+              s(i, { transition: 'all 0 linear', transform: 'translate3d(' + l + '%,0,0)' }),
+              r.showSpinner || ((a = t.querySelector(r.spinnerSelector)) && f(a)),
+              c != document.body && u(c, 'nprogress-custom-parent'),
+              c.appendChild(t),
+              t
+            );
+          }),
+          (n.remove = function () {
+            d(document.documentElement, 'nprogress-busy'), d(document.querySelector(r.parent), 'nprogress-custom-parent');
+            var e = document.getElementById('nprogress');
+            e && f(e);
+          }),
+          (n.isRendered = function () {
+            return !!document.getElementById('nprogress');
+          }),
+          (n.getPositioningCSS = function () {
+            var e = document.body.style,
+              t =
+                'WebkitTransform' in e
+                  ? 'Webkit'
+                  : 'MozTransform' in e
+                    ? 'Moz'
+                    : 'msTransform' in e
+                      ? 'ms'
+                      : 'OTransform' in e
+                        ? 'O'
+                        : '';
+            return t + 'Perspective' in e ? 'translate3d' : t + 'Transform' in e ? 'translate' : 'margin';
+          });
+        var l = (function () {
+            var e = [];
+            function t() {
+              var n = e.shift();
+              n && n(t);
+            }
+            return function (n) {
+              e.push(n), 1 == e.length && t();
+            };
+          })(),
+          s = (function () {
+            var e = ['Webkit', 'O', 'Moz', 'ms'],
+              t = {};
+            function n(e) {
+              return e.replace(/^-ms-/, 'ms-').replace(/-([\da-z])/gi, function (e, t) {
+                return t.toUpperCase();
+              });
+            }
+            function r(t) {
+              var n = document.body.style;
+              if (t in n) return t;
+              for (var r, a = e.length, o = t.charAt(0).toUpperCase() + t.slice(1); a--; ) if ((r = e[a] + o) in n) return r;
+              return t;
+            }
+            function a(e) {
+              return (e = n(e)), t[e] || (t[e] = r(e));
+            }
+            function o(e, t, n) {
+              (t = a(t)), (e.style[t] = n);
+            }
+            return function (e, t) {
+              var n,
+                r,
+                a = arguments;
+              if (2 == a.length) for (n in t) void 0 !== (r = t[n]) && t.hasOwnProperty(n) && o(e, n, r);
+              else o(e, a[1], a[2]);
+            };
+          })();
+        function c(e, t) {
+          return ('string' == typeof e ? e : p(e)).indexOf(' ' + t + ' ') >= 0;
+        }
+        function u(e, t) {
+          var n = p(e),
+            r = n + t;
+          c(n, t) || (e.className = r.substring(1));
+        }
+        function d(e, t) {
+          var n,
+            r = p(e);
+          c(e, t) && ((n = r.replace(' ' + t + ' ', ' ')), (e.className = n.substring(1, n.length - 1)));
+        }
+        function p(e) {
+          return (' ' + (e.className || '') + ' ').replace(/\s+/gi, ' ');
+        }
+        function f(e) {
+          e && e.parentNode && e.parentNode.removeChild(e);
+        }
+        return n;
+      }),
+        void 0 === (a = 'function' == typeof r ? r.call(t, n, t, e) : r) || (e.exports = a);
+    },
+    4779: (e, t, n) => {
+      var r = n(5826);
+      (e.exports = f),
+        (e.exports.parse = o),
+        (e.exports.compile = function (e, t) {
+          return l(o(e, t), t);
+        }),
+        (e.exports.tokensToFunction = l),
+        (e.exports.tokensToRegExp = p);
+      var a = new RegExp(
+        [
+          '(\\\\.)',
+          '([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))',
+        ].join('|'),
+        'g',
+      );
+      function o(e, t) {
+        for (var n, r = [], o = 0, i = 0, l = '', u = (t && t.delimiter) || '/'; null != (n = a.exec(e)); ) {
+          var d = n[0],
+            p = n[1],
+            f = n.index;
+          if (((l += e.slice(i, f)), (i = f + d.length), p)) l += p[1];
+          else {
+            var m = e[i],
+              h = n[2],
+              g = n[3],
+              y = n[4],
+              b = n[5],
+              v = n[6],
+              w = n[7];
+            l && (r.push(l), (l = ''));
+            var k = null != h && null != m && m !== h,
+              S = '+' === v || '*' === v,
+              x = '?' === v || '*' === v,
+              E = n[2] || u,
+              C = y || b;
+            r.push({
+              name: g || o++,
+              prefix: h || '',
+              delimiter: E,
+              optional: x,
+              repeat: S,
+              partial: k,
+              asterisk: !!w,
+              pattern: C ? c(C) : w ? '.*' : '[^' + s(E) + ']+?',
+            });
+          }
+        }
+        return i < e.length && (l += e.substr(i)), l && r.push(l), r;
+      }
+      function i(e) {
+        return encodeURI(e).replace(/[\/?#]/g, function (e) {
+          return '%' + e.charCodeAt(0).toString(16).toUpperCase();
+        });
+      }
+      function l(e, t) {
+        for (var n = new Array(e.length), a = 0; a < e.length; a++)
+          'object' == typeof e[a] && (n[a] = new RegExp('^(?:' + e[a].pattern + ')$', d(t)));
+        return function (t, a) {
+          for (var o = '', l = t || {}, s = (a || {}).pretty ? i : encodeURIComponent, c = 0; c < e.length; c++) {
+            var u = e[c];
+            if ('string' != typeof u) {
+              var d,
+                p = l[u.name];
+              if (null == p) {
+                if (u.optional) {
+                  u.partial && (o += u.prefix);
+                  continue;
+                }
+                throw new TypeError('Expected "' + u.name + '" to be defined');
+              }
+              if (r(p)) {
+                if (!u.repeat)
+                  throw new TypeError('Expected "' + u.name + '" to not repeat, but received `' + JSON.stringify(p) + '`');
+                if (0 === p.length) {
+                  if (u.optional) continue;
+                  throw new TypeError('Expected "' + u.name + '" to not be empty');
+                }
+                for (var f = 0; f < p.length; f++) {
+                  if (((d = s(p[f])), !n[c].test(d)))
+                    throw new TypeError(
+                      'Expected all "' + u.name + '" to match "' + u.pattern + '", but received `' + JSON.stringify(d) + '`',
+                    );
+                  o += (0 === f ? u.prefix : u.delimiter) + d;
+                }
+              } else {
+                if (
+                  ((d = u.asterisk
+                    ? encodeURI(p).replace(/[?#]/g, function (e) {
+                        return '%' + e.charCodeAt(0).toString(16).toUpperCase();
+                      })
+                    : s(p)),
+                  !n[c].test(d))
+                )
+                  throw new TypeError('Expected "' + u.name + '" to match "' + u.pattern + '", but received "' + d + '"');
+                o += u.prefix + d;
+              }
+            } else o += u;
+          }
+          return o;
+        };
+      }
+      function s(e) {
+        return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g, '\\$1');
+      }
+      function c(e) {
+        return e.replace(/([=!:$\/()])/g, '\\$1');
+      }
+      function u(e, t) {
+        return (e.keys = t), e;
+      }
+      function d(e) {
+        return e && e.sensitive ? '' : 'i';
+      }
+      function p(e, t, n) {
+        r(t) || ((n = t || n), (t = []));
+        for (var a = (n = n || {}).strict, o = !1 !== n.end, i = '', l = 0; l < e.length; l++) {
+          var c = e[l];
+          if ('string' == typeof c) i += s(c);
+          else {
+            var p = s(c.prefix),
+              f = '(?:' + c.pattern + ')';
+            t.push(c),
+              c.repeat && (f += '(?:' + p + f + ')*'),
+              (i += f = c.optional ? (c.partial ? p + '(' + f + ')?' : '(?:' + p + '(' + f + '))?') : p + '(' + f + ')');
+          }
+        }
+        var m = s(n.delimiter || '/'),
+          h = i.slice(-m.length) === m;
+        return (
+          a || (i = (h ? i.slice(0, -m.length) : i) + '(?:' + m + '(?=$))?'),
+          (i += o ? '$' : a && h ? '' : '(?=' + m + '|$)'),
+          u(new RegExp('^' + i, d(n)), t)
+        );
+      }
+      function f(e, t, n) {
+        return (
+          r(t) || ((n = t || n), (t = [])),
+          (n = n || {}),
+          e instanceof RegExp
+            ? (function (e, t) {
+                var n = e.source.match(/\((?!\?)/g);
+                if (n)
+                  for (var r = 0; r < n.length; r++)
+                    t.push({
+                      name: r,
+                      prefix: null,
+                      delimiter: null,
+                      optional: !1,
+                      repeat: !1,
+                      partial: !1,
+                      asterisk: !1,
+                      pattern: null,
+                    });
+                return u(e, t);
+              })(e, t)
+            : r(e)
+              ? (function (e, t, n) {
+                  for (var r = [], a = 0; a < e.length; a++) r.push(f(e[a], t, n).source);
+                  return u(new RegExp('(?:' + r.join('|') + ')', d(n)), t);
+                })(e, t, n)
+              : (function (e, t, n) {
+                  return p(o(e, n), t, n);
+                })(e, t, n)
+        );
+      }
+    },
+    9901: e => {
+      e.exports &&
+        (e.exports = {
+          core: { meta: { path: 'components/prism-core.js', option: 'mandatory' }, core: 'Core' },
+          themes: {
+            meta: { path: 'themes/{id}.css', link: 'index.html?theme={id}', exclusive: !0 },
+            prism: { title: 'Default', option: 'default' },
+            'prism-dark': 'Dark',
+            'prism-funky': 'Funky',
+            'prism-okaidia': { title: 'Okaidia', owner: 'ocodia' },
+            'prism-twilight': { title: 'Twilight', owner: 'remybach' },
+            'prism-coy': { title: 'Coy', owner: 'tshedor' },
+            'prism-solarizedlight': { title: 'Solarized Light', owner: 'hectormatos2011 ' },
+            'prism-tomorrow': { title: 'Tomorrow Night', owner: 'Rosey' },
+          },
+          languages: {
+            meta: { path: 'components/prism-{id}', noCSS: !0, examplesPath: 'examples/prism-{id}', addCheckAll: !0 },
+            markup: {
+              title: 'Markup',
+              alias: ['html', 'xml', 'svg', 'mathml', 'ssml', 'atom', 'rss'],
+              aliasTitles: { html: 'HTML', xml: 'XML', svg: 'SVG', mathml: 'MathML', ssml: 'SSML', atom: 'Atom', rss: 'RSS' },
+              option: 'default',
+            },
+            css: { title: 'CSS', option: 'default', modify: 'markup' },
+            clike: { title: 'C-like', option: 'default' },
+            javascript: {
+              title: 'JavaScript',
+              require: 'clike',
+              modify: 'markup',
+              optional: 'regex',
+              alias: 'js',
+              option: 'default',
+            },
+            abap: { title: 'ABAP', owner: 'dellagustin' },
+            abnf: { title: 'ABNF', owner: 'RunDevelopment' },
+            actionscript: { title: 'ActionScript', require: 'javascript', modify: 'markup', owner: 'Golmote' },
+            ada: { title: 'Ada', owner: 'Lucretia' },
+            agda: { title: 'Agda', owner: 'xy-ren' },
+            al: { title: 'AL', owner: 'RunDevelopment' },
+            antlr4: { title: 'ANTLR4', alias: 'g4', owner: 'RunDevelopment' },
+            apacheconf: { title: 'Apache Configuration', owner: 'GuiTeK' },
+            apex: { title: 'Apex', require: ['clike', 'sql'], owner: 'RunDevelopment' },
+            apl: { title: 'APL', owner: 'ngn' },
+            applescript: { title: 'AppleScript', owner: 'Golmote' },
+            aql: { title: 'AQL', owner: 'RunDevelopment' },
+            arduino: { title: 'Arduino', require: 'cpp', alias: 'ino', owner: 'dkern' },
+            arff: { title: 'ARFF', owner: 'Golmote' },
+            armasm: { title: 'ARM Assembly', alias: 'arm-asm', owner: 'RunDevelopment' },
+            arturo: {
+              title: 'Arturo',
+              alias: 'art',
+              optional: ['bash', 'css', 'javascript', 'markup', 'markdown', 'sql'],
+              owner: 'drkameleon',
+            },
+            asciidoc: { alias: 'adoc', title: 'AsciiDoc', owner: 'Golmote' },
+            aspnet: { title: 'ASP.NET (C#)', require: ['markup', 'csharp'], owner: 'nauzilus' },
+            asm6502: { title: '6502 Assembly', owner: 'kzurawel' },
+            asmatmel: { title: 'Atmel AVR Assembly', owner: 'cerkit' },
+            autohotkey: { title: 'AutoHotkey', owner: 'aviaryan' },
+            autoit: { title: 'AutoIt', owner: 'Golmote' },
+            avisynth: { title: 'AviSynth', alias: 'avs', owner: 'Zinfidel' },
+            'avro-idl': { title: 'Avro IDL', alias: 'avdl', owner: 'RunDevelopment' },
+            awk: { title: 'AWK', alias: 'gawk', aliasTitles: { gawk: 'GAWK' }, owner: 'RunDevelopment' },
+            bash: { title: 'Bash', alias: ['sh', 'shell'], aliasTitles: { sh: 'Shell', shell: 'Shell' }, owner: 'zeitgeist87' },
+            basic: { title: 'BASIC', owner: 'Golmote' },
+            batch: { title: 'Batch', owner: 'Golmote' },
+            bbcode: { title: 'BBcode', alias: 'shortcode', aliasTitles: { shortcode: 'Shortcode' }, owner: 'RunDevelopment' },
+            bbj: { title: 'BBj', owner: 'hyyan' },
+            bicep: { title: 'Bicep', owner: 'johnnyreilly' },
+            birb: { title: 'Birb', require: 'clike', owner: 'Calamity210' },
+            bison: { title: 'Bison', require: 'c', owner: 'Golmote' },
+            bnf: { title: 'BNF', alias: 'rbnf', aliasTitles: { rbnf: 'RBNF' }, owner: 'RunDevelopment' },
+            bqn: { title: 'BQN', owner: 'yewscion' },
+            brainfuck: { title: 'Brainfuck', owner: 'Golmote' },
+            brightscript: { title: 'BrightScript', owner: 'RunDevelopment' },
+            bro: { title: 'Bro', owner: 'wayward710' },
+            bsl: { title: 'BSL (1C:Enterprise)', alias: 'oscript', aliasTitles: { oscript: 'OneScript' }, owner: 'Diversus23' },
+            c: { title: 'C', require: 'clike', owner: 'zeitgeist87' },
+            csharp: { title: 'C#', require: 'clike', alias: ['cs', 'dotnet'], owner: 'mvalipour' },
+            cpp: { title: 'C++', require: 'c', owner: 'zeitgeist87' },
+            cfscript: { title: 'CFScript', require: 'clike', alias: 'cfc', owner: 'mjclemente' },
+            chaiscript: { title: 'ChaiScript', require: ['clike', 'cpp'], owner: 'RunDevelopment' },
+            cil: { title: 'CIL', owner: 'sbrl' },
+            cilkc: { title: 'Cilk/C', require: 'c', alias: 'cilk-c', owner: 'OpenCilk' },
+            cilkcpp: { title: 'Cilk/C++', require: 'cpp', alias: ['cilk-cpp', 'cilk'], owner: 'OpenCilk' },
+            clojure: { title: 'Clojure', owner: 'troglotit' },
+            cmake: { title: 'CMake', owner: 'mjrogozinski' },
+            cobol: { title: 'COBOL', owner: 'RunDevelopment' },
+            coffeescript: { title: 'CoffeeScript', require: 'javascript', alias: 'coffee', owner: 'R-osey' },
+            concurnas: { title: 'Concurnas', alias: 'conc', owner: 'jasontatton' },
+            csp: { title: 'Content-Security-Policy', owner: 'ScottHelme' },
+            cooklang: { title: 'Cooklang', owner: 'ahue' },
+            coq: { title: 'Coq', owner: 'RunDevelopment' },
+            crystal: { title: 'Crystal', require: 'ruby', owner: 'MakeNowJust' },
+            'css-extras': { title: 'CSS Extras', require: 'css', modify: 'css', owner: 'milesj' },
+            csv: { title: 'CSV', owner: 'RunDevelopment' },
+            cue: { title: 'CUE', owner: 'RunDevelopment' },
+            cypher: { title: 'Cypher', owner: 'RunDevelopment' },
+            d: { title: 'D', require: 'clike', owner: 'Golmote' },
+            dart: { title: 'Dart', require: 'clike', owner: 'Golmote' },
+            dataweave: { title: 'DataWeave', owner: 'machaval' },
+            dax: { title: 'DAX', owner: 'peterbud' },
+            dhall: { title: 'Dhall', owner: 'RunDevelopment' },
+            diff: { title: 'Diff', owner: 'uranusjr' },
+            django: { title: 'Django/Jinja2', require: 'markup-templating', alias: 'jinja2', owner: 'romanvm' },
+            'dns-zone-file': { title: 'DNS zone file', owner: 'RunDevelopment', alias: 'dns-zone' },
+            docker: { title: 'Docker', alias: 'dockerfile', owner: 'JustinBeckwith' },
+            dot: { title: 'DOT (Graphviz)', alias: 'gv', optional: 'markup', owner: 'RunDevelopment' },
+            ebnf: { title: 'EBNF', owner: 'RunDevelopment' },
+            editorconfig: { title: 'EditorConfig', owner: 'osipxd' },
+            eiffel: { title: 'Eiffel', owner: 'Conaclos' },
+            ejs: {
+              title: 'EJS',
+              require: ['javascript', 'markup-templating'],
+              owner: 'RunDevelopment',
+              alias: 'eta',
+              aliasTitles: { eta: 'Eta' },
+            },
+            elixir: { title: 'Elixir', owner: 'Golmote' },
+            elm: { title: 'Elm', owner: 'zwilias' },
+            etlua: { title: 'Embedded Lua templating', require: ['lua', 'markup-templating'], owner: 'RunDevelopment' },
+            erb: { title: 'ERB', require: ['ruby', 'markup-templating'], owner: 'Golmote' },
+            erlang: { title: 'Erlang', owner: 'Golmote' },
+            'excel-formula': { title: 'Excel Formula', alias: ['xlsx', 'xls'], owner: 'RunDevelopment' },
+            fsharp: { title: 'F#', require: 'clike', owner: 'simonreynolds7' },
+            factor: { title: 'Factor', owner: 'catb0t' },
+            false: { title: 'False', owner: 'edukisto' },
+            'firestore-security-rules': { title: 'Firestore security rules', require: 'clike', owner: 'RunDevelopment' },
+            flow: { title: 'Flow', require: 'javascript', owner: 'Golmote' },
+            fortran: { title: 'Fortran', owner: 'Golmote' },
+            ftl: { title: 'FreeMarker Template Language', require: 'markup-templating', owner: 'RunDevelopment' },
+            gml: { title: 'GameMaker Language', alias: 'gamemakerlanguage', require: 'clike', owner: 'LiarOnce' },
+            gap: { title: 'GAP (CAS)', owner: 'RunDevelopment' },
+            gcode: { title: 'G-code', owner: 'RunDevelopment' },
+            gdscript: { title: 'GDScript', owner: 'RunDevelopment' },
+            gedcom: { title: 'GEDCOM', owner: 'Golmote' },
+            gettext: { title: 'gettext', alias: 'po', owner: 'RunDevelopment' },
+            gherkin: { title: 'Gherkin', owner: 'hason' },
+            git: { title: 'Git', owner: 'lgiraudel' },
+            glsl: { title: 'GLSL', require: 'c', owner: 'Golmote' },
+            gn: { title: 'GN', alias: 'gni', owner: 'RunDevelopment' },
+            'linker-script': { title: 'GNU Linker Script', alias: 'ld', owner: 'RunDevelopment' },
+            go: { title: 'Go', require: 'clike', owner: 'arnehormann' },
+            'go-module': { title: 'Go module', alias: 'go-mod', owner: 'RunDevelopment' },
+            gradle: { title: 'Gradle', require: 'clike', owner: 'zeabdelkhalek-badido18' },
+            graphql: { title: 'GraphQL', optional: 'markdown', owner: 'Golmote' },
+            groovy: { title: 'Groovy', require: 'clike', owner: 'robfletcher' },
+            haml: {
+              title: 'Haml',
+              require: 'ruby',
+              optional: ['css', 'css-extras', 'coffeescript', 'erb', 'javascript', 'less', 'markdown', 'scss', 'textile'],
+              owner: 'Golmote',
+            },
+            handlebars: {
+              title: 'Handlebars',
+              require: 'markup-templating',
+              alias: ['hbs', 'mustache'],
+              aliasTitles: { mustache: 'Mustache' },
+              owner: 'Golmote',
+            },
+            haskell: { title: 'Haskell', alias: 'hs', owner: 'bholst' },
+            haxe: { title: 'Haxe', require: 'clike', optional: 'regex', owner: 'Golmote' },
+            hcl: { title: 'HCL', owner: 'outsideris' },
+            hlsl: { title: 'HLSL', require: 'c', owner: 'RunDevelopment' },
+            hoon: { title: 'Hoon', owner: 'matildepark' },
+            http: {
+              title: 'HTTP',
+              optional: ['csp', 'css', 'hpkp', 'hsts', 'javascript', 'json', 'markup', 'uri'],
+              owner: 'danielgtaylor',
+            },
+            hpkp: { title: 'HTTP Public-Key-Pins', owner: 'ScottHelme' },
+            hsts: { title: 'HTTP Strict-Transport-Security', owner: 'ScottHelme' },
+            ichigojam: { title: 'IchigoJam', owner: 'BlueCocoa' },
+            icon: { title: 'Icon', owner: 'Golmote' },
+            'icu-message-format': { title: 'ICU Message Format', owner: 'RunDevelopment' },
+            idris: { title: 'Idris', alias: 'idr', owner: 'KeenS', require: 'haskell' },
+            ignore: {
+              title: '.ignore',
+              owner: 'osipxd',
+              alias: ['gitignore', 'hgignore', 'npmignore'],
+              aliasTitles: { gitignore: '.gitignore', hgignore: '.hgignore', npmignore: '.npmignore' },
+            },
+            inform7: { title: 'Inform 7', owner: 'Golmote' },
+            ini: { title: 'Ini', owner: 'aviaryan' },
+            io: { title: 'Io', owner: 'AlesTsurko' },
+            j: { title: 'J', owner: 'Golmote' },
+            java: { title: 'Java', require: 'clike', owner: 'sherblot' },
+            javadoc: {
+              title: 'JavaDoc',
+              require: ['markup', 'java', 'javadoclike'],
+              modify: 'java',
+              optional: 'scala',
+              owner: 'RunDevelopment',
+            },
+            javadoclike: { title: 'JavaDoc-like', modify: ['java', 'javascript', 'php'], owner: 'RunDevelopment' },
+            javastacktrace: { title: 'Java stack trace', owner: 'RunDevelopment' },
+            jexl: { title: 'Jexl', owner: 'czosel' },
+            jolie: { title: 'Jolie', require: 'clike', owner: 'thesave' },
+            jq: { title: 'JQ', owner: 'RunDevelopment' },
+            jsdoc: {
+              title: 'JSDoc',
+              require: ['javascript', 'javadoclike', 'typescript'],
+              modify: 'javascript',
+              optional: ['actionscript', 'coffeescript'],
+              owner: 'RunDevelopment',
+            },
+            'js-extras': {
+              title: 'JS Extras',
+              require: 'javascript',
+              modify: 'javascript',
+              optional: ['actionscript', 'coffeescript', 'flow', 'n4js', 'typescript'],
+              owner: 'RunDevelopment',
+            },
+            json: { title: 'JSON', alias: 'webmanifest', aliasTitles: { webmanifest: 'Web App Manifest' }, owner: 'CupOfTea696' },
+            json5: { title: 'JSON5', require: 'json', owner: 'RunDevelopment' },
+            jsonp: { title: 'JSONP', require: 'json', owner: 'RunDevelopment' },
+            jsstacktrace: { title: 'JS stack trace', owner: 'sbrl' },
+            'js-templates': {
+              title: 'JS Templates',
+              require: 'javascript',
+              modify: 'javascript',
+              optional: ['css', 'css-extras', 'graphql', 'markdown', 'markup', 'sql'],
+              owner: 'RunDevelopment',
+            },
+            julia: { title: 'Julia', owner: 'cdagnino' },
+            keepalived: { title: 'Keepalived Configure', owner: 'dev-itsheng' },
+            keyman: { title: 'Keyman', owner: 'mcdurdin' },
+            kotlin: {
+              title: 'Kotlin',
+              alias: ['kt', 'kts'],
+              aliasTitles: { kts: 'Kotlin Script' },
+              require: 'clike',
+              owner: 'Golmote',
+            },
+            kumir: { title: 'KuMir (\u041a\u0443\u041c\u0438\u0440)', alias: 'kum', owner: 'edukisto' },
+            kusto: { title: 'Kusto', owner: 'RunDevelopment' },
+            latex: {
+              title: 'LaTeX',
+              alias: ['tex', 'context'],
+              aliasTitles: { tex: 'TeX', context: 'ConTeXt' },
+              owner: 'japborst',
+            },
+            latte: { title: 'Latte', require: ['clike', 'markup-templating', 'php'], owner: 'nette' },
+            less: { title: 'Less', require: 'css', optional: 'css-extras', owner: 'Golmote' },
+            lilypond: { title: 'LilyPond', require: 'scheme', alias: 'ly', owner: 'RunDevelopment' },
+            liquid: { title: 'Liquid', require: 'markup-templating', owner: 'cinhtau' },
+            lisp: { title: 'Lisp', alias: ['emacs', 'elisp', 'emacs-lisp'], owner: 'JuanCaicedo' },
+            livescript: { title: 'LiveScript', owner: 'Golmote' },
+            llvm: { title: 'LLVM IR', owner: 'porglezomp' },
+            log: { title: 'Log file', optional: 'javastacktrace', owner: 'RunDevelopment' },
+            lolcode: { title: 'LOLCODE', owner: 'Golmote' },
+            lua: { title: 'Lua', owner: 'Golmote' },
+            magma: { title: 'Magma (CAS)', owner: 'RunDevelopment' },
+            makefile: { title: 'Makefile', owner: 'Golmote' },
+            markdown: { title: 'Markdown', require: 'markup', optional: 'yaml', alias: 'md', owner: 'Golmote' },
+            'markup-templating': { title: 'Markup templating', require: 'markup', owner: 'Golmote' },
+            mata: { title: 'Mata', owner: 'RunDevelopment' },
+            matlab: { title: 'MATLAB', owner: 'Golmote' },
+            maxscript: { title: 'MAXScript', owner: 'RunDevelopment' },
+            mel: { title: 'MEL', owner: 'Golmote' },
+            mermaid: { title: 'Mermaid', owner: 'RunDevelopment' },
+            metafont: { title: 'METAFONT', owner: 'LaeriExNihilo' },
+            mizar: { title: 'Mizar', owner: 'Golmote' },
+            mongodb: { title: 'MongoDB', owner: 'airs0urce', require: 'javascript' },
+            monkey: { title: 'Monkey', owner: 'Golmote' },
+            moonscript: { title: 'MoonScript', alias: 'moon', owner: 'RunDevelopment' },
+            n1ql: { title: 'N1QL', owner: 'TMWilds' },
+            n4js: { title: 'N4JS', require: 'javascript', optional: 'jsdoc', alias: 'n4jsd', owner: 'bsmith-n4' },
+            'nand2tetris-hdl': { title: 'Nand To Tetris HDL', owner: 'stephanmax' },
+            naniscript: { title: 'Naninovel Script', owner: 'Elringus', alias: 'nani' },
+            nasm: { title: 'NASM', owner: 'rbmj' },
+            neon: { title: 'NEON', owner: 'nette' },
+            nevod: { title: 'Nevod', owner: 'nezaboodka' },
+            nginx: { title: 'nginx', owner: 'volado' },
+            nim: { title: 'Nim', owner: 'Golmote' },
+            nix: { title: 'Nix', owner: 'Golmote' },
+            nsis: { title: 'NSIS', owner: 'idleberg' },
+            objectivec: { title: 'Objective-C', require: 'c', alias: 'objc', owner: 'uranusjr' },
+            ocaml: { title: 'OCaml', owner: 'Golmote' },
+            odin: { title: 'Odin', owner: 'edukisto' },
+            opencl: { title: 'OpenCL', require: 'c', modify: ['c', 'cpp'], owner: 'Milania1' },
+            openqasm: { title: 'OpenQasm', alias: 'qasm', owner: 'RunDevelopment' },
+            oz: { title: 'Oz', owner: 'Golmote' },
+            parigp: { title: 'PARI/GP', owner: 'Golmote' },
+            parser: { title: 'Parser', require: 'markup', owner: 'Golmote' },
+            pascal: { title: 'Pascal', alias: 'objectpascal', aliasTitles: { objectpascal: 'Object Pascal' }, owner: 'Golmote' },
+            pascaligo: { title: 'Pascaligo', owner: 'DefinitelyNotAGoat' },
+            psl: { title: 'PATROL Scripting Language', owner: 'bertysentry' },
+            pcaxis: { title: 'PC-Axis', alias: 'px', owner: 'RunDevelopment' },
+            peoplecode: { title: 'PeopleCode', alias: 'pcode', owner: 'RunDevelopment' },
+            perl: { title: 'Perl', owner: 'Golmote' },
+            php: { title: 'PHP', require: 'markup-templating', owner: 'milesj' },
+            phpdoc: { title: 'PHPDoc', require: ['php', 'javadoclike'], modify: 'php', owner: 'RunDevelopment' },
+            'php-extras': { title: 'PHP Extras', require: 'php', modify: 'php', owner: 'milesj' },
+            'plant-uml': { title: 'PlantUML', alias: 'plantuml', owner: 'RunDevelopment' },
+            plsql: { title: 'PL/SQL', require: 'sql', owner: 'Golmote' },
+            powerquery: { title: 'PowerQuery', alias: ['pq', 'mscript'], owner: 'peterbud' },
+            powershell: { title: 'PowerShell', owner: 'nauzilus' },
+            processing: { title: 'Processing', require: 'clike', owner: 'Golmote' },
+            prolog: { title: 'Prolog', owner: 'Golmote' },
+            promql: { title: 'PromQL', owner: 'arendjr' },
+            properties: { title: '.properties', owner: 'Golmote' },
+            protobuf: { title: 'Protocol Buffers', require: 'clike', owner: 'just-boris' },
+            pug: {
+              title: 'Pug',
+              require: ['markup', 'javascript'],
+              optional: ['coffeescript', 'ejs', 'handlebars', 'less', 'livescript', 'markdown', 'scss', 'stylus', 'twig'],
+              owner: 'Golmote',
+            },
+            puppet: { title: 'Puppet', owner: 'Golmote' },
+            pure: { title: 'Pure', optional: ['c', 'cpp', 'fortran'], owner: 'Golmote' },
+            purebasic: { title: 'PureBasic', require: 'clike', alias: 'pbfasm', owner: 'HeX0R101' },
+            purescript: { title: 'PureScript', require: 'haskell', alias: 'purs', owner: 'sriharshachilakapati' },
+            python: { title: 'Python', alias: 'py', owner: 'multipetros' },
+            qsharp: { title: 'Q#', require: 'clike', alias: 'qs', owner: 'fedonman' },
+            q: { title: 'Q (kdb+ database)', owner: 'Golmote' },
+            qml: { title: 'QML', require: 'javascript', owner: 'RunDevelopment' },
+            qore: { title: 'Qore', require: 'clike', owner: 'temnroegg' },
+            r: { title: 'R', owner: 'Golmote' },
+            racket: { title: 'Racket', require: 'scheme', alias: 'rkt', owner: 'RunDevelopment' },
+            cshtml: {
+              title: 'Razor C#',
+              alias: 'razor',
+              require: ['markup', 'csharp'],
+              optional: ['css', 'css-extras', 'javascript', 'js-extras'],
+              owner: 'RunDevelopment',
+            },
+            jsx: {
+              title: 'React JSX',
+              require: ['markup', 'javascript'],
+              optional: ['jsdoc', 'js-extras', 'js-templates'],
+              owner: 'vkbansal',
+            },
+            tsx: { title: 'React TSX', require: ['jsx', 'typescript'] },
+            reason: { title: 'Reason', require: 'clike', owner: 'Golmote' },
+            regex: { title: 'Regex', owner: 'RunDevelopment' },
+            rego: { title: 'Rego', owner: 'JordanSh' },
+            renpy: { title: "Ren'py", alias: 'rpy', owner: 'HyuchiaDiego' },
+            rescript: { title: 'ReScript', alias: 'res', owner: 'vmarcosp' },
+            rest: { title: 'reST (reStructuredText)', owner: 'Golmote' },
+            rip: { title: 'Rip', owner: 'ravinggenius' },
+            roboconf: { title: 'Roboconf', owner: 'Golmote' },
+            robotframework: { title: 'Robot Framework', alias: 'robot', owner: 'RunDevelopment' },
+            ruby: { title: 'Ruby', require: 'clike', alias: 'rb', owner: 'samflores' },
+            rust: { title: 'Rust', owner: 'Golmote' },
+            sas: { title: 'SAS', optional: ['groovy', 'lua', 'sql'], owner: 'Golmote' },
+            sass: { title: 'Sass (Sass)', require: 'css', optional: 'css-extras', owner: 'Golmote' },
+            scss: { title: 'Sass (SCSS)', require: 'css', optional: 'css-extras', owner: 'MoOx' },
+            scala: { title: 'Scala', require: 'java', owner: 'jozic' },
+            scheme: { title: 'Scheme', owner: 'bacchus123' },
+            'shell-session': {
+              title: 'Shell session',
+              require: 'bash',
+              alias: ['sh-session', 'shellsession'],
+              owner: 'RunDevelopment',
+            },
+            smali: { title: 'Smali', owner: 'RunDevelopment' },
+            smalltalk: { title: 'Smalltalk', owner: 'Golmote' },
+            smarty: { title: 'Smarty', require: 'markup-templating', optional: 'php', owner: 'Golmote' },
+            sml: { title: 'SML', alias: 'smlnj', aliasTitles: { smlnj: 'SML/NJ' }, owner: 'RunDevelopment' },
+            solidity: { title: 'Solidity (Ethereum)', alias: 'sol', require: 'clike', owner: 'glachaud' },
+            'solution-file': { title: 'Solution file', alias: 'sln', owner: 'RunDevelopment' },
+            soy: { title: 'Soy (Closure Template)', require: 'markup-templating', owner: 'Golmote' },
+            sparql: { title: 'SPARQL', require: 'turtle', owner: 'Triply-Dev', alias: 'rq' },
+            'splunk-spl': { title: 'Splunk SPL', owner: 'RunDevelopment' },
+            sqf: { title: 'SQF: Status Quo Function (Arma 3)', require: 'clike', owner: 'RunDevelopment' },
+            sql: { title: 'SQL', owner: 'multipetros' },
+            squirrel: { title: 'Squirrel', require: 'clike', owner: 'RunDevelopment' },
+            stan: { title: 'Stan', owner: 'RunDevelopment' },
+            stata: { title: 'Stata Ado', require: ['mata', 'java', 'python'], owner: 'RunDevelopment' },
+            iecst: { title: 'Structured Text (IEC 61131-3)', owner: 'serhioromano' },
+            stylus: { title: 'Stylus', owner: 'vkbansal' },
+            supercollider: { title: 'SuperCollider', alias: 'sclang', owner: 'RunDevelopment' },
+            swift: { title: 'Swift', owner: 'chrischares' },
+            systemd: { title: 'Systemd configuration file', owner: 'RunDevelopment' },
+            't4-templating': { title: 'T4 templating', owner: 'RunDevelopment' },
+            't4-cs': {
+              title: 'T4 Text Templates (C#)',
+              require: ['t4-templating', 'csharp'],
+              alias: 't4',
+              owner: 'RunDevelopment',
+            },
+            't4-vb': { title: 'T4 Text Templates (VB)', require: ['t4-templating', 'vbnet'], owner: 'RunDevelopment' },
+            tap: { title: 'TAP', owner: 'isaacs', require: 'yaml' },
+            tcl: { title: 'Tcl', owner: 'PeterChaplin' },
+            tt2: { title: 'Template Toolkit 2', require: ['clike', 'markup-templating'], owner: 'gflohr' },
+            textile: { title: 'Textile', require: 'markup', optional: 'css', owner: 'Golmote' },
+            toml: { title: 'TOML', owner: 'RunDevelopment' },
+            tremor: {
+              title: 'Tremor',
+              alias: ['trickle', 'troy'],
+              owner: 'darach',
+              aliasTitles: { trickle: 'trickle', troy: 'troy' },
+            },
+            turtle: { title: 'Turtle', alias: 'trig', aliasTitles: { trig: 'TriG' }, owner: 'jakubklimek' },
+            twig: { title: 'Twig', require: 'markup-templating', owner: 'brandonkelly' },
+            typescript: { title: 'TypeScript', require: 'javascript', optional: 'js-templates', alias: 'ts', owner: 'vkbansal' },
+            typoscript: { title: 'TypoScript', alias: 'tsconfig', aliasTitles: { tsconfig: 'TSConfig' }, owner: 'dkern' },
+            unrealscript: { title: 'UnrealScript', alias: ['uscript', 'uc'], owner: 'RunDevelopment' },
+            uorazor: { title: 'UO Razor Script', owner: 'jaseowns' },
+            uri: { title: 'URI', alias: 'url', aliasTitles: { url: 'URL' }, owner: 'RunDevelopment' },
+            v: { title: 'V', require: 'clike', owner: 'taggon' },
+            vala: { title: 'Vala', require: 'clike', optional: 'regex', owner: 'TemplarVolk' },
+            vbnet: { title: 'VB.Net', require: 'basic', owner: 'Bigsby' },
+            velocity: { title: 'Velocity', require: 'markup', owner: 'Golmote' },
+            verilog: { title: 'Verilog', owner: 'a-rey' },
+            vhdl: { title: 'VHDL', owner: 'a-rey' },
+            vim: { title: 'vim', owner: 'westonganger' },
+            'visual-basic': { title: 'Visual Basic', alias: ['vb', 'vba'], aliasTitles: { vba: 'VBA' }, owner: 'Golmote' },
+            warpscript: { title: 'WarpScript', owner: 'RunDevelopment' },
+            wasm: { title: 'WebAssembly', owner: 'Golmote' },
+            'web-idl': { title: 'Web IDL', alias: 'webidl', owner: 'RunDevelopment' },
+            wgsl: { title: 'WGSL', owner: 'Dr4gonthree' },
+            wiki: { title: 'Wiki markup', require: 'markup', owner: 'Golmote' },
+            wolfram: {
+              title: 'Wolfram language',
+              alias: ['mathematica', 'nb', 'wl'],
+              aliasTitles: { mathematica: 'Mathematica', nb: 'Mathematica Notebook' },
+              owner: 'msollami',
+            },
+            wren: { title: 'Wren', owner: 'clsource' },
+            xeora: {
+              title: 'Xeora',
+              require: 'markup',
+              alias: 'xeoracube',
+              aliasTitles: { xeoracube: 'XeoraCube' },
+              owner: 'freakmaxi',
+            },
+            'xml-doc': {
+              title: 'XML doc (.net)',
+              require: 'markup',
+              modify: ['csharp', 'fsharp', 'vbnet'],
+              owner: 'RunDevelopment',
+            },
+            xojo: { title: 'Xojo (REALbasic)', owner: 'Golmote' },
+            xquery: { title: 'XQuery', require: 'markup', owner: 'Golmote' },
+            yaml: { title: 'YAML', alias: 'yml', owner: 'hason' },
+            yang: { title: 'YANG', owner: 'RunDevelopment' },
+            zig: { title: 'Zig', owner: 'RunDevelopment' },
+          },
+          plugins: {
+            meta: { path: 'plugins/{id}/prism-{id}', link: 'plugins/{id}/' },
+            'line-highlight': { title: 'Line Highlight', description: 'Highlights specific lines and/or line ranges.' },
+            'line-numbers': {
+              title: 'Line Numbers',
+              description: 'Line number at the beginning of code lines.',
+              owner: 'kuba-kubula',
+            },
+            'show-invisibles': {
+              title: 'Show Invisibles',
+              description: 'Show hidden characters such as tabs and line breaks.',
+              optional: ['autolinker', 'data-uri-highlight'],
+            },
+            autolinker: {
+              title: 'Autolinker',
+              description: 'Converts URLs and emails in code to clickable links. Parses Markdown links in comments.',
+            },
+            wpd: {
+              title: 'WebPlatform Docs',
+              description:
+                'Makes tokens link to <a href="https://webplatform.github.io/docs/">WebPlatform.org documentation</a>. The links open in a new tab.',
+            },
+            'custom-class': {
+              title: 'Custom Class',
+              description:
+                "This plugin allows you to prefix Prism's default classes (<code>.comment</code> can become <code>.namespace--comment</code>) or replace them with your defined ones (like <code>.editor__comment</code>). You can even add new classes.",
+              owner: 'dvkndn',
+              noCSS: !0,
+            },
+            'file-highlight': {
+              title: 'File Highlight',
+              description: 'Fetch external files and highlight them with Prism. Used on the Prism website itself.',
+              noCSS: !0,
+            },
+            'show-language': {
+              title: 'Show Language',
+              description: 'Display the highlighted language in code blocks (inline code does not show the label).',
+              owner: 'nauzilus',
+              noCSS: !0,
+              require: 'toolbar',
+            },
+            'jsonp-highlight': {
+              title: 'JSONP Highlight',
+              description:
+                'Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).',
+              noCSS: !0,
+              owner: 'nauzilus',
+            },
+            'highlight-keywords': {
+              title: 'Highlight Keywords',
+              description: 'Adds special CSS classes for each keyword for fine-grained highlighting.',
+              owner: 'vkbansal',
+              noCSS: !0,
+            },
+            'remove-initial-line-feed': {
+              title: 'Remove initial line feed',
+              description: 'Removes the initial line feed in code blocks.',
+              owner: 'Golmote',
+              noCSS: !0,
+            },
+            'inline-color': {
+              title: 'Inline color',
+              description: 'Adds a small inline preview for colors in style sheets.',
+              require: 'css-extras',
+              owner: 'RunDevelopment',
+            },
+            previewers: {
+              title: 'Previewers',
+              description: 'Previewers for angles, colors, gradients, easing and time.',
+              require: 'css-extras',
+              owner: 'Golmote',
+            },
+            autoloader: {
+              title: 'Autoloader',
+              description: 'Automatically loads the needed languages to highlight the code blocks.',
+              owner: 'Golmote',
+              noCSS: !0,
+            },
+            'keep-markup': {
+              title: 'Keep Markup',
+              description: 'Prevents custom markup from being dropped out during highlighting.',
+              owner: 'Golmote',
+              optional: 'normalize-whitespace',
+              noCSS: !0,
+            },
+            'command-line': {
+              title: 'Command Line',
+              description: 'Display a command line with a prompt and, optionally, the output/response from the commands.',
+              owner: 'chriswells0',
+            },
+            'unescaped-markup': { title: 'Unescaped Markup', description: 'Write markup without having to escape anything.' },
+            'normalize-whitespace': {
+              title: 'Normalize Whitespace',
+              description: 'Supports multiple operations to normalize whitespace in code blocks.',
+              owner: 'zeitgeist87',
+              optional: 'unescaped-markup',
+              noCSS: !0,
+            },
+            'data-uri-highlight': {
+              title: 'Data-URI Highlight',
+              description: 'Highlights data-URI contents.',
+              owner: 'Golmote',
+              noCSS: !0,
+            },
+            toolbar: {
+              title: 'Toolbar',
+              description: 'Attach a toolbar for plugins to easily register buttons on the top of a code block.',
+              owner: 'mAAdhaTTah',
+            },
+            'copy-to-clipboard': {
+              title: 'Copy to Clipboard Button',
+              description: 'Add a button that copies the code block to the clipboard when clicked.',
+              owner: 'mAAdhaTTah',
+              require: 'toolbar',
+              noCSS: !0,
+            },
+            'download-button': {
+              title: 'Download Button',
+              description: 'A button in the toolbar of a code block adding a convenient way to download a code file.',
+              owner: 'Golmote',
+              require: 'toolbar',
+              noCSS: !0,
+            },
+            'match-braces': { title: 'Match braces', description: 'Highlights matching braces.', owner: 'RunDevelopment' },
+            'diff-highlight': {
+              title: 'Diff Highlight',
+              description: 'Highlights the code inside diff blocks.',
+              owner: 'RunDevelopment',
+              require: 'diff',
+            },
+            'filter-highlight-all': {
+              title: 'Filter highlightAll',
+              description:
+                'Filters the elements the <code>highlightAll</code> and <code>highlightAllUnder</code> methods actually highlight.',
+              owner: 'RunDevelopment',
+              noCSS: !0,
+            },
+            treeview: {
+              title: 'Treeview',
+              description: 'A language with special styles to highlight file system tree structures.',
+              owner: 'Golmote',
+            },
+          },
+        });
+    },
+    2885: (e, t, n) => {
+      const r = n(9901),
+        a = n(9642),
+        o = new Set();
+      function i(e) {
+        void 0 === e ? (e = Object.keys(r.languages).filter(e => 'meta' != e)) : Array.isArray(e) || (e = [e]);
+        const t = [...o, ...Object.keys(Prism.languages)];
+        a(r, e, t).load(e => {
+          if (!(e in r.languages)) return void (i.silent || console.warn('Language does not exist: ' + e));
+          const t = './prism-' + e;
+          delete n.c[n(6500).resolve(t)], delete Prism.languages[e], n(6500)(t), o.add(e);
+        });
+      }
+      (i.silent = !1), (e.exports = i);
+    },
+    6854: () => {
+      !(function (e) {
+        function t(e, t) {
+          return '___' + e.toUpperCase() + t + '___';
+        }
+        Object.defineProperties((e.languages['markup-templating'] = {}), {
+          buildPlaceholders: {
+            value: function (n, r, a, o) {
+              if (n.language === r) {
+                var i = (n.tokenStack = []);
+                (n.code = n.code.replace(a, function (e) {
+                  if ('function' == typeof o && !o(e)) return e;
+                  for (var a, l = i.length; -1 !== n.code.indexOf((a = t(r, l))); ) ++l;
+                  return (i[l] = e), a;
+                })),
+                  (n.grammar = e.languages.markup);
+              }
+            },
+          },
+          tokenizePlaceholders: {
+            value: function (n, r) {
+              if (n.language === r && n.tokenStack) {
+                n.grammar = e.languages[r];
+                var a = 0,
+                  o = Object.keys(n.tokenStack);
+                !(function i(l) {
+                  for (var s = 0; s < l.length && !(a >= o.length); s++) {
+                    var c = l[s];
+                    if ('string' == typeof c || (c.content && 'string' == typeof c.content)) {
+                      var u = o[a],
+                        d = n.tokenStack[u],
+                        p = 'string' == typeof c ? c : c.content,
+                        f = t(r, u),
+                        m = p.indexOf(f);
+                      if (m > -1) {
+                        ++a;
+                        var h = p.substring(0, m),
+                          g = new e.Token(r, e.tokenize(d, n.grammar), 'language-' + r, d),
+                          y = p.substring(m + f.length),
+                          b = [];
+                        h && b.push.apply(b, i([h])),
+                          b.push(g),
+                          y && b.push.apply(b, i([y])),
+                          'string' == typeof c ? l.splice.apply(l, [s, 1].concat(b)) : (c.content = b);
+                      }
+                    } else c.content && i(c.content);
+                  }
+                  return l;
+                })(n.tokens);
+              }
+            },
+          },
+        });
+      })(Prism);
+    },
+    6726: (e, t, n) => {
+      var r = { './': 2885 };
+      function a(e) {
+        var t = o(e);
+        return n(t);
+      }
+      function o(e) {
+        if (!n.o(r, e)) {
+          var t = new Error("Cannot find module '" + e + "'");
+          throw ((t.code = 'MODULE_NOT_FOUND'), t);
+        }
+        return r[e];
+      }
+      (a.keys = function () {
+        return Object.keys(r);
+      }),
+        (a.resolve = o),
+        (e.exports = a),
+        (a.id = 6726);
+    },
+    6500: (e, t, n) => {
+      var r = { './': 2885 };
+      function a(e) {
+        var t = o(e);
+        return n(t);
+      }
+      function o(e) {
+        if (!n.o(r, e)) {
+          var t = new Error("Cannot find module '" + e + "'");
+          throw ((t.code = 'MODULE_NOT_FOUND'), t);
+        }
+        return r[e];
+      }
+      (a.keys = function () {
+        return Object.keys(r);
+      }),
+        (a.resolve = o),
+        (e.exports = a),
+        (a.id = 6500);
+    },
+    9642: e => {
+      'use strict';
+      var t = (function () {
+        var e = function () {};
+        function t(e, t) {
+          Array.isArray(e) ? e.forEach(t) : null != e && t(e, 0);
+        }
+        function n(e) {
+          for (var t = {}, n = 0, r = e.length; n < r; n++) t[e[n]] = !0;
+          return t;
+        }
+        function r(e) {
+          var n = {},
+            r = [];
+          function a(r, o) {
+            if (!(r in n)) {
+              o.push(r);
+              var i = o.indexOf(r);
+              if (i < o.length - 1) throw new Error('Circular dependency: ' + o.slice(i).join(' -> '));
+              var l = {},
+                s = e[r];
+              if (s) {
+                function c(t) {
+                  if (!(t in e)) throw new Error(r + ' depends on an unknown component ' + t);
+                  if (!(t in l)) for (var i in (a(t, o), (l[t] = !0), n[t])) l[i] = !0;
+                }
+                t(s.require, c), t(s.optional, c), t(s.modify, c);
+              }
+              (n[r] = l), o.pop();
+            }
+          }
+          return function (e) {
+            var t = n[e];
+            return t || (a(e, r), (t = n[e])), t;
+          };
+        }
+        function a(e) {
+          for (var t in e) return !0;
+          return !1;
+        }
+        return function (o, i, l) {
+          var s = (function (e) {
+              var t = {};
+              for (var n in e) {
+                var r = e[n];
+                for (var a in r)
+                  if ('meta' != a) {
+                    var o = r[a];
+                    t[a] = 'string' == typeof o ? { title: o } : o;
+                  }
+              }
+              return t;
+            })(o),
+            c = (function (e) {
+              var n;
+              return function (r) {
+                if (r in e) return r;
+                if (!n)
+                  for (var a in ((n = {}), e)) {
+                    var o = e[a];
+                    t(o && o.alias, function (t) {
+                      if (t in n) throw new Error(t + ' cannot be alias for both ' + a + ' and ' + n[t]);
+                      if (t in e) throw new Error(t + ' cannot be alias of ' + a + ' because it is a component.');
+                      n[t] = a;
+                    });
+                  }
+                return n[r] || r;
+              };
+            })(s);
+          (i = i.map(c)), (l = (l || []).map(c));
+          var u = n(i),
+            d = n(l);
+          i.forEach(function e(n) {
+            var r = s[n];
+            t(r && r.require, function (t) {
+              t in d || ((u[t] = !0), e(t));
+            });
+          });
+          for (var p, f = r(s), m = u; a(m); ) {
+            for (var h in ((p = {}), m)) {
+              var g = s[h];
+              t(g && g.modify, function (e) {
+                e in d && (p[e] = !0);
+              });
+            }
+            for (var y in d)
+              if (!(y in u))
+                for (var b in f(y))
+                  if (b in u) {
+                    p[y] = !0;
+                    break;
+                  }
+            for (var v in (m = p)) u[v] = !0;
+          }
+          var w = {
+            getIds: function () {
+              var e = [];
+              return (
+                w.load(function (t) {
+                  e.push(t);
+                }),
+                e
+              );
+            },
+            load: function (t, n) {
+              return (function (t, n, r, a) {
+                var o = a ? a.series : void 0,
+                  i = a ? a.parallel : e,
+                  l = {},
+                  s = {};
+                function c(e) {
+                  if (e in l) return l[e];
+                  s[e] = !0;
+                  var a,
+                    u = [];
+                  for (var d in t(e)) d in n && u.push(d);
+                  if (0 === u.length) a = r(e);
+                  else {
+                    var p = i(
+                      u.map(function (e) {
+                        var t = c(e);
+                        return delete s[e], t;
+                      }),
+                    );
+                    o
+                      ? (a = o(p, function () {
+                          return r(e);
+                        }))
+                      : r(e);
+                  }
+                  return (l[e] = a);
+                }
+                for (var u in n) c(u);
+                var d = [];
+                for (var p in s) d.push(l[p]);
+                return i(d);
+              })(f, u, t, n);
+            },
+          };
+          return w;
+        };
+      })();
+      e.exports = t;
+    },
+    2703: (e, t, n) => {
+      'use strict';
+      var r = n(414);
+      function a() {}
+      function o() {}
+      (o.resetWarningCache = a),
+        (e.exports = function () {
+          function e(e, t, n, a, o, i) {
+            if (i !== r) {
+              var l = new Error(
+                'Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types',
+              );
+              throw ((l.name = 'Invariant Violation'), l);
+            }
+          }
+          function t() {
+            return e;
+          }
+          e.isRequired = e;
+          var n = {
+            array: e,
+            bigint: e,
+            bool: e,
+            func: e,
+            number: e,
+            object: e,
+            string: e,
+            symbol: e,
+            any: e,
+            arrayOf: t,
+            element: e,
+            elementType: e,
+            instanceOf: t,
+            node: e,
+            objectOf: t,
+            oneOf: t,
+            oneOfType: t,
+            shape: t,
+            exact: t,
+            checkPropTypes: o,
+            resetWarningCache: a,
+          };
+          return (n.PropTypes = n), n;
+        });
+    },
+    5697: (e, t, n) => {
+      e.exports = n(2703)();
+    },
+    414: e => {
+      'use strict';
+      e.exports = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+    },
+    4448: (e, t, n) => {
+      'use strict';
+      var r = n(7294),
+        a = n(3840);
+      function o(e) {
+        for (var t = 'https://reactjs.org/docs/error-decoder.html?invariant=' + e, n = 1; n < arguments.length; n++)
+          t += '&args[]=' + encodeURIComponent(arguments[n]);
+        return (
+          'Minified React error #' +
+          e +
+          '; visit ' +
+          t +
+          ' for the full message or use the non-minified dev environment for full errors and additional helpful warnings.'
+        );
+      }
+      var i = new Set(),
+        l = {};
+      function s(e, t) {
+        c(e, t), c(e + 'Capture', t);
+      }
+      function c(e, t) {
+        for (l[e] = t, e = 0; e < t.length; e++) i.add(t[e]);
+      }
+      var u = !('undefined' == typeof window || void 0 === window.document || void 0 === window.document.createElement),
+        d = Object.prototype.hasOwnProperty,
+        p =
+          /^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,
+        f = {},
+        m = {};
+      function h(e, t, n, r, a, o, i) {
+        (this.acceptsBooleans = 2 === t || 3 === t || 4 === t),
+          (this.attributeName = r),
+          (this.attributeNamespace = a),
+          (this.mustUseProperty = n),
+          (this.propertyName = e),
+          (this.type = t),
+          (this.sanitizeURL = o),
+          (this.removeEmptyString = i);
+      }
+      var g = {};
+      'children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style'
+        .split(' ')
+        .forEach(function (e) {
+          g[e] = new h(e, 0, !1, e, null, !1, !1);
+        }),
+        [
+          ['acceptCharset', 'accept-charset'],
+          ['className', 'class'],
+          ['htmlFor', 'for'],
+          ['httpEquiv', 'http-equiv'],
+        ].forEach(function (e) {
+          var t = e[0];
+          g[t] = new h(t, 1, !1, e[1], null, !1, !1);
+        }),
+        ['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (e) {
+          g[e] = new h(e, 2, !1, e.toLowerCase(), null, !1, !1);
+        }),
+        ['autoReverse', 'externalResourcesRequired', 'focusable', 'preserveAlpha'].forEach(function (e) {
+          g[e] = new h(e, 2, !1, e, null, !1, !1);
+        }),
+        'allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope'
+          .split(' ')
+          .forEach(function (e) {
+            g[e] = new h(e, 3, !1, e.toLowerCase(), null, !1, !1);
+          }),
+        ['checked', 'multiple', 'muted', 'selected'].forEach(function (e) {
+          g[e] = new h(e, 3, !0, e, null, !1, !1);
+        }),
+        ['capture', 'download'].forEach(function (e) {
+          g[e] = new h(e, 4, !1, e, null, !1, !1);
+        }),
+        ['cols', 'rows', 'size', 'span'].forEach(function (e) {
+          g[e] = new h(e, 6, !1, e, null, !1, !1);
+        }),
+        ['rowSpan', 'start'].forEach(function (e) {
+          g[e] = new h(e, 5, !1, e.toLowerCase(), null, !1, !1);
+        });
+      var y = /[\-:]([a-z])/g;
+      function b(e) {
+        return e[1].toUpperCase();
+      }
+      function v(e, t, n, r) {
+        var a = g.hasOwnProperty(t) ? g[t] : null;
+        (null !== a ? 0 !== a.type : r || !(2 < t.length) || ('o' !== t[0] && 'O' !== t[0]) || ('n' !== t[1] && 'N' !== t[1])) &&
+          ((function (e, t, n, r) {
+            if (
+              null == t ||
+              (function (e, t, n, r) {
+                if (null !== n && 0 === n.type) return !1;
+                switch (typeof t) {
+                  case 'function':
+                  case 'symbol':
+                    return !0;
+                  case 'boolean':
+                    return (
+                      !r && (null !== n ? !n.acceptsBooleans : 'data-' !== (e = e.toLowerCase().slice(0, 5)) && 'aria-' !== e)
+                    );
+                  default:
+                    return !1;
+                }
+              })(e, t, n, r)
+            )
+              return !0;
+            if (r) return !1;
+            if (null !== n)
+              switch (n.type) {
+                case 3:
+                  return !t;
+                case 4:
+                  return !1 === t;
+                case 5:
+                  return isNaN(t);
+                case 6:
+                  return isNaN(t) || 1 > t;
+              }
+            return !1;
+          })(t, n, a, r) && (n = null),
+          r || null === a
+            ? (function (e) {
+                return !!d.call(m, e) || (!d.call(f, e) && (p.test(e) ? (m[e] = !0) : ((f[e] = !0), !1)));
+              })(t) && (null === n ? e.removeAttribute(t) : e.setAttribute(t, '' + n))
+            : a.mustUseProperty
+              ? (e[a.propertyName] = null === n ? 3 !== a.type && '' : n)
+              : ((t = a.attributeName),
+                (r = a.attributeNamespace),
+                null === n
+                  ? e.removeAttribute(t)
+                  : ((n = 3 === (a = a.type) || (4 === a && !0 === n) ? '' : '' + n),
+                    r ? e.setAttributeNS(r, t, n) : e.setAttribute(t, n))));
+      }
+      'accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height'
+        .split(' ')
+        .forEach(function (e) {
+          var t = e.replace(y, b);
+          g[t] = new h(t, 1, !1, e, null, !1, !1);
+        }),
+        'xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type'.split(' ').forEach(function (e) {
+          var t = e.replace(y, b);
+          g[t] = new h(t, 1, !1, e, 'http://www.w3.org/1999/xlink', !1, !1);
+        }),
+        ['xml:base', 'xml:lang', 'xml:space'].forEach(function (e) {
+          var t = e.replace(y, b);
+          g[t] = new h(t, 1, !1, e, 'http://www.w3.org/XML/1998/namespace', !1, !1);
+        }),
+        ['tabIndex', 'crossOrigin'].forEach(function (e) {
+          g[e] = new h(e, 1, !1, e.toLowerCase(), null, !1, !1);
+        }),
+        (g.xlinkHref = new h('xlinkHref', 1, !1, 'xlink:href', 'http://www.w3.org/1999/xlink', !0, !1)),
+        ['src', 'href', 'action', 'formAction'].forEach(function (e) {
+          g[e] = new h(e, 1, !1, e.toLowerCase(), null, !0, !0);
+        });
+      var w = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+        k = Symbol.for('react.element'),
+        S = Symbol.for('react.portal'),
+        x = Symbol.for('react.fragment'),
+        E = Symbol.for('react.strict_mode'),
+        C = Symbol.for('react.profiler'),
+        _ = Symbol.for('react.provider'),
+        P = Symbol.for('react.context'),
+        T = Symbol.for('react.forward_ref'),
+        A = Symbol.for('react.suspense'),
+        L = Symbol.for('react.suspense_list'),
+        j = Symbol.for('react.memo'),
+        R = Symbol.for('react.lazy');
+      Symbol.for('react.scope'), Symbol.for('react.debug_trace_mode');
+      var I = Symbol.for('react.offscreen');
+      Symbol.for('react.legacy_hidden'), Symbol.for('react.cache'), Symbol.for('react.tracing_marker');
+      var N = Symbol.iterator;
+      function O(e) {
+        return null === e || 'object' != typeof e ? null : 'function' == typeof (e = (N && e[N]) || e['@@iterator']) ? e : null;
+      }
+      var D,
+        F = Object.assign;
+      function M(e) {
+        if (void 0 === D)
+          try {
+            throw Error();
+          } catch (n) {
+            var t = n.stack.trim().match(/\n( *(at )?)/);
+            D = (t && t[1]) || '';
+          }
+        return '\n' + D + e;
+      }
+      var B = !1;
+      function z(e, t) {
+        if (!e || B) return '';
+        B = !0;
+        var n = Error.prepareStackTrace;
+        Error.prepareStackTrace = void 0;
+        try {
+          if (t)
+            if (
+              ((t = function () {
+                throw Error();
+              }),
+              Object.defineProperty(t.prototype, 'props', {
+                set: function () {
+                  throw Error();
+                },
+              }),
+              'object' == typeof Reflect && Reflect.construct)
+            ) {
+              try {
+                Reflect.construct(t, []);
+              } catch (c) {
+                var r = c;
+              }
+              Reflect.construct(e, [], t);
+            } else {
+              try {
+                t.call();
+              } catch (c) {
+                r = c;
+              }
+              e.call(t.prototype);
+            }
+          else {
+            try {
+              throw Error();
+            } catch (c) {
+              r = c;
+            }
+            e();
+          }
+        } catch (c) {
+          if (c && r && 'string' == typeof c.stack) {
+            for (
+              var a = c.stack.split('\n'), o = r.stack.split('\n'), i = a.length - 1, l = o.length - 1;
+              1 <= i && 0 <= l && a[i] !== o[l];
+
+            )
+              l--;
+            for (; 1 <= i && 0 <= l; i--, l--)
+              if (a[i] !== o[l]) {
+                if (1 !== i || 1 !== l)
+                  do {
+                    if ((i--, 0 > --l || a[i] !== o[l])) {
+                      var s = '\n' + a[i].replace(' at new ', ' at ');
+                      return e.displayName && s.includes('<anonymous>') && (s = s.replace('<anonymous>', e.displayName)), s;
+                    }
+                  } while (1 <= i && 0 <= l);
+                break;
+              }
+          }
+        } finally {
+          (B = !1), (Error.prepareStackTrace = n);
+        }
+        return (e = e ? e.displayName || e.name : '') ? M(e) : '';
+      }
+      function $(e) {
+        switch (e.tag) {
+          case 5:
+            return M(e.type);
+          case 16:
+            return M('Lazy');
+          case 13:
+            return M('Suspense');
+          case 19:
+            return M('SuspenseList');
+          case 0:
+          case 2:
+          case 15:
+            return (e = z(e.type, !1));
+          case 11:
+            return (e = z(e.type.render, !1));
+          case 1:
+            return (e = z(e.type, !0));
+          default:
+            return '';
+        }
+      }
+      function U(e) {
+        if (null == e) return null;
+        if ('function' == typeof e) return e.displayName || e.name || null;
+        if ('string' == typeof e) return e;
+        switch (e) {
+          case x:
+            return 'Fragment';
+          case S:
+            return 'Portal';
+          case C:
+            return 'Profiler';
+          case E:
+            return 'StrictMode';
+          case A:
+            return 'Suspense';
+          case L:
+            return 'SuspenseList';
+        }
+        if ('object' == typeof e)
+          switch (e.$$typeof) {
+            case P:
+              return (e.displayName || 'Context') + '.Consumer';
+            case _:
+              return (e._context.displayName || 'Context') + '.Provider';
+            case T:
+              var t = e.render;
+              return (
+                (e = e.displayName) || (e = '' !== (e = t.displayName || t.name || '') ? 'ForwardRef(' + e + ')' : 'ForwardRef'),
+                e
+              );
+            case j:
+              return null !== (t = e.displayName || null) ? t : U(e.type) || 'Memo';
+            case R:
+              (t = e._payload), (e = e._init);
+              try {
+                return U(e(t));
+              } catch (n) {}
+          }
+        return null;
+      }
+      function H(e) {
+        var t = e.type;
+        switch (e.tag) {
+          case 24:
+            return 'Cache';
+          case 9:
+            return (t.displayName || 'Context') + '.Consumer';
+          case 10:
+            return (t._context.displayName || 'Context') + '.Provider';
+          case 18:
+            return 'DehydratedFragment';
+          case 11:
+            return (
+              (e = (e = t.render).displayName || e.name || ''),
+              t.displayName || ('' !== e ? 'ForwardRef(' + e + ')' : 'ForwardRef')
+            );
+          case 7:
+            return 'Fragment';
+          case 5:
+            return t;
+          case 4:
+            return 'Portal';
+          case 3:
+            return 'Root';
+          case 6:
+            return 'Text';
+          case 16:
+            return U(t);
+          case 8:
+            return t === E ? 'StrictMode' : 'Mode';
+          case 22:
+            return 'Offscreen';
+          case 12:
+            return 'Profiler';
+          case 21:
+            return 'Scope';
+          case 13:
+            return 'Suspense';
+          case 19:
+            return 'SuspenseList';
+          case 25:
+            return 'TracingMarker';
+          case 1:
+          case 0:
+          case 17:
+          case 2:
+          case 14:
+          case 15:
+            if ('function' == typeof t) return t.displayName || t.name || null;
+            if ('string' == typeof t) return t;
+        }
+        return null;
+      }
+      function q(e) {
+        switch (typeof e) {
+          case 'boolean':
+          case 'number':
+          case 'string':
+          case 'undefined':
+          case 'object':
+            return e;
+          default:
+            return '';
+        }
+      }
+      function Z(e) {
+        var t = e.type;
+        return (e = e.nodeName) && 'input' === e.toLowerCase() && ('checkbox' === t || 'radio' === t);
+      }
+      function G(e) {
+        e._valueTracker ||
+          (e._valueTracker = (function (e) {
+            var t = Z(e) ? 'checked' : 'value',
+              n = Object.getOwnPropertyDescriptor(e.constructor.prototype, t),
+              r = '' + e[t];
+            if (!e.hasOwnProperty(t) && void 0 !== n && 'function' == typeof n.get && 'function' == typeof n.set) {
+              var a = n.get,
+                o = n.set;
+              return (
+                Object.defineProperty(e, t, {
+                  configurable: !0,
+                  get: function () {
+                    return a.call(this);
+                  },
+                  set: function (e) {
+                    (r = '' + e), o.call(this, e);
+                  },
+                }),
+                Object.defineProperty(e, t, { enumerable: n.enumerable }),
+                {
+                  getValue: function () {
+                    return r;
+                  },
+                  setValue: function (e) {
+                    r = '' + e;
+                  },
+                  stopTracking: function () {
+                    (e._valueTracker = null), delete e[t];
+                  },
+                }
+              );
+            }
+          })(e));
+      }
+      function W(e) {
+        if (!e) return !1;
+        var t = e._valueTracker;
+        if (!t) return !0;
+        var n = t.getValue(),
+          r = '';
+        return e && (r = Z(e) ? (e.checked ? 'true' : 'false') : e.value), (e = r) !== n && (t.setValue(e), !0);
+      }
+      function V(e) {
+        if (void 0 === (e = e || ('undefined' != typeof document ? document : void 0))) return null;
+        try {
+          return e.activeElement || e.body;
+        } catch (t) {
+          return e.body;
+        }
+      }
+      function Q(e, t) {
+        var n = t.checked;
+        return F({}, t, {
+          defaultChecked: void 0,
+          defaultValue: void 0,
+          value: void 0,
+          checked: null != n ? n : e._wrapperState.initialChecked,
+        });
+      }
+      function K(e, t) {
+        var n = null == t.defaultValue ? '' : t.defaultValue,
+          r = null != t.checked ? t.checked : t.defaultChecked;
+        (n = q(null != t.value ? t.value : n)),
+          (e._wrapperState = {
+            initialChecked: r,
+            initialValue: n,
+            controlled: 'checkbox' === t.type || 'radio' === t.type ? null != t.checked : null != t.value,
+          });
+      }
+      function Y(e, t) {
+        null != (t = t.checked) && v(e, 'checked', t, !1);
+      }
+      function X(e, t) {
+        Y(e, t);
+        var n = q(t.value),
+          r = t.type;
+        if (null != n)
+          'number' === r
+            ? ((0 === n && '' === e.value) || e.value != n) && (e.value = '' + n)
+            : e.value !== '' + n && (e.value = '' + n);
+        else if ('submit' === r || 'reset' === r) return void e.removeAttribute('value');
+        t.hasOwnProperty('value') ? ee(e, t.type, n) : t.hasOwnProperty('defaultValue') && ee(e, t.type, q(t.defaultValue)),
+          null == t.checked && null != t.defaultChecked && (e.defaultChecked = !!t.defaultChecked);
+      }
+      function J(e, t, n) {
+        if (t.hasOwnProperty('value') || t.hasOwnProperty('defaultValue')) {
+          var r = t.type;
+          if (!(('submit' !== r && 'reset' !== r) || (void 0 !== t.value && null !== t.value))) return;
+          (t = '' + e._wrapperState.initialValue), n || t === e.value || (e.value = t), (e.defaultValue = t);
+        }
+        '' !== (n = e.name) && (e.name = ''), (e.defaultChecked = !!e._wrapperState.initialChecked), '' !== n && (e.name = n);
+      }
+      function ee(e, t, n) {
+        ('number' === t && V(e.ownerDocument) === e) ||
+          (null == n
+            ? (e.defaultValue = '' + e._wrapperState.initialValue)
+            : e.defaultValue !== '' + n && (e.defaultValue = '' + n));
+      }
+      var te = Array.isArray;
+      function ne(e, t, n, r) {
+        if (((e = e.options), t)) {
+          t = {};
+          for (var a = 0; a < n.length; a++) t['$' + n[a]] = !0;
+          for (n = 0; n < e.length; n++)
+            (a = t.hasOwnProperty('$' + e[n].value)),
+              e[n].selected !== a && (e[n].selected = a),
+              a && r && (e[n].defaultSelected = !0);
+        } else {
+          for (n = '' + q(n), t = null, a = 0; a < e.length; a++) {
+            if (e[a].value === n) return (e[a].selected = !0), void (r && (e[a].defaultSelected = !0));
+            null !== t || e[a].disabled || (t = e[a]);
+          }
+          null !== t && (t.selected = !0);
+        }
+      }
+      function re(e, t) {
+        if (null != t.dangerouslySetInnerHTML) throw Error(o(91));
+        return F({}, t, { value: void 0, defaultValue: void 0, children: '' + e._wrapperState.initialValue });
+      }
+      function ae(e, t) {
+        var n = t.value;
+        if (null == n) {
+          if (((n = t.children), (t = t.defaultValue), null != n)) {
+            if (null != t) throw Error(o(92));
+            if (te(n)) {
+              if (1 < n.length) throw Error(o(93));
+              n = n[0];
+            }
+            t = n;
+          }
+          null == t && (t = ''), (n = t);
+        }
+        e._wrapperState = { initialValue: q(n) };
+      }
+      function oe(e, t) {
+        var n = q(t.value),
+          r = q(t.defaultValue);
+        null != n &&
+          ((n = '' + n) !== e.value && (e.value = n), null == t.defaultValue && e.defaultValue !== n && (e.defaultValue = n)),
+          null != r && (e.defaultValue = '' + r);
+      }
+      function ie(e) {
+        var t = e.textContent;
+        t === e._wrapperState.initialValue && '' !== t && null !== t && (e.value = t);
+      }
+      function le(e) {
+        switch (e) {
+          case 'svg':
+            return 'http://www.w3.org/2000/svg';
+          case 'math':
+            return 'http://www.w3.org/1998/Math/MathML';
+          default:
+            return 'http://www.w3.org/1999/xhtml';
+        }
+      }
+      function se(e, t) {
+        return null == e || 'http://www.w3.org/1999/xhtml' === e
+          ? le(t)
+          : 'http://www.w3.org/2000/svg' === e && 'foreignObject' === t
+            ? 'http://www.w3.org/1999/xhtml'
+            : e;
+      }
+      var ce,
+        ue,
+        de =
+          ((ue = function (e, t) {
+            if ('http://www.w3.org/2000/svg' !== e.namespaceURI || 'innerHTML' in e) e.innerHTML = t;
+            else {
+              for (
+                (ce = ce || document.createElement('div')).innerHTML = '<svg>' + t.valueOf().toString() + '</svg>',
+                  t = ce.firstChild;
+                e.firstChild;
+
+              )
+                e.removeChild(e.firstChild);
+              for (; t.firstChild; ) e.appendChild(t.firstChild);
+            }
+          }),
+          'undefined' != typeof MSApp && MSApp.execUnsafeLocalFunction
+            ? function (e, t, n, r) {
+                MSApp.execUnsafeLocalFunction(function () {
+                  return ue(e, t);
+                });
+              }
+            : ue);
+      function pe(e, t) {
+        if (t) {
+          var n = e.firstChild;
+          if (n && n === e.lastChild && 3 === n.nodeType) return void (n.nodeValue = t);
+        }
+        e.textContent = t;
+      }
+      var fe = {
+          animationIterationCount: !0,
+          aspectRatio: !0,
+          borderImageOutset: !0,
+          borderImageSlice: !0,
+          borderImageWidth: !0,
+          boxFlex: !0,
+          boxFlexGroup: !0,
+          boxOrdinalGroup: !0,
+          columnCount: !0,
+          columns: !0,
+          flex: !0,
+          flexGrow: !0,
+          flexPositive: !0,
+          flexShrink: !0,
+          flexNegative: !0,
+          flexOrder: !0,
+          gridArea: !0,
+          gridRow: !0,
+          gridRowEnd: !0,
+          gridRowSpan: !0,
+          gridRowStart: !0,
+          gridColumn: !0,
+          gridColumnEnd: !0,
+          gridColumnSpan: !0,
+          gridColumnStart: !0,
+          fontWeight: !0,
+          lineClamp: !0,
+          lineHeight: !0,
+          opacity: !0,
+          order: !0,
+          orphans: !0,
+          tabSize: !0,
+          widows: !0,
+          zIndex: !0,
+          zoom: !0,
+          fillOpacity: !0,
+          floodOpacity: !0,
+          stopOpacity: !0,
+          strokeDasharray: !0,
+          strokeDashoffset: !0,
+          strokeMiterlimit: !0,
+          strokeOpacity: !0,
+          strokeWidth: !0,
+        },
+        me = ['Webkit', 'ms', 'Moz', 'O'];
+      function he(e, t, n) {
+        return null == t || 'boolean' == typeof t || '' === t
+          ? ''
+          : n || 'number' != typeof t || 0 === t || (fe.hasOwnProperty(e) && fe[e])
+            ? ('' + t).trim()
+            : t + 'px';
+      }
+      function ge(e, t) {
+        for (var n in ((e = e.style), t))
+          if (t.hasOwnProperty(n)) {
+            var r = 0 === n.indexOf('--'),
+              a = he(n, t[n], r);
+            'float' === n && (n = 'cssFloat'), r ? e.setProperty(n, a) : (e[n] = a);
+          }
+      }
+      Object.keys(fe).forEach(function (e) {
+        me.forEach(function (t) {
+          (t = t + e.charAt(0).toUpperCase() + e.substring(1)), (fe[t] = fe[e]);
+        });
+      });
+      var ye = F(
+        { menuitem: !0 },
+        {
+          area: !0,
+          base: !0,
+          br: !0,
+          col: !0,
+          embed: !0,
+          hr: !0,
+          img: !0,
+          input: !0,
+          keygen: !0,
+          link: !0,
+          meta: !0,
+          param: !0,
+          source: !0,
+          track: !0,
+          wbr: !0,
+        },
+      );
+      function be(e, t) {
+        if (t) {
+          if (ye[e] && (null != t.children || null != t.dangerouslySetInnerHTML)) throw Error(o(137, e));
+          if (null != t.dangerouslySetInnerHTML) {
+            if (null != t.children) throw Error(o(60));
+            if ('object' != typeof t.dangerouslySetInnerHTML || !('__html' in t.dangerouslySetInnerHTML)) throw Error(o(61));
+          }
+          if (null != t.style && 'object' != typeof t.style) throw Error(o(62));
+        }
+      }
+      function ve(e, t) {
+        if (-1 === e.indexOf('-')) return 'string' == typeof t.is;
+        switch (e) {
+          case 'annotation-xml':
+          case 'color-profile':
+          case 'font-face':
+          case 'font-face-src':
+          case 'font-face-uri':
+          case 'font-face-format':
+          case 'font-face-name':
+          case 'missing-glyph':
+            return !1;
+          default:
+            return !0;
+        }
+      }
+      var we = null;
+      function ke(e) {
+        return (
+          (e = e.target || e.srcElement || window).correspondingUseElement && (e = e.correspondingUseElement),
+          3 === e.nodeType ? e.parentNode : e
+        );
+      }
+      var Se = null,
+        xe = null,
+        Ee = null;
+      function Ce(e) {
+        if ((e = va(e))) {
+          if ('function' != typeof Se) throw Error(o(280));
+          var t = e.stateNode;
+          t && ((t = ka(t)), Se(e.stateNode, e.type, t));
+        }
+      }
+      function _e(e) {
+        xe ? (Ee ? Ee.push(e) : (Ee = [e])) : (xe = e);
+      }
+      function Pe() {
+        if (xe) {
+          var e = xe,
+            t = Ee;
+          if (((Ee = xe = null), Ce(e), t)) for (e = 0; e < t.length; e++) Ce(t[e]);
+        }
+      }
+      function Te(e, t) {
+        return e(t);
+      }
+      function Ae() {}
+      var Le = !1;
+      function je(e, t, n) {
+        if (Le) return e(t, n);
+        Le = !0;
+        try {
+          return Te(e, t, n);
+        } finally {
+          (Le = !1), (null !== xe || null !== Ee) && (Ae(), Pe());
+        }
+      }
+      function Re(e, t) {
+        var n = e.stateNode;
+        if (null === n) return null;
+        var r = ka(n);
+        if (null === r) return null;
+        n = r[t];
+        e: switch (t) {
+          case 'onClick':
+          case 'onClickCapture':
+          case 'onDoubleClick':
+          case 'onDoubleClickCapture':
+          case 'onMouseDown':
+          case 'onMouseDownCapture':
+          case 'onMouseMove':
+          case 'onMouseMoveCapture':
+          case 'onMouseUp':
+          case 'onMouseUpCapture':
+          case 'onMouseEnter':
+            (r = !r.disabled) || (r = !('button' === (e = e.type) || 'input' === e || 'select' === e || 'textarea' === e)),
+              (e = !r);
+            break e;
+          default:
+            e = !1;
+        }
+        if (e) return null;
+        if (n && 'function' != typeof n) throw Error(o(231, t, typeof n));
+        return n;
+      }
+      var Ie = !1;
+      if (u)
+        try {
+          var Ne = {};
+          Object.defineProperty(Ne, 'passive', {
+            get: function () {
+              Ie = !0;
+            },
+          }),
+            window.addEventListener('test', Ne, Ne),
+            window.removeEventListener('test', Ne, Ne);
+        } catch (ue) {
+          Ie = !1;
+        }
+      function Oe(e, t, n, r, a, o, i, l, s) {
+        var c = Array.prototype.slice.call(arguments, 3);
+        try {
+          t.apply(n, c);
+        } catch (u) {
+          this.onError(u);
+        }
+      }
+      var De = !1,
+        Fe = null,
+        Me = !1,
+        Be = null,
+        ze = {
+          onError: function (e) {
+            (De = !0), (Fe = e);
+          },
+        };
+      function $e(e, t, n, r, a, o, i, l, s) {
+        (De = !1), (Fe = null), Oe.apply(ze, arguments);
+      }
+      function Ue(e) {
+        var t = e,
+          n = e;
+        if (e.alternate) for (; t.return; ) t = t.return;
+        else {
+          e = t;
+          do {
+            0 != (4098 & (t = e).flags) && (n = t.return), (e = t.return);
+          } while (e);
+        }
+        return 3 === t.tag ? n : null;
+      }
+      function He(e) {
+        if (13 === e.tag) {
+          var t = e.memoizedState;
+          if ((null === t && null !== (e = e.alternate) && (t = e.memoizedState), null !== t)) return t.dehydrated;
+        }
+        return null;
+      }
+      function qe(e) {
+        if (Ue(e) !== e) throw Error(o(188));
+      }
+      function Ze(e) {
+        return null !==
+          (e = (function (e) {
+            var t = e.alternate;
+            if (!t) {
+              if (null === (t = Ue(e))) throw Error(o(188));
+              return t !== e ? null : e;
+            }
+            for (var n = e, r = t; ; ) {
+              var a = n.return;
+              if (null === a) break;
+              var i = a.alternate;
+              if (null === i) {
+                if (null !== (r = a.return)) {
+                  n = r;
+                  continue;
+                }
+                break;
+              }
+              if (a.child === i.child) {
+                for (i = a.child; i; ) {
+                  if (i === n) return qe(a), e;
+                  if (i === r) return qe(a), t;
+                  i = i.sibling;
+                }
+                throw Error(o(188));
+              }
+              if (n.return !== r.return) (n = a), (r = i);
+              else {
+                for (var l = !1, s = a.child; s; ) {
+                  if (s === n) {
+                    (l = !0), (n = a), (r = i);
+                    break;
+                  }
+                  if (s === r) {
+                    (l = !0), (r = a), (n = i);
+                    break;
+                  }
+                  s = s.sibling;
+                }
+                if (!l) {
+                  for (s = i.child; s; ) {
+                    if (s === n) {
+                      (l = !0), (n = i), (r = a);
+                      break;
+                    }
+                    if (s === r) {
+                      (l = !0), (r = i), (n = a);
+                      break;
+                    }
+                    s = s.sibling;
+                  }
+                  if (!l) throw Error(o(189));
+                }
+              }
+              if (n.alternate !== r) throw Error(o(190));
+            }
+            if (3 !== n.tag) throw Error(o(188));
+            return n.stateNode.current === n ? e : t;
+          })(e))
+          ? Ge(e)
+          : null;
+      }
+      function Ge(e) {
+        if (5 === e.tag || 6 === e.tag) return e;
+        for (e = e.child; null !== e; ) {
+          var t = Ge(e);
+          if (null !== t) return t;
+          e = e.sibling;
+        }
+        return null;
+      }
+      var We = a.unstable_scheduleCallback,
+        Ve = a.unstable_cancelCallback,
+        Qe = a.unstable_shouldYield,
+        Ke = a.unstable_requestPaint,
+        Ye = a.unstable_now,
+        Xe = a.unstable_getCurrentPriorityLevel,
+        Je = a.unstable_ImmediatePriority,
+        et = a.unstable_UserBlockingPriority,
+        tt = a.unstable_NormalPriority,
+        nt = a.unstable_LowPriority,
+        rt = a.unstable_IdlePriority,
+        at = null,
+        ot = null;
+      var it = Math.clz32
+          ? Math.clz32
+          : function (e) {
+              return (e >>>= 0), 0 === e ? 32 : (31 - ((lt(e) / st) | 0)) | 0;
+            },
+        lt = Math.log,
+        st = Math.LN2;
+      var ct = 64,
+        ut = 4194304;
+      function dt(e) {
+        switch (e & -e) {
+          case 1:
+            return 1;
+          case 2:
+            return 2;
+          case 4:
+            return 4;
+          case 8:
+            return 8;
+          case 16:
+            return 16;
+          case 32:
+            return 32;
+          case 64:
+          case 128:
+          case 256:
+          case 512:
+          case 1024:
+          case 2048:
+          case 4096:
+          case 8192:
+          case 16384:
+          case 32768:
+          case 65536:
+          case 131072:
+          case 262144:
+          case 524288:
+          case 1048576:
+          case 2097152:
+            return 4194240 & e;
+          case 4194304:
+          case 8388608:
+          case 16777216:
+          case 33554432:
+          case 67108864:
+            return 130023424 & e;
+          case 134217728:
+            return 134217728;
+          case 268435456:
+            return 268435456;
+          case 536870912:
+            return 536870912;
+          case 1073741824:
+            return 1073741824;
+          default:
+            return e;
+        }
+      }
+      function pt(e, t) {
+        var n = e.pendingLanes;
+        if (0 === n) return 0;
+        var r = 0,
+          a = e.suspendedLanes,
+          o = e.pingedLanes,
+          i = 268435455 & n;
+        if (0 !== i) {
+          var l = i & ~a;
+          0 !== l ? (r = dt(l)) : 0 !== (o &= i) && (r = dt(o));
+        } else 0 !== (i = n & ~a) ? (r = dt(i)) : 0 !== o && (r = dt(o));
+        if (0 === r) return 0;
+        if (0 !== t && t !== r && 0 == (t & a) && ((a = r & -r) >= (o = t & -t) || (16 === a && 0 != (4194240 & o)))) return t;
+        if ((0 != (4 & r) && (r |= 16 & n), 0 !== (t = e.entangledLanes)))
+          for (e = e.entanglements, t &= r; 0 < t; ) (a = 1 << (n = 31 - it(t))), (r |= e[n]), (t &= ~a);
+        return r;
+      }
+      function ft(e, t) {
+        switch (e) {
+          case 1:
+          case 2:
+          case 4:
+            return t + 250;
+          case 8:
+          case 16:
+          case 32:
+          case 64:
+          case 128:
+          case 256:
+          case 512:
+          case 1024:
+          case 2048:
+          case 4096:
+          case 8192:
+          case 16384:
+          case 32768:
+          case 65536:
+          case 131072:
+          case 262144:
+          case 524288:
+          case 1048576:
+          case 2097152:
+            return t + 5e3;
+          default:
+            return -1;
+        }
+      }
+      function mt(e) {
+        return 0 !== (e = -1073741825 & e.pendingLanes) ? e : 1073741824 & e ? 1073741824 : 0;
+      }
+      function ht() {
+        var e = ct;
+        return 0 == (4194240 & (ct <<= 1)) && (ct = 64), e;
+      }
+      function gt(e) {
+        for (var t = [], n = 0; 31 > n; n++) t.push(e);
+        return t;
+      }
+      function yt(e, t, n) {
+        (e.pendingLanes |= t),
+          536870912 !== t && ((e.suspendedLanes = 0), (e.pingedLanes = 0)),
+          ((e = e.eventTimes)[(t = 31 - it(t))] = n);
+      }
+      function bt(e, t) {
+        var n = (e.entangledLanes |= t);
+        for (e = e.entanglements; n; ) {
+          var r = 31 - it(n),
+            a = 1 << r;
+          (a & t) | (e[r] & t) && (e[r] |= t), (n &= ~a);
+        }
+      }
+      var vt = 0;
+      function wt(e) {
+        return 1 < (e &= -e) ? (4 < e ? (0 != (268435455 & e) ? 16 : 536870912) : 4) : 1;
+      }
+      var kt,
+        St,
+        xt,
+        Et,
+        Ct,
+        _t = !1,
+        Pt = [],
+        Tt = null,
+        At = null,
+        Lt = null,
+        jt = new Map(),
+        Rt = new Map(),
+        It = [],
+        Nt =
+          'mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit'.split(
+            ' ',
+          );
+      function Ot(e, t) {
+        switch (e) {
+          case 'focusin':
+          case 'focusout':
+            Tt = null;
+            break;
+          case 'dragenter':
+          case 'dragleave':
+            At = null;
+            break;
+          case 'mouseover':
+          case 'mouseout':
+            Lt = null;
+            break;
+          case 'pointerover':
+          case 'pointerout':
+            jt.delete(t.pointerId);
+            break;
+          case 'gotpointercapture':
+          case 'lostpointercapture':
+            Rt.delete(t.pointerId);
+        }
+      }
+      function Dt(e, t, n, r, a, o) {
+        return null === e || e.nativeEvent !== o
+          ? ((e = { blockedOn: t, domEventName: n, eventSystemFlags: r, nativeEvent: o, targetContainers: [a] }),
+            null !== t && null !== (t = va(t)) && St(t),
+            e)
+          : ((e.eventSystemFlags |= r), (t = e.targetContainers), null !== a && -1 === t.indexOf(a) && t.push(a), e);
+      }
+      function Ft(e) {
+        var t = ba(e.target);
+        if (null !== t) {
+          var n = Ue(t);
+          if (null !== n)
+            if (13 === (t = n.tag)) {
+              if (null !== (t = He(n)))
+                return (
+                  (e.blockedOn = t),
+                  void Ct(e.priority, function () {
+                    xt(n);
+                  })
+                );
+            } else if (3 === t && n.stateNode.current.memoizedState.isDehydrated)
+              return void (e.blockedOn = 3 === n.tag ? n.stateNode.containerInfo : null);
+        }
+        e.blockedOn = null;
+      }
+      function Mt(e) {
+        if (null !== e.blockedOn) return !1;
+        for (var t = e.targetContainers; 0 < t.length; ) {
+          var n = Qt(e.domEventName, e.eventSystemFlags, t[0], e.nativeEvent);
+          if (null !== n) return null !== (t = va(n)) && St(t), (e.blockedOn = n), !1;
+          var r = new (n = e.nativeEvent).constructor(n.type, n);
+          (we = r), n.target.dispatchEvent(r), (we = null), t.shift();
+        }
+        return !0;
+      }
+      function Bt(e, t, n) {
+        Mt(e) && n.delete(t);
+      }
+      function zt() {
+        (_t = !1),
+          null !== Tt && Mt(Tt) && (Tt = null),
+          null !== At && Mt(At) && (At = null),
+          null !== Lt && Mt(Lt) && (Lt = null),
+          jt.forEach(Bt),
+          Rt.forEach(Bt);
+      }
+      function $t(e, t) {
+        e.blockedOn === t &&
+          ((e.blockedOn = null), _t || ((_t = !0), a.unstable_scheduleCallback(a.unstable_NormalPriority, zt)));
+      }
+      function Ut(e) {
+        function t(t) {
+          return $t(t, e);
+        }
+        if (0 < Pt.length) {
+          $t(Pt[0], e);
+          for (var n = 1; n < Pt.length; n++) {
+            var r = Pt[n];
+            r.blockedOn === e && (r.blockedOn = null);
+          }
+        }
+        for (
+          null !== Tt && $t(Tt, e), null !== At && $t(At, e), null !== Lt && $t(Lt, e), jt.forEach(t), Rt.forEach(t), n = 0;
+          n < It.length;
+          n++
+        )
+          (r = It[n]).blockedOn === e && (r.blockedOn = null);
+        for (; 0 < It.length && null === (n = It[0]).blockedOn; ) Ft(n), null === n.blockedOn && It.shift();
+      }
+      var Ht = w.ReactCurrentBatchConfig,
+        qt = !0;
+      function Zt(e, t, n, r) {
+        var a = vt,
+          o = Ht.transition;
+        Ht.transition = null;
+        try {
+          (vt = 1), Wt(e, t, n, r);
+        } finally {
+          (vt = a), (Ht.transition = o);
+        }
+      }
+      function Gt(e, t, n, r) {
+        var a = vt,
+          o = Ht.transition;
+        Ht.transition = null;
+        try {
+          (vt = 4), Wt(e, t, n, r);
+        } finally {
+          (vt = a), (Ht.transition = o);
+        }
+      }
+      function Wt(e, t, n, r) {
+        if (qt) {
+          var a = Qt(e, t, n, r);
+          if (null === a) qr(e, t, r, Vt, n), Ot(e, r);
+          else if (
+            (function (e, t, n, r, a) {
+              switch (t) {
+                case 'focusin':
+                  return (Tt = Dt(Tt, e, t, n, r, a)), !0;
+                case 'dragenter':
+                  return (At = Dt(At, e, t, n, r, a)), !0;
+                case 'mouseover':
+                  return (Lt = Dt(Lt, e, t, n, r, a)), !0;
+                case 'pointerover':
+                  var o = a.pointerId;
+                  return jt.set(o, Dt(jt.get(o) || null, e, t, n, r, a)), !0;
+                case 'gotpointercapture':
+                  return (o = a.pointerId), Rt.set(o, Dt(Rt.get(o) || null, e, t, n, r, a)), !0;
+              }
+              return !1;
+            })(a, e, t, n, r)
+          )
+            r.stopPropagation();
+          else if ((Ot(e, r), 4 & t && -1 < Nt.indexOf(e))) {
+            for (; null !== a; ) {
+              var o = va(a);
+              if ((null !== o && kt(o), null === (o = Qt(e, t, n, r)) && qr(e, t, r, Vt, n), o === a)) break;
+              a = o;
+            }
+            null !== a && r.stopPropagation();
+          } else qr(e, t, r, null, n);
+        }
+      }
+      var Vt = null;
+      function Qt(e, t, n, r) {
+        if (((Vt = null), null !== (e = ba((e = ke(r))))))
+          if (null === (t = Ue(e))) e = null;
+          else if (13 === (n = t.tag)) {
+            if (null !== (e = He(t))) return e;
+            e = null;
+          } else if (3 === n) {
+            if (t.stateNode.current.memoizedState.isDehydrated) return 3 === t.tag ? t.stateNode.containerInfo : null;
+            e = null;
+          } else t !== e && (e = null);
+        return (Vt = e), null;
+      }
+      function Kt(e) {
+        switch (e) {
+          case 'cancel':
+          case 'click':
+          case 'close':
+          case 'contextmenu':
+          case 'copy':
+          case 'cut':
+          case 'auxclick':
+          case 'dblclick':
+          case 'dragend':
+          case 'dragstart':
+          case 'drop':
+          case 'focusin':
+          case 'focusout':
+          case 'input':
+          case 'invalid':
+          case 'keydown':
+          case 'keypress':
+          case 'keyup':
+          case 'mousedown':
+          case 'mouseup':
+          case 'paste':
+          case 'pause':
+          case 'play':
+          case 'pointercancel':
+          case 'pointerdown':
+          case 'pointerup':
+          case 'ratechange':
+          case 'reset':
+          case 'resize':
+          case 'seeked':
+          case 'submit':
+          case 'touchcancel':
+          case 'touchend':
+          case 'touchstart':
+          case 'volumechange':
+          case 'change':
+          case 'selectionchange':
+          case 'textInput':
+          case 'compositionstart':
+          case 'compositionend':
+          case 'compositionupdate':
+          case 'beforeblur':
+          case 'afterblur':
+          case 'beforeinput':
+          case 'blur':
+          case 'fullscreenchange':
+          case 'focus':
+          case 'hashchange':
+          case 'popstate':
+          case 'select':
+          case 'selectstart':
+            return 1;
+          case 'drag':
+          case 'dragenter':
+          case 'dragexit':
+          case 'dragleave':
+          case 'dragover':
+          case 'mousemove':
+          case 'mouseout':
+          case 'mouseover':
+          case 'pointermove':
+          case 'pointerout':
+          case 'pointerover':
+          case 'scroll':
+          case 'toggle':
+          case 'touchmove':
+          case 'wheel':
+          case 'mouseenter':
+          case 'mouseleave':
+          case 'pointerenter':
+          case 'pointerleave':
+            return 4;
+          case 'message':
+            switch (Xe()) {
+              case Je:
+                return 1;
+              case et:
+                return 4;
+              case tt:
+              case nt:
+                return 16;
+              case rt:
+                return 536870912;
+              default:
+                return 16;
+            }
+          default:
+            return 16;
+        }
+      }
+      var Yt = null,
+        Xt = null,
+        Jt = null;
+      function en() {
+        if (Jt) return Jt;
+        var e,
+          t,
+          n = Xt,
+          r = n.length,
+          a = 'value' in Yt ? Yt.value : Yt.textContent,
+          o = a.length;
+        for (e = 0; e < r && n[e] === a[e]; e++);
+        var i = r - e;
+        for (t = 1; t <= i && n[r - t] === a[o - t]; t++);
+        return (Jt = a.slice(e, 1 < t ? 1 - t : void 0));
+      }
+      function tn(e) {
+        var t = e.keyCode;
+        return (
+          'charCode' in e ? 0 === (e = e.charCode) && 13 === t && (e = 13) : (e = t),
+          10 === e && (e = 13),
+          32 <= e || 13 === e ? e : 0
+        );
+      }
+      function nn() {
+        return !0;
+      }
+      function rn() {
+        return !1;
+      }
+      function an(e) {
+        function t(t, n, r, a, o) {
+          for (var i in ((this._reactName = t),
+          (this._targetInst = r),
+          (this.type = n),
+          (this.nativeEvent = a),
+          (this.target = o),
+          (this.currentTarget = null),
+          e))
+            e.hasOwnProperty(i) && ((t = e[i]), (this[i] = t ? t(a) : a[i]));
+          return (
+            (this.isDefaultPrevented = (null != a.defaultPrevented ? a.defaultPrevented : !1 === a.returnValue) ? nn : rn),
+            (this.isPropagationStopped = rn),
+            this
+          );
+        }
+        return (
+          F(t.prototype, {
+            preventDefault: function () {
+              this.defaultPrevented = !0;
+              var e = this.nativeEvent;
+              e &&
+                (e.preventDefault ? e.preventDefault() : 'unknown' != typeof e.returnValue && (e.returnValue = !1),
+                (this.isDefaultPrevented = nn));
+            },
+            stopPropagation: function () {
+              var e = this.nativeEvent;
+              e &&
+                (e.stopPropagation ? e.stopPropagation() : 'unknown' != typeof e.cancelBubble && (e.cancelBubble = !0),
+                (this.isPropagationStopped = nn));
+            },
+            persist: function () {},
+            isPersistent: nn,
+          }),
+          t
+        );
+      }
+      var on,
+        ln,
+        sn,
+        cn = {
+          eventPhase: 0,
+          bubbles: 0,
+          cancelable: 0,
+          timeStamp: function (e) {
+            return e.timeStamp || Date.now();
+          },
+          defaultPrevented: 0,
+          isTrusted: 0,
+        },
+        un = an(cn),
+        dn = F({}, cn, { view: 0, detail: 0 }),
+        pn = an(dn),
+        fn = F({}, dn, {
+          screenX: 0,
+          screenY: 0,
+          clientX: 0,
+          clientY: 0,
+          pageX: 0,
+          pageY: 0,
+          ctrlKey: 0,
+          shiftKey: 0,
+          altKey: 0,
+          metaKey: 0,
+          getModifierState: Cn,
+          button: 0,
+          buttons: 0,
+          relatedTarget: function (e) {
+            return void 0 === e.relatedTarget ? (e.fromElement === e.srcElement ? e.toElement : e.fromElement) : e.relatedTarget;
+          },
+          movementX: function (e) {
+            return 'movementX' in e
+              ? e.movementX
+              : (e !== sn &&
+                  (sn && 'mousemove' === e.type ? ((on = e.screenX - sn.screenX), (ln = e.screenY - sn.screenY)) : (ln = on = 0),
+                  (sn = e)),
+                on);
+          },
+          movementY: function (e) {
+            return 'movementY' in e ? e.movementY : ln;
+          },
+        }),
+        mn = an(fn),
+        hn = an(F({}, fn, { dataTransfer: 0 })),
+        gn = an(F({}, dn, { relatedTarget: 0 })),
+        yn = an(F({}, cn, { animationName: 0, elapsedTime: 0, pseudoElement: 0 })),
+        bn = F({}, cn, {
+          clipboardData: function (e) {
+            return 'clipboardData' in e ? e.clipboardData : window.clipboardData;
+          },
+        }),
+        vn = an(bn),
+        wn = an(F({}, cn, { data: 0 })),
+        kn = {
+          Esc: 'Escape',
+          Spacebar: ' ',
+          Left: 'ArrowLeft',
+          Up: 'ArrowUp',
+          Right: 'ArrowRight',
+          Down: 'ArrowDown',
+          Del: 'Delete',
+          Win: 'OS',
+          Menu: 'ContextMenu',
+          Apps: 'ContextMenu',
+          Scroll: 'ScrollLock',
+          MozPrintableKey: 'Unidentified',
+        },
+        Sn = {
+          8: 'Backspace',
+          9: 'Tab',
+          12: 'Clear',
+          13: 'Enter',
+          16: 'Shift',
+          17: 'Control',
+          18: 'Alt',
+          19: 'Pause',
+          20: 'CapsLock',
+          27: 'Escape',
+          32: ' ',
+          33: 'PageUp',
+          34: 'PageDown',
+          35: 'End',
+          36: 'Home',
+          37: 'ArrowLeft',
+          38: 'ArrowUp',
+          39: 'ArrowRight',
+          40: 'ArrowDown',
+          45: 'Insert',
+          46: 'Delete',
+          112: 'F1',
+          113: 'F2',
+          114: 'F3',
+          115: 'F4',
+          116: 'F5',
+          117: 'F6',
+          118: 'F7',
+          119: 'F8',
+          120: 'F9',
+          121: 'F10',
+          122: 'F11',
+          123: 'F12',
+          144: 'NumLock',
+          145: 'ScrollLock',
+          224: 'Meta',
+        },
+        xn = { Alt: 'altKey', Control: 'ctrlKey', Meta: 'metaKey', Shift: 'shiftKey' };
+      function En(e) {
+        var t = this.nativeEvent;
+        return t.getModifierState ? t.getModifierState(e) : !!(e = xn[e]) && !!t[e];
+      }
+      function Cn() {
+        return En;
+      }
+      var _n = F({}, dn, {
+          key: function (e) {
+            if (e.key) {
+              var t = kn[e.key] || e.key;
+              if ('Unidentified' !== t) return t;
+            }
+            return 'keypress' === e.type
+              ? 13 === (e = tn(e))
+                ? 'Enter'
+                : String.fromCharCode(e)
+              : 'keydown' === e.type || 'keyup' === e.type
+                ? Sn[e.keyCode] || 'Unidentified'
+                : '';
+          },
+          code: 0,
+          location: 0,
+          ctrlKey: 0,
+          shiftKey: 0,
+          altKey: 0,
+          metaKey: 0,
+          repeat: 0,
+          locale: 0,
+          getModifierState: Cn,
+          charCode: function (e) {
+            return 'keypress' === e.type ? tn(e) : 0;
+          },
+          keyCode: function (e) {
+            return 'keydown' === e.type || 'keyup' === e.type ? e.keyCode : 0;
+          },
+          which: function (e) {
+            return 'keypress' === e.type ? tn(e) : 'keydown' === e.type || 'keyup' === e.type ? e.keyCode : 0;
+          },
+        }),
+        Pn = an(_n),
+        Tn = an(
+          F({}, fn, {
+            pointerId: 0,
+            width: 0,
+            height: 0,
+            pressure: 0,
+            tangentialPressure: 0,
+            tiltX: 0,
+            tiltY: 0,
+            twist: 0,
+            pointerType: 0,
+            isPrimary: 0,
+          }),
+        ),
+        An = an(
+          F({}, dn, {
+            touches: 0,
+            targetTouches: 0,
+            changedTouches: 0,
+            altKey: 0,
+            metaKey: 0,
+            ctrlKey: 0,
+            shiftKey: 0,
+            getModifierState: Cn,
+          }),
+        ),
+        Ln = an(F({}, cn, { propertyName: 0, elapsedTime: 0, pseudoElement: 0 })),
+        jn = F({}, fn, {
+          deltaX: function (e) {
+            return 'deltaX' in e ? e.deltaX : 'wheelDeltaX' in e ? -e.wheelDeltaX : 0;
+          },
+          deltaY: function (e) {
+            return 'deltaY' in e ? e.deltaY : 'wheelDeltaY' in e ? -e.wheelDeltaY : 'wheelDelta' in e ? -e.wheelDelta : 0;
+          },
+          deltaZ: 0,
+          deltaMode: 0,
+        }),
+        Rn = an(jn),
+        In = [9, 13, 27, 32],
+        Nn = u && 'CompositionEvent' in window,
+        On = null;
+      u && 'documentMode' in document && (On = document.documentMode);
+      var Dn = u && 'TextEvent' in window && !On,
+        Fn = u && (!Nn || (On && 8 < On && 11 >= On)),
+        Mn = String.fromCharCode(32),
+        Bn = !1;
+      function zn(e, t) {
+        switch (e) {
+          case 'keyup':
+            return -1 !== In.indexOf(t.keyCode);
+          case 'keydown':
+            return 229 !== t.keyCode;
+          case 'keypress':
+          case 'mousedown':
+          case 'focusout':
+            return !0;
+          default:
+            return !1;
+        }
+      }
+      function $n(e) {
+        return 'object' == typeof (e = e.detail) && 'data' in e ? e.data : null;
+      }
+      var Un = !1;
+      var Hn = {
+        color: !0,
+        date: !0,
+        datetime: !0,
+        'datetime-local': !0,
+        email: !0,
+        month: !0,
+        number: !0,
+        password: !0,
+        range: !0,
+        search: !0,
+        tel: !0,
+        text: !0,
+        time: !0,
+        url: !0,
+        week: !0,
+      };
+      function qn(e) {
+        var t = e && e.nodeName && e.nodeName.toLowerCase();
+        return 'input' === t ? !!Hn[e.type] : 'textarea' === t;
+      }
+      function Zn(e, t, n, r) {
+        _e(r),
+          0 < (t = Gr(t, 'onChange')).length &&
+            ((n = new un('onChange', 'change', null, n, r)), e.push({ event: n, listeners: t }));
+      }
+      var Gn = null,
+        Wn = null;
+      function Vn(e) {
+        Mr(e, 0);
+      }
+      function Qn(e) {
+        if (W(wa(e))) return e;
+      }
+      function Kn(e, t) {
+        if ('change' === e) return t;
+      }
+      var Yn = !1;
+      if (u) {
+        var Xn;
+        if (u) {
+          var Jn = 'oninput' in document;
+          if (!Jn) {
+            var er = document.createElement('div');
+            er.setAttribute('oninput', 'return;'), (Jn = 'function' == typeof er.oninput);
+          }
+          Xn = Jn;
+        } else Xn = !1;
+        Yn = Xn && (!document.documentMode || 9 < document.documentMode);
+      }
+      function tr() {
+        Gn && (Gn.detachEvent('onpropertychange', nr), (Wn = Gn = null));
+      }
+      function nr(e) {
+        if ('value' === e.propertyName && Qn(Wn)) {
+          var t = [];
+          Zn(t, Wn, e, ke(e)), je(Vn, t);
+        }
+      }
+      function rr(e, t, n) {
+        'focusin' === e ? (tr(), (Wn = n), (Gn = t).attachEvent('onpropertychange', nr)) : 'focusout' === e && tr();
+      }
+      function ar(e) {
+        if ('selectionchange' === e || 'keyup' === e || 'keydown' === e) return Qn(Wn);
+      }
+      function or(e, t) {
+        if ('click' === e) return Qn(t);
+      }
+      function ir(e, t) {
+        if ('input' === e || 'change' === e) return Qn(t);
+      }
+      var lr =
+        'function' == typeof Object.is
+          ? Object.is
+          : function (e, t) {
+              return (e === t && (0 !== e || 1 / e == 1 / t)) || (e != e && t != t);
+            };
+      function sr(e, t) {
+        if (lr(e, t)) return !0;
+        if ('object' != typeof e || null === e || 'object' != typeof t || null === t) return !1;
+        var n = Object.keys(e),
+          r = Object.keys(t);
+        if (n.length !== r.length) return !1;
+        for (r = 0; r < n.length; r++) {
+          var a = n[r];
+          if (!d.call(t, a) || !lr(e[a], t[a])) return !1;
+        }
+        return !0;
+      }
+      function cr(e) {
+        for (; e && e.firstChild; ) e = e.firstChild;
+        return e;
+      }
+      function ur(e, t) {
+        var n,
+          r = cr(e);
+        for (e = 0; r; ) {
+          if (3 === r.nodeType) {
+            if (((n = e + r.textContent.length), e <= t && n >= t)) return { node: r, offset: t - e };
+            e = n;
+          }
+          e: {
+            for (; r; ) {
+              if (r.nextSibling) {
+                r = r.nextSibling;
+                break e;
+              }
+              r = r.parentNode;
+            }
+            r = void 0;
+          }
+          r = cr(r);
+        }
+      }
+      function dr(e, t) {
+        return (
+          !(!e || !t) &&
+          (e === t ||
+            ((!e || 3 !== e.nodeType) &&
+              (t && 3 === t.nodeType
+                ? dr(e, t.parentNode)
+                : 'contains' in e
+                  ? e.contains(t)
+                  : !!e.compareDocumentPosition && !!(16 & e.compareDocumentPosition(t)))))
+        );
+      }
+      function pr() {
+        for (var e = window, t = V(); t instanceof e.HTMLIFrameElement; ) {
+          try {
+            var n = 'string' == typeof t.contentWindow.location.href;
+          } catch (r) {
+            n = !1;
+          }
+          if (!n) break;
+          t = V((e = t.contentWindow).document);
+        }
+        return t;
+      }
+      function fr(e) {
+        var t = e && e.nodeName && e.nodeName.toLowerCase();
+        return (
+          t &&
+          (('input' === t &&
+            ('text' === e.type || 'search' === e.type || 'tel' === e.type || 'url' === e.type || 'password' === e.type)) ||
+            'textarea' === t ||
+            'true' === e.contentEditable)
+        );
+      }
+      function mr(e) {
+        var t = pr(),
+          n = e.focusedElem,
+          r = e.selectionRange;
+        if (t !== n && n && n.ownerDocument && dr(n.ownerDocument.documentElement, n)) {
+          if (null !== r && fr(n))
+            if (((t = r.start), void 0 === (e = r.end) && (e = t), 'selectionStart' in n))
+              (n.selectionStart = t), (n.selectionEnd = Math.min(e, n.value.length));
+            else if ((e = ((t = n.ownerDocument || document) && t.defaultView) || window).getSelection) {
+              e = e.getSelection();
+              var a = n.textContent.length,
+                o = Math.min(r.start, a);
+              (r = void 0 === r.end ? o : Math.min(r.end, a)), !e.extend && o > r && ((a = r), (r = o), (o = a)), (a = ur(n, o));
+              var i = ur(n, r);
+              a &&
+                i &&
+                (1 !== e.rangeCount ||
+                  e.anchorNode !== a.node ||
+                  e.anchorOffset !== a.offset ||
+                  e.focusNode !== i.node ||
+                  e.focusOffset !== i.offset) &&
+                ((t = t.createRange()).setStart(a.node, a.offset),
+                e.removeAllRanges(),
+                o > r ? (e.addRange(t), e.extend(i.node, i.offset)) : (t.setEnd(i.node, i.offset), e.addRange(t)));
+            }
+          for (t = [], e = n; (e = e.parentNode); )
+            1 === e.nodeType && t.push({ element: e, left: e.scrollLeft, top: e.scrollTop });
+          for ('function' == typeof n.focus && n.focus(), n = 0; n < t.length; n++)
+            ((e = t[n]).element.scrollLeft = e.left), (e.element.scrollTop = e.top);
+        }
+      }
+      var hr = u && 'documentMode' in document && 11 >= document.documentMode,
+        gr = null,
+        yr = null,
+        br = null,
+        vr = !1;
+      function wr(e, t, n) {
+        var r = n.window === n ? n.document : 9 === n.nodeType ? n : n.ownerDocument;
+        vr ||
+          null == gr ||
+          gr !== V(r) ||
+          ('selectionStart' in (r = gr) && fr(r)
+            ? (r = { start: r.selectionStart, end: r.selectionEnd })
+            : (r = {
+                anchorNode: (r = ((r.ownerDocument && r.ownerDocument.defaultView) || window).getSelection()).anchorNode,
+                anchorOffset: r.anchorOffset,
+                focusNode: r.focusNode,
+                focusOffset: r.focusOffset,
+              }),
+          (br && sr(br, r)) ||
+            ((br = r),
+            0 < (r = Gr(yr, 'onSelect')).length &&
+              ((t = new un('onSelect', 'select', null, t, n)), e.push({ event: t, listeners: r }), (t.target = gr))));
+      }
+      function kr(e, t) {
+        var n = {};
+        return (n[e.toLowerCase()] = t.toLowerCase()), (n['Webkit' + e] = 'webkit' + t), (n['Moz' + e] = 'moz' + t), n;
+      }
+      var Sr = {
+          animationend: kr('Animation', 'AnimationEnd'),
+          animationiteration: kr('Animation', 'AnimationIteration'),
+          animationstart: kr('Animation', 'AnimationStart'),
+          transitionend: kr('Transition', 'TransitionEnd'),
+        },
+        xr = {},
+        Er = {};
+      function Cr(e) {
+        if (xr[e]) return xr[e];
+        if (!Sr[e]) return e;
+        var t,
+          n = Sr[e];
+        for (t in n) if (n.hasOwnProperty(t) && t in Er) return (xr[e] = n[t]);
+        return e;
+      }
+      u &&
+        ((Er = document.createElement('div').style),
+        'AnimationEvent' in window ||
+          (delete Sr.animationend.animation, delete Sr.animationiteration.animation, delete Sr.animationstart.animation),
+        'TransitionEvent' in window || delete Sr.transitionend.transition);
+      var _r = Cr('animationend'),
+        Pr = Cr('animationiteration'),
+        Tr = Cr('animationstart'),
+        Ar = Cr('transitionend'),
+        Lr = new Map(),
+        jr =
+          'abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel'.split(
+            ' ',
+          );
+      function Rr(e, t) {
+        Lr.set(e, t), s(t, [e]);
+      }
+      for (var Ir = 0; Ir < jr.length; Ir++) {
+        var Nr = jr[Ir];
+        Rr(Nr.toLowerCase(), 'on' + (Nr[0].toUpperCase() + Nr.slice(1)));
+      }
+      Rr(_r, 'onAnimationEnd'),
+        Rr(Pr, 'onAnimationIteration'),
+        Rr(Tr, 'onAnimationStart'),
+        Rr('dblclick', 'onDoubleClick'),
+        Rr('focusin', 'onFocus'),
+        Rr('focusout', 'onBlur'),
+        Rr(Ar, 'onTransitionEnd'),
+        c('onMouseEnter', ['mouseout', 'mouseover']),
+        c('onMouseLeave', ['mouseout', 'mouseover']),
+        c('onPointerEnter', ['pointerout', 'pointerover']),
+        c('onPointerLeave', ['pointerout', 'pointerover']),
+        s('onChange', 'change click focusin focusout input keydown keyup selectionchange'.split(' ')),
+        s('onSelect', 'focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange'.split(' ')),
+        s('onBeforeInput', ['compositionend', 'keypress', 'textInput', 'paste']),
+        s('onCompositionEnd', 'compositionend focusout keydown keypress keyup mousedown'.split(' ')),
+        s('onCompositionStart', 'compositionstart focusout keydown keypress keyup mousedown'.split(' ')),
+        s('onCompositionUpdate', 'compositionupdate focusout keydown keypress keyup mousedown'.split(' '));
+      var Or =
+          'abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting'.split(
+            ' ',
+          ),
+        Dr = new Set('cancel close invalid load scroll toggle'.split(' ').concat(Or));
+      function Fr(e, t, n) {
+        var r = e.type || 'unknown-event';
+        (e.currentTarget = n),
+          (function (e, t, n, r, a, i, l, s, c) {
+            if (($e.apply(this, arguments), De)) {
+              if (!De) throw Error(o(198));
+              var u = Fe;
+              (De = !1), (Fe = null), Me || ((Me = !0), (Be = u));
+            }
+          })(r, t, void 0, e),
+          (e.currentTarget = null);
+      }
+      function Mr(e, t) {
+        t = 0 != (4 & t);
+        for (var n = 0; n < e.length; n++) {
+          var r = e[n],
+            a = r.event;
+          r = r.listeners;
+          e: {
+            var o = void 0;
+            if (t)
+              for (var i = r.length - 1; 0 <= i; i--) {
+                var l = r[i],
+                  s = l.instance,
+                  c = l.currentTarget;
+                if (((l = l.listener), s !== o && a.isPropagationStopped())) break e;
+                Fr(a, l, c), (o = s);
+              }
+            else
+              for (i = 0; i < r.length; i++) {
+                if (((s = (l = r[i]).instance), (c = l.currentTarget), (l = l.listener), s !== o && a.isPropagationStopped()))
+                  break e;
+                Fr(a, l, c), (o = s);
+              }
+          }
+        }
+        if (Me) throw ((e = Be), (Me = !1), (Be = null), e);
+      }
+      function Br(e, t) {
+        var n = t[ha];
+        void 0 === n && (n = t[ha] = new Set());
+        var r = e + '__bubble';
+        n.has(r) || (Hr(t, e, 2, !1), n.add(r));
+      }
+      function zr(e, t, n) {
+        var r = 0;
+        t && (r |= 4), Hr(n, e, r, t);
+      }
+      var $r = '_reactListening' + Math.random().toString(36).slice(2);
+      function Ur(e) {
+        if (!e[$r]) {
+          (e[$r] = !0),
+            i.forEach(function (t) {
+              'selectionchange' !== t && (Dr.has(t) || zr(t, !1, e), zr(t, !0, e));
+            });
+          var t = 9 === e.nodeType ? e : e.ownerDocument;
+          null === t || t[$r] || ((t[$r] = !0), zr('selectionchange', !1, t));
+        }
+      }
+      function Hr(e, t, n, r) {
+        switch (Kt(t)) {
+          case 1:
+            var a = Zt;
+            break;
+          case 4:
+            a = Gt;
+            break;
+          default:
+            a = Wt;
+        }
+        (n = a.bind(null, t, n, e)),
+          (a = void 0),
+          !Ie || ('touchstart' !== t && 'touchmove' !== t && 'wheel' !== t) || (a = !0),
+          r
+            ? void 0 !== a
+              ? e.addEventListener(t, n, { capture: !0, passive: a })
+              : e.addEventListener(t, n, !0)
+            : void 0 !== a
+              ? e.addEventListener(t, n, { passive: a })
+              : e.addEventListener(t, n, !1);
+      }
+      function qr(e, t, n, r, a) {
+        var o = r;
+        if (0 == (1 & t) && 0 == (2 & t) && null !== r)
+          e: for (;;) {
+            if (null === r) return;
+            var i = r.tag;
+            if (3 === i || 4 === i) {
+              var l = r.stateNode.containerInfo;
+              if (l === a || (8 === l.nodeType && l.parentNode === a)) break;
+              if (4 === i)
+                for (i = r.return; null !== i; ) {
+                  var s = i.tag;
+                  if ((3 === s || 4 === s) && ((s = i.stateNode.containerInfo) === a || (8 === s.nodeType && s.parentNode === a)))
+                    return;
+                  i = i.return;
+                }
+              for (; null !== l; ) {
+                if (null === (i = ba(l))) return;
+                if (5 === (s = i.tag) || 6 === s) {
+                  r = o = i;
+                  continue e;
+                }
+                l = l.parentNode;
+              }
+            }
+            r = r.return;
+          }
+        je(function () {
+          var r = o,
+            a = ke(n),
+            i = [];
+          e: {
+            var l = Lr.get(e);
+            if (void 0 !== l) {
+              var s = un,
+                c = e;
+              switch (e) {
+                case 'keypress':
+                  if (0 === tn(n)) break e;
+                case 'keydown':
+                case 'keyup':
+                  s = Pn;
+                  break;
+                case 'focusin':
+                  (c = 'focus'), (s = gn);
+                  break;
+                case 'focusout':
+                  (c = 'blur'), (s = gn);
+                  break;
+                case 'beforeblur':
+                case 'afterblur':
+                  s = gn;
+                  break;
+                case 'click':
+                  if (2 === n.button) break e;
+                case 'auxclick':
+                case 'dblclick':
+                case 'mousedown':
+                case 'mousemove':
+                case 'mouseup':
+                case 'mouseout':
+                case 'mouseover':
+                case 'contextmenu':
+                  s = mn;
+                  break;
+                case 'drag':
+                case 'dragend':
+                case 'dragenter':
+                case 'dragexit':
+                case 'dragleave':
+                case 'dragover':
+                case 'dragstart':
+                case 'drop':
+                  s = hn;
+                  break;
+                case 'touchcancel':
+                case 'touchend':
+                case 'touchmove':
+                case 'touchstart':
+                  s = An;
+                  break;
+                case _r:
+                case Pr:
+                case Tr:
+                  s = yn;
+                  break;
+                case Ar:
+                  s = Ln;
+                  break;
+                case 'scroll':
+                  s = pn;
+                  break;
+                case 'wheel':
+                  s = Rn;
+                  break;
+                case 'copy':
+                case 'cut':
+                case 'paste':
+                  s = vn;
+                  break;
+                case 'gotpointercapture':
+                case 'lostpointercapture':
+                case 'pointercancel':
+                case 'pointerdown':
+                case 'pointermove':
+                case 'pointerout':
+                case 'pointerover':
+                case 'pointerup':
+                  s = Tn;
+              }
+              var u = 0 != (4 & t),
+                d = !u && 'scroll' === e,
+                p = u ? (null !== l ? l + 'Capture' : null) : l;
+              u = [];
+              for (var f, m = r; null !== m; ) {
+                var h = (f = m).stateNode;
+                if ((5 === f.tag && null !== h && ((f = h), null !== p && null != (h = Re(m, p)) && u.push(Zr(m, h, f))), d))
+                  break;
+                m = m.return;
+              }
+              0 < u.length && ((l = new s(l, c, null, n, a)), i.push({ event: l, listeners: u }));
+            }
+          }
+          if (0 == (7 & t)) {
+            if (
+              ((s = 'mouseout' === e || 'pointerout' === e),
+              (!(l = 'mouseover' === e || 'pointerover' === e) ||
+                n === we ||
+                !(c = n.relatedTarget || n.fromElement) ||
+                (!ba(c) && !c[ma])) &&
+                (s || l) &&
+                ((l = a.window === a ? a : (l = a.ownerDocument) ? l.defaultView || l.parentWindow : window),
+                s
+                  ? ((s = r),
+                    null !== (c = (c = n.relatedTarget || n.toElement) ? ba(c) : null) &&
+                      (c !== (d = Ue(c)) || (5 !== c.tag && 6 !== c.tag)) &&
+                      (c = null))
+                  : ((s = null), (c = r)),
+                s !== c))
+            ) {
+              if (
+                ((u = mn),
+                (h = 'onMouseLeave'),
+                (p = 'onMouseEnter'),
+                (m = 'mouse'),
+                ('pointerout' !== e && 'pointerover' !== e) ||
+                  ((u = Tn), (h = 'onPointerLeave'), (p = 'onPointerEnter'), (m = 'pointer')),
+                (d = null == s ? l : wa(s)),
+                (f = null == c ? l : wa(c)),
+                ((l = new u(h, m + 'leave', s, n, a)).target = d),
+                (l.relatedTarget = f),
+                (h = null),
+                ba(a) === r && (((u = new u(p, m + 'enter', c, n, a)).target = f), (u.relatedTarget = d), (h = u)),
+                (d = h),
+                s && c)
+              )
+                e: {
+                  for (p = c, m = 0, f = u = s; f; f = Wr(f)) m++;
+                  for (f = 0, h = p; h; h = Wr(h)) f++;
+                  for (; 0 < m - f; ) (u = Wr(u)), m--;
+                  for (; 0 < f - m; ) (p = Wr(p)), f--;
+                  for (; m--; ) {
+                    if (u === p || (null !== p && u === p.alternate)) break e;
+                    (u = Wr(u)), (p = Wr(p));
+                  }
+                  u = null;
+                }
+              else u = null;
+              null !== s && Vr(i, l, s, u, !1), null !== c && null !== d && Vr(i, d, c, u, !0);
+            }
+            if (
+              'select' === (s = (l = r ? wa(r) : window).nodeName && l.nodeName.toLowerCase()) ||
+              ('input' === s && 'file' === l.type)
+            )
+              var g = Kn;
+            else if (qn(l))
+              if (Yn) g = ir;
+              else {
+                g = ar;
+                var y = rr;
+              }
+            else (s = l.nodeName) && 'input' === s.toLowerCase() && ('checkbox' === l.type || 'radio' === l.type) && (g = or);
+            switch (
+              (g && (g = g(e, r))
+                ? Zn(i, g, n, a)
+                : (y && y(e, l, r),
+                  'focusout' === e && (y = l._wrapperState) && y.controlled && 'number' === l.type && ee(l, 'number', l.value)),
+              (y = r ? wa(r) : window),
+              e)
+            ) {
+              case 'focusin':
+                (qn(y) || 'true' === y.contentEditable) && ((gr = y), (yr = r), (br = null));
+                break;
+              case 'focusout':
+                br = yr = gr = null;
+                break;
+              case 'mousedown':
+                vr = !0;
+                break;
+              case 'contextmenu':
+              case 'mouseup':
+              case 'dragend':
+                (vr = !1), wr(i, n, a);
+                break;
+              case 'selectionchange':
+                if (hr) break;
+              case 'keydown':
+              case 'keyup':
+                wr(i, n, a);
+            }
+            var b;
+            if (Nn)
+              e: {
+                switch (e) {
+                  case 'compositionstart':
+                    var v = 'onCompositionStart';
+                    break e;
+                  case 'compositionend':
+                    v = 'onCompositionEnd';
+                    break e;
+                  case 'compositionupdate':
+                    v = 'onCompositionUpdate';
+                    break e;
+                }
+                v = void 0;
+              }
+            else Un ? zn(e, n) && (v = 'onCompositionEnd') : 'keydown' === e && 229 === n.keyCode && (v = 'onCompositionStart');
+            v &&
+              (Fn &&
+                'ko' !== n.locale &&
+                (Un || 'onCompositionStart' !== v
+                  ? 'onCompositionEnd' === v && Un && (b = en())
+                  : ((Xt = 'value' in (Yt = a) ? Yt.value : Yt.textContent), (Un = !0))),
+              0 < (y = Gr(r, v)).length &&
+                ((v = new wn(v, e, null, n, a)),
+                i.push({ event: v, listeners: y }),
+                b ? (v.data = b) : null !== (b = $n(n)) && (v.data = b))),
+              (b = Dn
+                ? (function (e, t) {
+                    switch (e) {
+                      case 'compositionend':
+                        return $n(t);
+                      case 'keypress':
+                        return 32 !== t.which ? null : ((Bn = !0), Mn);
+                      case 'textInput':
+                        return (e = t.data) === Mn && Bn ? null : e;
+                      default:
+                        return null;
+                    }
+                  })(e, n)
+                : (function (e, t) {
+                    if (Un)
+                      return 'compositionend' === e || (!Nn && zn(e, t))
+                        ? ((e = en()), (Jt = Xt = Yt = null), (Un = !1), e)
+                        : null;
+                    switch (e) {
+                      case 'paste':
+                      default:
+                        return null;
+                      case 'keypress':
+                        if (!(t.ctrlKey || t.altKey || t.metaKey) || (t.ctrlKey && t.altKey)) {
+                          if (t.char && 1 < t.char.length) return t.char;
+                          if (t.which) return String.fromCharCode(t.which);
+                        }
+                        return null;
+                      case 'compositionend':
+                        return Fn && 'ko' !== t.locale ? null : t.data;
+                    }
+                  })(e, n)) &&
+                0 < (r = Gr(r, 'onBeforeInput')).length &&
+                ((a = new wn('onBeforeInput', 'beforeinput', null, n, a)), i.push({ event: a, listeners: r }), (a.data = b));
+          }
+          Mr(i, t);
+        });
+      }
+      function Zr(e, t, n) {
+        return { instance: e, listener: t, currentTarget: n };
+      }
+      function Gr(e, t) {
+        for (var n = t + 'Capture', r = []; null !== e; ) {
+          var a = e,
+            o = a.stateNode;
+          5 === a.tag &&
+            null !== o &&
+            ((a = o), null != (o = Re(e, n)) && r.unshift(Zr(e, o, a)), null != (o = Re(e, t)) && r.push(Zr(e, o, a))),
+            (e = e.return);
+        }
+        return r;
+      }
+      function Wr(e) {
+        if (null === e) return null;
+        do {
+          e = e.return;
+        } while (e && 5 !== e.tag);
+        return e || null;
+      }
+      function Vr(e, t, n, r, a) {
+        for (var o = t._reactName, i = []; null !== n && n !== r; ) {
+          var l = n,
+            s = l.alternate,
+            c = l.stateNode;
+          if (null !== s && s === r) break;
+          5 === l.tag &&
+            null !== c &&
+            ((l = c),
+            a ? null != (s = Re(n, o)) && i.unshift(Zr(n, s, l)) : a || (null != (s = Re(n, o)) && i.push(Zr(n, s, l)))),
+            (n = n.return);
+        }
+        0 !== i.length && e.push({ event: t, listeners: i });
+      }
+      var Qr = /\r\n?/g,
+        Kr = /\u0000|\uFFFD/g;
+      function Yr(e) {
+        return ('string' == typeof e ? e : '' + e).replace(Qr, '\n').replace(Kr, '');
+      }
+      function Xr(e, t, n) {
+        if (((t = Yr(t)), Yr(e) !== t && n)) throw Error(o(425));
+      }
+      function Jr() {}
+      var ea = null,
+        ta = null;
+      function na(e, t) {
+        return (
+          'textarea' === e ||
+          'noscript' === e ||
+          'string' == typeof t.children ||
+          'number' == typeof t.children ||
+          ('object' == typeof t.dangerouslySetInnerHTML &&
+            null !== t.dangerouslySetInnerHTML &&
+            null != t.dangerouslySetInnerHTML.__html)
+        );
+      }
+      var ra = 'function' == typeof setTimeout ? setTimeout : void 0,
+        aa = 'function' == typeof clearTimeout ? clearTimeout : void 0,
+        oa = 'function' == typeof Promise ? Promise : void 0,
+        ia =
+          'function' == typeof queueMicrotask
+            ? queueMicrotask
+            : void 0 !== oa
+              ? function (e) {
+                  return oa.resolve(null).then(e).catch(la);
+                }
+              : ra;
+      function la(e) {
+        setTimeout(function () {
+          throw e;
+        });
+      }
+      function sa(e, t) {
+        var n = t,
+          r = 0;
+        do {
+          var a = n.nextSibling;
+          if ((e.removeChild(n), a && 8 === a.nodeType))
+            if ('/$' === (n = a.data)) {
+              if (0 === r) return e.removeChild(a), void Ut(t);
+              r--;
+            } else ('$' !== n && '$?' !== n && '$!' !== n) || r++;
+          n = a;
+        } while (n);
+        Ut(t);
+      }
+      function ca(e) {
+        for (; null != e; e = e.nextSibling) {
+          var t = e.nodeType;
+          if (1 === t || 3 === t) break;
+          if (8 === t) {
+            if ('$' === (t = e.data) || '$!' === t || '$?' === t) break;
+            if ('/$' === t) return null;
+          }
+        }
+        return e;
+      }
+      function ua(e) {
+        e = e.previousSibling;
+        for (var t = 0; e; ) {
+          if (8 === e.nodeType) {
+            var n = e.data;
+            if ('$' === n || '$!' === n || '$?' === n) {
+              if (0 === t) return e;
+              t--;
+            } else '/$' === n && t++;
+          }
+          e = e.previousSibling;
+        }
+        return null;
+      }
+      var da = Math.random().toString(36).slice(2),
+        pa = '__reactFiber$' + da,
+        fa = '__reactProps$' + da,
+        ma = '__reactContainer$' + da,
+        ha = '__reactEvents$' + da,
+        ga = '__reactListeners$' + da,
+        ya = '__reactHandles$' + da;
+      function ba(e) {
+        var t = e[pa];
+        if (t) return t;
+        for (var n = e.parentNode; n; ) {
+          if ((t = n[ma] || n[pa])) {
+            if (((n = t.alternate), null !== t.child || (null !== n && null !== n.child)))
+              for (e = ua(e); null !== e; ) {
+                if ((n = e[pa])) return n;
+                e = ua(e);
+              }
+            return t;
+          }
+          n = (e = n).parentNode;
+        }
+        return null;
+      }
+      function va(e) {
+        return !(e = e[pa] || e[ma]) || (5 !== e.tag && 6 !== e.tag && 13 !== e.tag && 3 !== e.tag) ? null : e;
+      }
+      function wa(e) {
+        if (5 === e.tag || 6 === e.tag) return e.stateNode;
+        throw Error(o(33));
+      }
+      function ka(e) {
+        return e[fa] || null;
+      }
+      var Sa = [],
+        xa = -1;
+      function Ea(e) {
+        return { current: e };
+      }
+      function Ca(e) {
+        0 > xa || ((e.current = Sa[xa]), (Sa[xa] = null), xa--);
+      }
+      function _a(e, t) {
+        xa++, (Sa[xa] = e.current), (e.current = t);
+      }
+      var Pa = {},
+        Ta = Ea(Pa),
+        Aa = Ea(!1),
+        La = Pa;
+      function ja(e, t) {
+        var n = e.type.contextTypes;
+        if (!n) return Pa;
+        var r = e.stateNode;
+        if (r && r.__reactInternalMemoizedUnmaskedChildContext === t) return r.__reactInternalMemoizedMaskedChildContext;
+        var a,
+          o = {};
+        for (a in n) o[a] = t[a];
+        return (
+          r &&
+            (((e = e.stateNode).__reactInternalMemoizedUnmaskedChildContext = t),
+            (e.__reactInternalMemoizedMaskedChildContext = o)),
+          o
+        );
+      }
+      function Ra(e) {
+        return null != (e = e.childContextTypes);
+      }
+      function Ia() {
+        Ca(Aa), Ca(Ta);
+      }
+      function Na(e, t, n) {
+        if (Ta.current !== Pa) throw Error(o(168));
+        _a(Ta, t), _a(Aa, n);
+      }
+      function Oa(e, t, n) {
+        var r = e.stateNode;
+        if (((t = t.childContextTypes), 'function' != typeof r.getChildContext)) return n;
+        for (var a in (r = r.getChildContext())) if (!(a in t)) throw Error(o(108, H(e) || 'Unknown', a));
+        return F({}, n, r);
+      }
+      function Da(e) {
+        return (
+          (e = ((e = e.stateNode) && e.__reactInternalMemoizedMergedChildContext) || Pa),
+          (La = Ta.current),
+          _a(Ta, e),
+          _a(Aa, Aa.current),
+          !0
+        );
+      }
+      function Fa(e, t, n) {
+        var r = e.stateNode;
+        if (!r) throw Error(o(169));
+        n ? ((e = Oa(e, t, La)), (r.__reactInternalMemoizedMergedChildContext = e), Ca(Aa), Ca(Ta), _a(Ta, e)) : Ca(Aa),
+          _a(Aa, n);
+      }
+      var Ma = null,
+        Ba = !1,
+        za = !1;
+      function $a(e) {
+        null === Ma ? (Ma = [e]) : Ma.push(e);
+      }
+      function Ua() {
+        if (!za && null !== Ma) {
+          za = !0;
+          var e = 0,
+            t = vt;
+          try {
+            var n = Ma;
+            for (vt = 1; e < n.length; e++) {
+              var r = n[e];
+              do {
+                r = r(!0);
+              } while (null !== r);
+            }
+            (Ma = null), (Ba = !1);
+          } catch (a) {
+            throw (null !== Ma && (Ma = Ma.slice(e + 1)), We(Je, Ua), a);
+          } finally {
+            (vt = t), (za = !1);
+          }
+        }
+        return null;
+      }
+      var Ha = [],
+        qa = 0,
+        Za = null,
+        Ga = 0,
+        Wa = [],
+        Va = 0,
+        Qa = null,
+        Ka = 1,
+        Ya = '';
+      function Xa(e, t) {
+        (Ha[qa++] = Ga), (Ha[qa++] = Za), (Za = e), (Ga = t);
+      }
+      function Ja(e, t, n) {
+        (Wa[Va++] = Ka), (Wa[Va++] = Ya), (Wa[Va++] = Qa), (Qa = e);
+        var r = Ka;
+        e = Ya;
+        var a = 32 - it(r) - 1;
+        (r &= ~(1 << a)), (n += 1);
+        var o = 32 - it(t) + a;
+        if (30 < o) {
+          var i = a - (a % 5);
+          (o = (r & ((1 << i) - 1)).toString(32)),
+            (r >>= i),
+            (a -= i),
+            (Ka = (1 << (32 - it(t) + a)) | (n << a) | r),
+            (Ya = o + e);
+        } else (Ka = (1 << o) | (n << a) | r), (Ya = e);
+      }
+      function eo(e) {
+        null !== e.return && (Xa(e, 1), Ja(e, 1, 0));
+      }
+      function to(e) {
+        for (; e === Za; ) (Za = Ha[--qa]), (Ha[qa] = null), (Ga = Ha[--qa]), (Ha[qa] = null);
+        for (; e === Qa; ) (Qa = Wa[--Va]), (Wa[Va] = null), (Ya = Wa[--Va]), (Wa[Va] = null), (Ka = Wa[--Va]), (Wa[Va] = null);
+      }
+      var no = null,
+        ro = null,
+        ao = !1,
+        oo = null;
+      function io(e, t) {
+        var n = Rc(5, null, null, 0);
+        (n.elementType = 'DELETED'),
+          (n.stateNode = t),
+          (n.return = e),
+          null === (t = e.deletions) ? ((e.deletions = [n]), (e.flags |= 16)) : t.push(n);
+      }
+      function lo(e, t) {
+        switch (e.tag) {
+          case 5:
+            var n = e.type;
+            return (
+              null !== (t = 1 !== t.nodeType || n.toLowerCase() !== t.nodeName.toLowerCase() ? null : t) &&
+              ((e.stateNode = t), (no = e), (ro = ca(t.firstChild)), !0)
+            );
+          case 6:
+            return (
+              null !== (t = '' === e.pendingProps || 3 !== t.nodeType ? null : t) &&
+              ((e.stateNode = t), (no = e), (ro = null), !0)
+            );
+          case 13:
+            return (
+              null !== (t = 8 !== t.nodeType ? null : t) &&
+              ((n = null !== Qa ? { id: Ka, overflow: Ya } : null),
+              (e.memoizedState = { dehydrated: t, treeContext: n, retryLane: 1073741824 }),
+              ((n = Rc(18, null, null, 0)).stateNode = t),
+              (n.return = e),
+              (e.child = n),
+              (no = e),
+              (ro = null),
+              !0)
+            );
+          default:
+            return !1;
+        }
+      }
+      function so(e) {
+        return 0 != (1 & e.mode) && 0 == (128 & e.flags);
+      }
+      function co(e) {
+        if (ao) {
+          var t = ro;
+          if (t) {
+            var n = t;
+            if (!lo(e, t)) {
+              if (so(e)) throw Error(o(418));
+              t = ca(n.nextSibling);
+              var r = no;
+              t && lo(e, t) ? io(r, n) : ((e.flags = (-4097 & e.flags) | 2), (ao = !1), (no = e));
+            }
+          } else {
+            if (so(e)) throw Error(o(418));
+            (e.flags = (-4097 & e.flags) | 2), (ao = !1), (no = e);
+          }
+        }
+      }
+      function uo(e) {
+        for (e = e.return; null !== e && 5 !== e.tag && 3 !== e.tag && 13 !== e.tag; ) e = e.return;
+        no = e;
+      }
+      function po(e) {
+        if (e !== no) return !1;
+        if (!ao) return uo(e), (ao = !0), !1;
+        var t;
+        if (
+          ((t = 3 !== e.tag) &&
+            !(t = 5 !== e.tag) &&
+            (t = 'head' !== (t = e.type) && 'body' !== t && !na(e.type, e.memoizedProps)),
+          t && (t = ro))
+        ) {
+          if (so(e)) throw (fo(), Error(o(418)));
+          for (; t; ) io(e, t), (t = ca(t.nextSibling));
+        }
+        if ((uo(e), 13 === e.tag)) {
+          if (!(e = null !== (e = e.memoizedState) ? e.dehydrated : null)) throw Error(o(317));
+          e: {
+            for (e = e.nextSibling, t = 0; e; ) {
+              if (8 === e.nodeType) {
+                var n = e.data;
+                if ('/$' === n) {
+                  if (0 === t) {
+                    ro = ca(e.nextSibling);
+                    break e;
+                  }
+                  t--;
+                } else ('$' !== n && '$!' !== n && '$?' !== n) || t++;
+              }
+              e = e.nextSibling;
+            }
+            ro = null;
+          }
+        } else ro = no ? ca(e.stateNode.nextSibling) : null;
+        return !0;
+      }
+      function fo() {
+        for (var e = ro; e; ) e = ca(e.nextSibling);
+      }
+      function mo() {
+        (ro = no = null), (ao = !1);
+      }
+      function ho(e) {
+        null === oo ? (oo = [e]) : oo.push(e);
+      }
+      var go = w.ReactCurrentBatchConfig;
+      function yo(e, t) {
+        if (e && e.defaultProps) {
+          for (var n in ((t = F({}, t)), (e = e.defaultProps))) void 0 === t[n] && (t[n] = e[n]);
+          return t;
+        }
+        return t;
+      }
+      var bo = Ea(null),
+        vo = null,
+        wo = null,
+        ko = null;
+      function So() {
+        ko = wo = vo = null;
+      }
+      function xo(e) {
+        var t = bo.current;
+        Ca(bo), (e._currentValue = t);
+      }
+      function Eo(e, t, n) {
+        for (; null !== e; ) {
+          var r = e.alternate;
+          if (
+            ((e.childLanes & t) !== t
+              ? ((e.childLanes |= t), null !== r && (r.childLanes |= t))
+              : null !== r && (r.childLanes & t) !== t && (r.childLanes |= t),
+            e === n)
+          )
+            break;
+          e = e.return;
+        }
+      }
+      function Co(e, t) {
+        (vo = e),
+          (ko = wo = null),
+          null !== (e = e.dependencies) && null !== e.firstContext && (0 != (e.lanes & t) && (wl = !0), (e.firstContext = null));
+      }
+      function _o(e) {
+        var t = e._currentValue;
+        if (ko !== e)
+          if (((e = { context: e, memoizedValue: t, next: null }), null === wo)) {
+            if (null === vo) throw Error(o(308));
+            (wo = e), (vo.dependencies = { lanes: 0, firstContext: e });
+          } else wo = wo.next = e;
+        return t;
+      }
+      var Po = null;
+      function To(e) {
+        null === Po ? (Po = [e]) : Po.push(e);
+      }
+      function Ao(e, t, n, r) {
+        var a = t.interleaved;
+        return null === a ? ((n.next = n), To(t)) : ((n.next = a.next), (a.next = n)), (t.interleaved = n), Lo(e, r);
+      }
+      function Lo(e, t) {
+        e.lanes |= t;
+        var n = e.alternate;
+        for (null !== n && (n.lanes |= t), n = e, e = e.return; null !== e; )
+          (e.childLanes |= t), null !== (n = e.alternate) && (n.childLanes |= t), (n = e), (e = e.return);
+        return 3 === n.tag ? n.stateNode : null;
+      }
+      var jo = !1;
+      function Ro(e) {
+        e.updateQueue = {
+          baseState: e.memoizedState,
+          firstBaseUpdate: null,
+          lastBaseUpdate: null,
+          shared: { pending: null, interleaved: null, lanes: 0 },
+          effects: null,
+        };
+      }
+      function Io(e, t) {
+        (e = e.updateQueue),
+          t.updateQueue === e &&
+            (t.updateQueue = {
+              baseState: e.baseState,
+              firstBaseUpdate: e.firstBaseUpdate,
+              lastBaseUpdate: e.lastBaseUpdate,
+              shared: e.shared,
+              effects: e.effects,
+            });
+      }
+      function No(e, t) {
+        return { eventTime: e, lane: t, tag: 0, payload: null, callback: null, next: null };
+      }
+      function Oo(e, t, n) {
+        var r = e.updateQueue;
+        if (null === r) return null;
+        if (((r = r.shared), 0 != (2 & As))) {
+          var a = r.pending;
+          return null === a ? (t.next = t) : ((t.next = a.next), (a.next = t)), (r.pending = t), Lo(e, n);
+        }
+        return (
+          null === (a = r.interleaved) ? ((t.next = t), To(r)) : ((t.next = a.next), (a.next = t)), (r.interleaved = t), Lo(e, n)
+        );
+      }
+      function Do(e, t, n) {
+        if (null !== (t = t.updateQueue) && ((t = t.shared), 0 != (4194240 & n))) {
+          var r = t.lanes;
+          (n |= r &= e.pendingLanes), (t.lanes = n), bt(e, n);
+        }
+      }
+      function Fo(e, t) {
+        var n = e.updateQueue,
+          r = e.alternate;
+        if (null !== r && n === (r = r.updateQueue)) {
+          var a = null,
+            o = null;
+          if (null !== (n = n.firstBaseUpdate)) {
+            do {
+              var i = { eventTime: n.eventTime, lane: n.lane, tag: n.tag, payload: n.payload, callback: n.callback, next: null };
+              null === o ? (a = o = i) : (o = o.next = i), (n = n.next);
+            } while (null !== n);
+            null === o ? (a = o = t) : (o = o.next = t);
+          } else a = o = t;
+          return (
+            (n = { baseState: r.baseState, firstBaseUpdate: a, lastBaseUpdate: o, shared: r.shared, effects: r.effects }),
+            void (e.updateQueue = n)
+          );
+        }
+        null === (e = n.lastBaseUpdate) ? (n.firstBaseUpdate = t) : (e.next = t), (n.lastBaseUpdate = t);
+      }
+      function Mo(e, t, n, r) {
+        var a = e.updateQueue;
+        jo = !1;
+        var o = a.firstBaseUpdate,
+          i = a.lastBaseUpdate,
+          l = a.shared.pending;
+        if (null !== l) {
+          a.shared.pending = null;
+          var s = l,
+            c = s.next;
+          (s.next = null), null === i ? (o = c) : (i.next = c), (i = s);
+          var u = e.alternate;
+          null !== u &&
+            (l = (u = u.updateQueue).lastBaseUpdate) !== i &&
+            (null === l ? (u.firstBaseUpdate = c) : (l.next = c), (u.lastBaseUpdate = s));
+        }
+        if (null !== o) {
+          var d = a.baseState;
+          for (i = 0, u = c = s = null, l = o; ; ) {
+            var p = l.lane,
+              f = l.eventTime;
+            if ((r & p) === p) {
+              null !== u &&
+                (u = u.next = { eventTime: f, lane: 0, tag: l.tag, payload: l.payload, callback: l.callback, next: null });
+              e: {
+                var m = e,
+                  h = l;
+                switch (((p = t), (f = n), h.tag)) {
+                  case 1:
+                    if ('function' == typeof (m = h.payload)) {
+                      d = m.call(f, d, p);
+                      break e;
+                    }
+                    d = m;
+                    break e;
+                  case 3:
+                    m.flags = (-65537 & m.flags) | 128;
+                  case 0:
+                    if (null == (p = 'function' == typeof (m = h.payload) ? m.call(f, d, p) : m)) break e;
+                    d = F({}, d, p);
+                    break e;
+                  case 2:
+                    jo = !0;
+                }
+              }
+              null !== l.callback && 0 !== l.lane && ((e.flags |= 64), null === (p = a.effects) ? (a.effects = [l]) : p.push(l));
+            } else
+              (f = { eventTime: f, lane: p, tag: l.tag, payload: l.payload, callback: l.callback, next: null }),
+                null === u ? ((c = u = f), (s = d)) : (u = u.next = f),
+                (i |= p);
+            if (null === (l = l.next)) {
+              if (null === (l = a.shared.pending)) break;
+              (l = (p = l).next), (p.next = null), (a.lastBaseUpdate = p), (a.shared.pending = null);
+            }
+          }
+          if (
+            (null === u && (s = d),
+            (a.baseState = s),
+            (a.firstBaseUpdate = c),
+            (a.lastBaseUpdate = u),
+            null !== (t = a.shared.interleaved))
+          ) {
+            a = t;
+            do {
+              (i |= a.lane), (a = a.next);
+            } while (a !== t);
+          } else null === o && (a.shared.lanes = 0);
+          (Fs |= i), (e.lanes = i), (e.memoizedState = d);
+        }
+      }
+      function Bo(e, t, n) {
+        if (((e = t.effects), (t.effects = null), null !== e))
+          for (t = 0; t < e.length; t++) {
+            var r = e[t],
+              a = r.callback;
+            if (null !== a) {
+              if (((r.callback = null), (r = n), 'function' != typeof a)) throw Error(o(191, a));
+              a.call(r);
+            }
+          }
+      }
+      var zo = new r.Component().refs;
+      function $o(e, t, n, r) {
+        (n = null == (n = n(r, (t = e.memoizedState))) ? t : F({}, t, n)),
+          (e.memoizedState = n),
+          0 === e.lanes && (e.updateQueue.baseState = n);
+      }
+      var Uo = {
+        isMounted: function (e) {
+          return !!(e = e._reactInternals) && Ue(e) === e;
+        },
+        enqueueSetState: function (e, t, n) {
+          e = e._reactInternals;
+          var r = tc(),
+            a = nc(e),
+            o = No(r, a);
+          (o.payload = t), null != n && (o.callback = n), null !== (t = Oo(e, o, a)) && (rc(t, e, a, r), Do(t, e, a));
+        },
+        enqueueReplaceState: function (e, t, n) {
+          e = e._reactInternals;
+          var r = tc(),
+            a = nc(e),
+            o = No(r, a);
+          (o.tag = 1),
+            (o.payload = t),
+            null != n && (o.callback = n),
+            null !== (t = Oo(e, o, a)) && (rc(t, e, a, r), Do(t, e, a));
+        },
+        enqueueForceUpdate: function (e, t) {
+          e = e._reactInternals;
+          var n = tc(),
+            r = nc(e),
+            a = No(n, r);
+          (a.tag = 2), null != t && (a.callback = t), null !== (t = Oo(e, a, r)) && (rc(t, e, r, n), Do(t, e, r));
+        },
+      };
+      function Ho(e, t, n, r, a, o, i) {
+        return 'function' == typeof (e = e.stateNode).shouldComponentUpdate
+          ? e.shouldComponentUpdate(r, o, i)
+          : !t.prototype || !t.prototype.isPureReactComponent || !sr(n, r) || !sr(a, o);
+      }
+      function qo(e, t, n) {
+        var r = !1,
+          a = Pa,
+          o = t.contextType;
+        return (
+          'object' == typeof o && null !== o
+            ? (o = _o(o))
+            : ((a = Ra(t) ? La : Ta.current), (o = (r = null != (r = t.contextTypes)) ? ja(e, a) : Pa)),
+          (t = new t(n, o)),
+          (e.memoizedState = null !== t.state && void 0 !== t.state ? t.state : null),
+          (t.updater = Uo),
+          (e.stateNode = t),
+          (t._reactInternals = e),
+          r &&
+            (((e = e.stateNode).__reactInternalMemoizedUnmaskedChildContext = a),
+            (e.__reactInternalMemoizedMaskedChildContext = o)),
+          t
+        );
+      }
+      function Zo(e, t, n, r) {
+        (e = t.state),
+          'function' == typeof t.componentWillReceiveProps && t.componentWillReceiveProps(n, r),
+          'function' == typeof t.UNSAFE_componentWillReceiveProps && t.UNSAFE_componentWillReceiveProps(n, r),
+          t.state !== e && Uo.enqueueReplaceState(t, t.state, null);
+      }
+      function Go(e, t, n, r) {
+        var a = e.stateNode;
+        (a.props = n), (a.state = e.memoizedState), (a.refs = zo), Ro(e);
+        var o = t.contextType;
+        'object' == typeof o && null !== o ? (a.context = _o(o)) : ((o = Ra(t) ? La : Ta.current), (a.context = ja(e, o))),
+          (a.state = e.memoizedState),
+          'function' == typeof (o = t.getDerivedStateFromProps) && ($o(e, t, o, n), (a.state = e.memoizedState)),
+          'function' == typeof t.getDerivedStateFromProps ||
+            'function' == typeof a.getSnapshotBeforeUpdate ||
+            ('function' != typeof a.UNSAFE_componentWillMount && 'function' != typeof a.componentWillMount) ||
+            ((t = a.state),
+            'function' == typeof a.componentWillMount && a.componentWillMount(),
+            'function' == typeof a.UNSAFE_componentWillMount && a.UNSAFE_componentWillMount(),
+            t !== a.state && Uo.enqueueReplaceState(a, a.state, null),
+            Mo(e, n, a, r),
+            (a.state = e.memoizedState)),
+          'function' == typeof a.componentDidMount && (e.flags |= 4194308);
+      }
+      function Wo(e, t, n) {
+        if (null !== (e = n.ref) && 'function' != typeof e && 'object' != typeof e) {
+          if (n._owner) {
+            if ((n = n._owner)) {
+              if (1 !== n.tag) throw Error(o(309));
+              var r = n.stateNode;
+            }
+            if (!r) throw Error(o(147, e));
+            var a = r,
+              i = '' + e;
+            return null !== t && null !== t.ref && 'function' == typeof t.ref && t.ref._stringRef === i
+              ? t.ref
+              : ((t = function (e) {
+                  var t = a.refs;
+                  t === zo && (t = a.refs = {}), null === e ? delete t[i] : (t[i] = e);
+                }),
+                (t._stringRef = i),
+                t);
+          }
+          if ('string' != typeof e) throw Error(o(284));
+          if (!n._owner) throw Error(o(290, e));
+        }
+        return e;
+      }
+      function Vo(e, t) {
+        throw (
+          ((e = Object.prototype.toString.call(t)),
+          Error(o(31, '[object Object]' === e ? 'object with keys {' + Object.keys(t).join(', ') + '}' : e)))
+        );
+      }
+      function Qo(e) {
+        return (0, e._init)(e._payload);
+      }
+      function Ko(e) {
+        function t(t, n) {
+          if (e) {
+            var r = t.deletions;
+            null === r ? ((t.deletions = [n]), (t.flags |= 16)) : r.push(n);
+          }
+        }
+        function n(n, r) {
+          if (!e) return null;
+          for (; null !== r; ) t(n, r), (r = r.sibling);
+          return null;
+        }
+        function r(e, t) {
+          for (e = new Map(); null !== t; ) null !== t.key ? e.set(t.key, t) : e.set(t.index, t), (t = t.sibling);
+          return e;
+        }
+        function a(e, t) {
+          return ((e = Nc(e, t)).index = 0), (e.sibling = null), e;
+        }
+        function i(t, n, r) {
+          return (
+            (t.index = r),
+            e
+              ? null !== (r = t.alternate)
+                ? (r = r.index) < n
+                  ? ((t.flags |= 2), n)
+                  : r
+                : ((t.flags |= 2), n)
+              : ((t.flags |= 1048576), n)
+          );
+        }
+        function l(t) {
+          return e && null === t.alternate && (t.flags |= 2), t;
+        }
+        function s(e, t, n, r) {
+          return null === t || 6 !== t.tag ? (((t = Mc(n, e.mode, r)).return = e), t) : (((t = a(t, n)).return = e), t);
+        }
+        function c(e, t, n, r) {
+          var o = n.type;
+          return o === x
+            ? d(e, t, n.props.children, r, n.key)
+            : null !== t && (t.elementType === o || ('object' == typeof o && null !== o && o.$$typeof === R && Qo(o) === t.type))
+              ? (((r = a(t, n.props)).ref = Wo(e, t, n)), (r.return = e), r)
+              : (((r = Oc(n.type, n.key, n.props, null, e.mode, r)).ref = Wo(e, t, n)), (r.return = e), r);
+        }
+        function u(e, t, n, r) {
+          return null === t ||
+            4 !== t.tag ||
+            t.stateNode.containerInfo !== n.containerInfo ||
+            t.stateNode.implementation !== n.implementation
+            ? (((t = Bc(n, e.mode, r)).return = e), t)
+            : (((t = a(t, n.children || [])).return = e), t);
+        }
+        function d(e, t, n, r, o) {
+          return null === t || 7 !== t.tag ? (((t = Dc(n, e.mode, r, o)).return = e), t) : (((t = a(t, n)).return = e), t);
+        }
+        function p(e, t, n) {
+          if (('string' == typeof t && '' !== t) || 'number' == typeof t) return ((t = Mc('' + t, e.mode, n)).return = e), t;
+          if ('object' == typeof t && null !== t) {
+            switch (t.$$typeof) {
+              case k:
+                return ((n = Oc(t.type, t.key, t.props, null, e.mode, n)).ref = Wo(e, null, t)), (n.return = e), n;
+              case S:
+                return ((t = Bc(t, e.mode, n)).return = e), t;
+              case R:
+                return p(e, (0, t._init)(t._payload), n);
+            }
+            if (te(t) || O(t)) return ((t = Dc(t, e.mode, n, null)).return = e), t;
+            Vo(e, t);
+          }
+          return null;
+        }
+        function f(e, t, n, r) {
+          var a = null !== t ? t.key : null;
+          if (('string' == typeof n && '' !== n) || 'number' == typeof n) return null !== a ? null : s(e, t, '' + n, r);
+          if ('object' == typeof n && null !== n) {
+            switch (n.$$typeof) {
+              case k:
+                return n.key === a ? c(e, t, n, r) : null;
+              case S:
+                return n.key === a ? u(e, t, n, r) : null;
+              case R:
+                return f(e, t, (a = n._init)(n._payload), r);
+            }
+            if (te(n) || O(n)) return null !== a ? null : d(e, t, n, r, null);
+            Vo(e, n);
+          }
+          return null;
+        }
+        function m(e, t, n, r, a) {
+          if (('string' == typeof r && '' !== r) || 'number' == typeof r) return s(t, (e = e.get(n) || null), '' + r, a);
+          if ('object' == typeof r && null !== r) {
+            switch (r.$$typeof) {
+              case k:
+                return c(t, (e = e.get(null === r.key ? n : r.key) || null), r, a);
+              case S:
+                return u(t, (e = e.get(null === r.key ? n : r.key) || null), r, a);
+              case R:
+                return m(e, t, n, (0, r._init)(r._payload), a);
+            }
+            if (te(r) || O(r)) return d(t, (e = e.get(n) || null), r, a, null);
+            Vo(t, r);
+          }
+          return null;
+        }
+        function h(a, o, l, s) {
+          for (var c = null, u = null, d = o, h = (o = 0), g = null; null !== d && h < l.length; h++) {
+            d.index > h ? ((g = d), (d = null)) : (g = d.sibling);
+            var y = f(a, d, l[h], s);
+            if (null === y) {
+              null === d && (d = g);
+              break;
+            }
+            e && d && null === y.alternate && t(a, d), (o = i(y, o, h)), null === u ? (c = y) : (u.sibling = y), (u = y), (d = g);
+          }
+          if (h === l.length) return n(a, d), ao && Xa(a, h), c;
+          if (null === d) {
+            for (; h < l.length; h++)
+              null !== (d = p(a, l[h], s)) && ((o = i(d, o, h)), null === u ? (c = d) : (u.sibling = d), (u = d));
+            return ao && Xa(a, h), c;
+          }
+          for (d = r(a, d); h < l.length; h++)
+            null !== (g = m(d, a, h, l[h], s)) &&
+              (e && null !== g.alternate && d.delete(null === g.key ? h : g.key),
+              (o = i(g, o, h)),
+              null === u ? (c = g) : (u.sibling = g),
+              (u = g));
+          return (
+            e &&
+              d.forEach(function (e) {
+                return t(a, e);
+              }),
+            ao && Xa(a, h),
+            c
+          );
+        }
+        function g(a, l, s, c) {
+          var u = O(s);
+          if ('function' != typeof u) throw Error(o(150));
+          if (null == (s = u.call(s))) throw Error(o(151));
+          for (var d = (u = null), h = l, g = (l = 0), y = null, b = s.next(); null !== h && !b.done; g++, b = s.next()) {
+            h.index > g ? ((y = h), (h = null)) : (y = h.sibling);
+            var v = f(a, h, b.value, c);
+            if (null === v) {
+              null === h && (h = y);
+              break;
+            }
+            e && h && null === v.alternate && t(a, h), (l = i(v, l, g)), null === d ? (u = v) : (d.sibling = v), (d = v), (h = y);
+          }
+          if (b.done) return n(a, h), ao && Xa(a, g), u;
+          if (null === h) {
+            for (; !b.done; g++, b = s.next())
+              null !== (b = p(a, b.value, c)) && ((l = i(b, l, g)), null === d ? (u = b) : (d.sibling = b), (d = b));
+            return ao && Xa(a, g), u;
+          }
+          for (h = r(a, h); !b.done; g++, b = s.next())
+            null !== (b = m(h, a, g, b.value, c)) &&
+              (e && null !== b.alternate && h.delete(null === b.key ? g : b.key),
+              (l = i(b, l, g)),
+              null === d ? (u = b) : (d.sibling = b),
+              (d = b));
+          return (
+            e &&
+              h.forEach(function (e) {
+                return t(a, e);
+              }),
+            ao && Xa(a, g),
+            u
+          );
+        }
+        return function e(r, o, i, s) {
+          if (
+            ('object' == typeof i && null !== i && i.type === x && null === i.key && (i = i.props.children),
+            'object' == typeof i && null !== i)
+          ) {
+            switch (i.$$typeof) {
+              case k:
+                e: {
+                  for (var c = i.key, u = o; null !== u; ) {
+                    if (u.key === c) {
+                      if ((c = i.type) === x) {
+                        if (7 === u.tag) {
+                          n(r, u.sibling), ((o = a(u, i.props.children)).return = r), (r = o);
+                          break e;
+                        }
+                      } else if (
+                        u.elementType === c ||
+                        ('object' == typeof c && null !== c && c.$$typeof === R && Qo(c) === u.type)
+                      ) {
+                        n(r, u.sibling), ((o = a(u, i.props)).ref = Wo(r, u, i)), (o.return = r), (r = o);
+                        break e;
+                      }
+                      n(r, u);
+                      break;
+                    }
+                    t(r, u), (u = u.sibling);
+                  }
+                  i.type === x
+                    ? (((o = Dc(i.props.children, r.mode, s, i.key)).return = r), (r = o))
+                    : (((s = Oc(i.type, i.key, i.props, null, r.mode, s)).ref = Wo(r, o, i)), (s.return = r), (r = s));
+                }
+                return l(r);
+              case S:
+                e: {
+                  for (u = i.key; null !== o; ) {
+                    if (o.key === u) {
+                      if (
+                        4 === o.tag &&
+                        o.stateNode.containerInfo === i.containerInfo &&
+                        o.stateNode.implementation === i.implementation
+                      ) {
+                        n(r, o.sibling), ((o = a(o, i.children || [])).return = r), (r = o);
+                        break e;
+                      }
+                      n(r, o);
+                      break;
+                    }
+                    t(r, o), (o = o.sibling);
+                  }
+                  ((o = Bc(i, r.mode, s)).return = r), (r = o);
+                }
+                return l(r);
+              case R:
+                return e(r, o, (u = i._init)(i._payload), s);
+            }
+            if (te(i)) return h(r, o, i, s);
+            if (O(i)) return g(r, o, i, s);
+            Vo(r, i);
+          }
+          return ('string' == typeof i && '' !== i) || 'number' == typeof i
+            ? ((i = '' + i),
+              null !== o && 6 === o.tag
+                ? (n(r, o.sibling), ((o = a(o, i)).return = r), (r = o))
+                : (n(r, o), ((o = Mc(i, r.mode, s)).return = r), (r = o)),
+              l(r))
+            : n(r, o);
+        };
+      }
+      var Yo = Ko(!0),
+        Xo = Ko(!1),
+        Jo = {},
+        ei = Ea(Jo),
+        ti = Ea(Jo),
+        ni = Ea(Jo);
+      function ri(e) {
+        if (e === Jo) throw Error(o(174));
+        return e;
+      }
+      function ai(e, t) {
+        switch ((_a(ni, t), _a(ti, e), _a(ei, Jo), (e = t.nodeType))) {
+          case 9:
+          case 11:
+            t = (t = t.documentElement) ? t.namespaceURI : se(null, '');
+            break;
+          default:
+            t = se((t = (e = 8 === e ? t.parentNode : t).namespaceURI || null), (e = e.tagName));
+        }
+        Ca(ei), _a(ei, t);
+      }
+      function oi() {
+        Ca(ei), Ca(ti), Ca(ni);
+      }
+      function ii(e) {
+        ri(ni.current);
+        var t = ri(ei.current),
+          n = se(t, e.type);
+        t !== n && (_a(ti, e), _a(ei, n));
+      }
+      function li(e) {
+        ti.current === e && (Ca(ei), Ca(ti));
+      }
+      var si = Ea(0);
+      function ci(e) {
+        for (var t = e; null !== t; ) {
+          if (13 === t.tag) {
+            var n = t.memoizedState;
+            if (null !== n && (null === (n = n.dehydrated) || '$?' === n.data || '$!' === n.data)) return t;
+          } else if (19 === t.tag && void 0 !== t.memoizedProps.revealOrder) {
+            if (0 != (128 & t.flags)) return t;
+          } else if (null !== t.child) {
+            (t.child.return = t), (t = t.child);
+            continue;
+          }
+          if (t === e) break;
+          for (; null === t.sibling; ) {
+            if (null === t.return || t.return === e) return null;
+            t = t.return;
+          }
+          (t.sibling.return = t.return), (t = t.sibling);
+        }
+        return null;
+      }
+      var ui = [];
+      function di() {
+        for (var e = 0; e < ui.length; e++) ui[e]._workInProgressVersionPrimary = null;
+        ui.length = 0;
+      }
+      var pi = w.ReactCurrentDispatcher,
+        fi = w.ReactCurrentBatchConfig,
+        mi = 0,
+        hi = null,
+        gi = null,
+        yi = null,
+        bi = !1,
+        vi = !1,
+        wi = 0,
+        ki = 0;
+      function Si() {
+        throw Error(o(321));
+      }
+      function xi(e, t) {
+        if (null === t) return !1;
+        for (var n = 0; n < t.length && n < e.length; n++) if (!lr(e[n], t[n])) return !1;
+        return !0;
+      }
+      function Ei(e, t, n, r, a, i) {
+        if (
+          ((mi = i),
+          (hi = t),
+          (t.memoizedState = null),
+          (t.updateQueue = null),
+          (t.lanes = 0),
+          (pi.current = null === e || null === e.memoizedState ? ll : sl),
+          (e = n(r, a)),
+          vi)
+        ) {
+          i = 0;
+          do {
+            if (((vi = !1), (wi = 0), 25 <= i)) throw Error(o(301));
+            (i += 1), (yi = gi = null), (t.updateQueue = null), (pi.current = cl), (e = n(r, a));
+          } while (vi);
+        }
+        if (((pi.current = il), (t = null !== gi && null !== gi.next), (mi = 0), (yi = gi = hi = null), (bi = !1), t))
+          throw Error(o(300));
+        return e;
+      }
+      function Ci() {
+        var e = 0 !== wi;
+        return (wi = 0), e;
+      }
+      function _i() {
+        var e = { memoizedState: null, baseState: null, baseQueue: null, queue: null, next: null };
+        return null === yi ? (hi.memoizedState = yi = e) : (yi = yi.next = e), yi;
+      }
+      function Pi() {
+        if (null === gi) {
+          var e = hi.alternate;
+          e = null !== e ? e.memoizedState : null;
+        } else e = gi.next;
+        var t = null === yi ? hi.memoizedState : yi.next;
+        if (null !== t) (yi = t), (gi = e);
+        else {
+          if (null === e) throw Error(o(310));
+          (e = {
+            memoizedState: (gi = e).memoizedState,
+            baseState: gi.baseState,
+            baseQueue: gi.baseQueue,
+            queue: gi.queue,
+            next: null,
+          }),
+            null === yi ? (hi.memoizedState = yi = e) : (yi = yi.next = e);
+        }
+        return yi;
+      }
+      function Ti(e, t) {
+        return 'function' == typeof t ? t(e) : t;
+      }
+      function Ai(e) {
+        var t = Pi(),
+          n = t.queue;
+        if (null === n) throw Error(o(311));
+        n.lastRenderedReducer = e;
+        var r = gi,
+          a = r.baseQueue,
+          i = n.pending;
+        if (null !== i) {
+          if (null !== a) {
+            var l = a.next;
+            (a.next = i.next), (i.next = l);
+          }
+          (r.baseQueue = a = i), (n.pending = null);
+        }
+        if (null !== a) {
+          (i = a.next), (r = r.baseState);
+          var s = (l = null),
+            c = null,
+            u = i;
+          do {
+            var d = u.lane;
+            if ((mi & d) === d)
+              null !== c &&
+                (c = c.next =
+                  { lane: 0, action: u.action, hasEagerState: u.hasEagerState, eagerState: u.eagerState, next: null }),
+                (r = u.hasEagerState ? u.eagerState : e(r, u.action));
+            else {
+              var p = { lane: d, action: u.action, hasEagerState: u.hasEagerState, eagerState: u.eagerState, next: null };
+              null === c ? ((s = c = p), (l = r)) : (c = c.next = p), (hi.lanes |= d), (Fs |= d);
+            }
+            u = u.next;
+          } while (null !== u && u !== i);
+          null === c ? (l = r) : (c.next = s),
+            lr(r, t.memoizedState) || (wl = !0),
+            (t.memoizedState = r),
+            (t.baseState = l),
+            (t.baseQueue = c),
+            (n.lastRenderedState = r);
+        }
+        if (null !== (e = n.interleaved)) {
+          a = e;
+          do {
+            (i = a.lane), (hi.lanes |= i), (Fs |= i), (a = a.next);
+          } while (a !== e);
+        } else null === a && (n.lanes = 0);
+        return [t.memoizedState, n.dispatch];
+      }
+      function Li(e) {
+        var t = Pi(),
+          n = t.queue;
+        if (null === n) throw Error(o(311));
+        n.lastRenderedReducer = e;
+        var r = n.dispatch,
+          a = n.pending,
+          i = t.memoizedState;
+        if (null !== a) {
+          n.pending = null;
+          var l = (a = a.next);
+          do {
+            (i = e(i, l.action)), (l = l.next);
+          } while (l !== a);
+          lr(i, t.memoizedState) || (wl = !0),
+            (t.memoizedState = i),
+            null === t.baseQueue && (t.baseState = i),
+            (n.lastRenderedState = i);
+        }
+        return [i, r];
+      }
+      function ji() {}
+      function Ri(e, t) {
+        var n = hi,
+          r = Pi(),
+          a = t(),
+          i = !lr(r.memoizedState, a);
+        if (
+          (i && ((r.memoizedState = a), (wl = !0)),
+          (r = r.queue),
+          qi(Oi.bind(null, n, r, e), [e]),
+          r.getSnapshot !== t || i || (null !== yi && 1 & yi.memoizedState.tag))
+        ) {
+          if (((n.flags |= 2048), Bi(9, Ni.bind(null, n, r, a, t), void 0, null), null === Ls)) throw Error(o(349));
+          0 != (30 & mi) || Ii(n, t, a);
+        }
+        return a;
+      }
+      function Ii(e, t, n) {
+        (e.flags |= 16384),
+          (e = { getSnapshot: t, value: n }),
+          null === (t = hi.updateQueue)
+            ? ((t = { lastEffect: null, stores: null }), (hi.updateQueue = t), (t.stores = [e]))
+            : null === (n = t.stores)
+              ? (t.stores = [e])
+              : n.push(e);
+      }
+      function Ni(e, t, n, r) {
+        (t.value = n), (t.getSnapshot = r), Di(t) && Fi(e);
+      }
+      function Oi(e, t, n) {
+        return n(function () {
+          Di(t) && Fi(e);
+        });
+      }
+      function Di(e) {
+        var t = e.getSnapshot;
+        e = e.value;
+        try {
+          var n = t();
+          return !lr(e, n);
+        } catch (r) {
+          return !0;
+        }
+      }
+      function Fi(e) {
+        var t = Lo(e, 1);
+        null !== t && rc(t, e, 1, -1);
+      }
+      function Mi(e) {
+        var t = _i();
+        return (
+          'function' == typeof e && (e = e()),
+          (t.memoizedState = t.baseState = e),
+          (e = { pending: null, interleaved: null, lanes: 0, dispatch: null, lastRenderedReducer: Ti, lastRenderedState: e }),
+          (t.queue = e),
+          (e = e.dispatch = nl.bind(null, hi, e)),
+          [t.memoizedState, e]
+        );
+      }
+      function Bi(e, t, n, r) {
+        return (
+          (e = { tag: e, create: t, destroy: n, deps: r, next: null }),
+          null === (t = hi.updateQueue)
+            ? ((t = { lastEffect: null, stores: null }), (hi.updateQueue = t), (t.lastEffect = e.next = e))
+            : null === (n = t.lastEffect)
+              ? (t.lastEffect = e.next = e)
+              : ((r = n.next), (n.next = e), (e.next = r), (t.lastEffect = e)),
+          e
+        );
+      }
+      function zi() {
+        return Pi().memoizedState;
+      }
+      function $i(e, t, n, r) {
+        var a = _i();
+        (hi.flags |= e), (a.memoizedState = Bi(1 | t, n, void 0, void 0 === r ? null : r));
+      }
+      function Ui(e, t, n, r) {
+        var a = Pi();
+        r = void 0 === r ? null : r;
+        var o = void 0;
+        if (null !== gi) {
+          var i = gi.memoizedState;
+          if (((o = i.destroy), null !== r && xi(r, i.deps))) return void (a.memoizedState = Bi(t, n, o, r));
+        }
+        (hi.flags |= e), (a.memoizedState = Bi(1 | t, n, o, r));
+      }
+      function Hi(e, t) {
+        return $i(8390656, 8, e, t);
+      }
+      function qi(e, t) {
+        return Ui(2048, 8, e, t);
+      }
+      function Zi(e, t) {
+        return Ui(4, 2, e, t);
+      }
+      function Gi(e, t) {
+        return Ui(4, 4, e, t);
+      }
+      function Wi(e, t) {
+        return 'function' == typeof t
+          ? ((e = e()),
+            t(e),
+            function () {
+              t(null);
+            })
+          : null != t
+            ? ((e = e()),
+              (t.current = e),
+              function () {
+                t.current = null;
+              })
+            : void 0;
+      }
+      function Vi(e, t, n) {
+        return (n = null != n ? n.concat([e]) : null), Ui(4, 4, Wi.bind(null, t, e), n);
+      }
+      function Qi() {}
+      function Ki(e, t) {
+        var n = Pi();
+        t = void 0 === t ? null : t;
+        var r = n.memoizedState;
+        return null !== r && null !== t && xi(t, r[1]) ? r[0] : ((n.memoizedState = [e, t]), e);
+      }
+      function Yi(e, t) {
+        var n = Pi();
+        t = void 0 === t ? null : t;
+        var r = n.memoizedState;
+        return null !== r && null !== t && xi(t, r[1]) ? r[0] : ((e = e()), (n.memoizedState = [e, t]), e);
+      }
+      function Xi(e, t, n) {
+        return 0 == (21 & mi)
+          ? (e.baseState && ((e.baseState = !1), (wl = !0)), (e.memoizedState = n))
+          : (lr(n, t) || ((n = ht()), (hi.lanes |= n), (Fs |= n), (e.baseState = !0)), t);
+      }
+      function Ji(e, t) {
+        var n = vt;
+        (vt = 0 !== n && 4 > n ? n : 4), e(!0);
+        var r = fi.transition;
+        fi.transition = {};
+        try {
+          e(!1), t();
+        } finally {
+          (vt = n), (fi.transition = r);
+        }
+      }
+      function el() {
+        return Pi().memoizedState;
+      }
+      function tl(e, t, n) {
+        var r = nc(e);
+        if (((n = { lane: r, action: n, hasEagerState: !1, eagerState: null, next: null }), rl(e))) al(t, n);
+        else if (null !== (n = Ao(e, t, n, r))) {
+          rc(n, e, r, tc()), ol(n, t, r);
+        }
+      }
+      function nl(e, t, n) {
+        var r = nc(e),
+          a = { lane: r, action: n, hasEagerState: !1, eagerState: null, next: null };
+        if (rl(e)) al(t, a);
+        else {
+          var o = e.alternate;
+          if (0 === e.lanes && (null === o || 0 === o.lanes) && null !== (o = t.lastRenderedReducer))
+            try {
+              var i = t.lastRenderedState,
+                l = o(i, n);
+              if (((a.hasEagerState = !0), (a.eagerState = l), lr(l, i))) {
+                var s = t.interleaved;
+                return null === s ? ((a.next = a), To(t)) : ((a.next = s.next), (s.next = a)), void (t.interleaved = a);
+              }
+            } catch (c) {}
+          null !== (n = Ao(e, t, a, r)) && (rc(n, e, r, (a = tc())), ol(n, t, r));
+        }
+      }
+      function rl(e) {
+        var t = e.alternate;
+        return e === hi || (null !== t && t === hi);
+      }
+      function al(e, t) {
+        vi = bi = !0;
+        var n = e.pending;
+        null === n ? (t.next = t) : ((t.next = n.next), (n.next = t)), (e.pending = t);
+      }
+      function ol(e, t, n) {
+        if (0 != (4194240 & n)) {
+          var r = t.lanes;
+          (n |= r &= e.pendingLanes), (t.lanes = n), bt(e, n);
+        }
+      }
+      var il = {
+          readContext: _o,
+          useCallback: Si,
+          useContext: Si,
+          useEffect: Si,
+          useImperativeHandle: Si,
+          useInsertionEffect: Si,
+          useLayoutEffect: Si,
+          useMemo: Si,
+          useReducer: Si,
+          useRef: Si,
+          useState: Si,
+          useDebugValue: Si,
+          useDeferredValue: Si,
+          useTransition: Si,
+          useMutableSource: Si,
+          useSyncExternalStore: Si,
+          useId: Si,
+          unstable_isNewReconciler: !1,
+        },
+        ll = {
+          readContext: _o,
+          useCallback: function (e, t) {
+            return (_i().memoizedState = [e, void 0 === t ? null : t]), e;
+          },
+          useContext: _o,
+          useEffect: Hi,
+          useImperativeHandle: function (e, t, n) {
+            return (n = null != n ? n.concat([e]) : null), $i(4194308, 4, Wi.bind(null, t, e), n);
+          },
+          useLayoutEffect: function (e, t) {
+            return $i(4194308, 4, e, t);
+          },
+          useInsertionEffect: function (e, t) {
+            return $i(4, 2, e, t);
+          },
+          useMemo: function (e, t) {
+            var n = _i();
+            return (t = void 0 === t ? null : t), (e = e()), (n.memoizedState = [e, t]), e;
+          },
+          useReducer: function (e, t, n) {
+            var r = _i();
+            return (
+              (t = void 0 !== n ? n(t) : t),
+              (r.memoizedState = r.baseState = t),
+              (e = { pending: null, interleaved: null, lanes: 0, dispatch: null, lastRenderedReducer: e, lastRenderedState: t }),
+              (r.queue = e),
+              (e = e.dispatch = tl.bind(null, hi, e)),
+              [r.memoizedState, e]
+            );
+          },
+          useRef: function (e) {
+            return (e = { current: e }), (_i().memoizedState = e);
+          },
+          useState: Mi,
+          useDebugValue: Qi,
+          useDeferredValue: function (e) {
+            return (_i().memoizedState = e);
+          },
+          useTransition: function () {
+            var e = Mi(!1),
+              t = e[0];
+            return (e = Ji.bind(null, e[1])), (_i().memoizedState = e), [t, e];
+          },
+          useMutableSource: function () {},
+          useSyncExternalStore: function (e, t, n) {
+            var r = hi,
+              a = _i();
+            if (ao) {
+              if (void 0 === n) throw Error(o(407));
+              n = n();
+            } else {
+              if (((n = t()), null === Ls)) throw Error(o(349));
+              0 != (30 & mi) || Ii(r, t, n);
+            }
+            a.memoizedState = n;
+            var i = { value: n, getSnapshot: t };
+            return (
+              (a.queue = i), Hi(Oi.bind(null, r, i, e), [e]), (r.flags |= 2048), Bi(9, Ni.bind(null, r, i, n, t), void 0, null), n
+            );
+          },
+          useId: function () {
+            var e = _i(),
+              t = Ls.identifierPrefix;
+            if (ao) {
+              var n = Ya;
+              (t = ':' + t + 'R' + (n = (Ka & ~(1 << (32 - it(Ka) - 1))).toString(32) + n)),
+                0 < (n = wi++) && (t += 'H' + n.toString(32)),
+                (t += ':');
+            } else t = ':' + t + 'r' + (n = ki++).toString(32) + ':';
+            return (e.memoizedState = t);
+          },
+          unstable_isNewReconciler: !1,
+        },
+        sl = {
+          readContext: _o,
+          useCallback: Ki,
+          useContext: _o,
+          useEffect: qi,
+          useImperativeHandle: Vi,
+          useInsertionEffect: Zi,
+          useLayoutEffect: Gi,
+          useMemo: Yi,
+          useReducer: Ai,
+          useRef: zi,
+          useState: function () {
+            return Ai(Ti);
+          },
+          useDebugValue: Qi,
+          useDeferredValue: function (e) {
+            return Xi(Pi(), gi.memoizedState, e);
+          },
+          useTransition: function () {
+            return [Ai(Ti)[0], Pi().memoizedState];
+          },
+          useMutableSource: ji,
+          useSyncExternalStore: Ri,
+          useId: el,
+          unstable_isNewReconciler: !1,
+        },
+        cl = {
+          readContext: _o,
+          useCallback: Ki,
+          useContext: _o,
+          useEffect: qi,
+          useImperativeHandle: Vi,
+          useInsertionEffect: Zi,
+          useLayoutEffect: Gi,
+          useMemo: Yi,
+          useReducer: Li,
+          useRef: zi,
+          useState: function () {
+            return Li(Ti);
+          },
+          useDebugValue: Qi,
+          useDeferredValue: function (e) {
+            var t = Pi();
+            return null === gi ? (t.memoizedState = e) : Xi(t, gi.memoizedState, e);
+          },
+          useTransition: function () {
+            return [Li(Ti)[0], Pi().memoizedState];
+          },
+          useMutableSource: ji,
+          useSyncExternalStore: Ri,
+          useId: el,
+          unstable_isNewReconciler: !1,
+        };
+      function ul(e, t) {
+        try {
+          var n = '',
+            r = t;
+          do {
+            (n += $(r)), (r = r.return);
+          } while (r);
+          var a = n;
+        } catch (o) {
+          a = '\nError generating stack: ' + o.message + '\n' + o.stack;
+        }
+        return { value: e, source: t, stack: a, digest: null };
+      }
+      function dl(e, t, n) {
+        return { value: e, source: null, stack: null != n ? n : null, digest: null != t ? t : null };
+      }
+      function pl(e, t) {
+        try {
+          console.error(t.value);
+        } catch (n) {
+          setTimeout(function () {
+            throw n;
+          });
+        }
+      }
+      var fl = 'function' == typeof WeakMap ? WeakMap : Map;
+      function ml(e, t, n) {
+        ((n = No(-1, n)).tag = 3), (n.payload = { element: null });
+        var r = t.value;
+        return (
+          (n.callback = function () {
+            Zs || ((Zs = !0), (Gs = r)), pl(0, t);
+          }),
+          n
+        );
+      }
+      function hl(e, t, n) {
+        (n = No(-1, n)).tag = 3;
+        var r = e.type.getDerivedStateFromError;
+        if ('function' == typeof r) {
+          var a = t.value;
+          (n.payload = function () {
+            return r(a);
+          }),
+            (n.callback = function () {
+              pl(0, t);
+            });
+        }
+        var o = e.stateNode;
+        return (
+          null !== o &&
+            'function' == typeof o.componentDidCatch &&
+            (n.callback = function () {
+              pl(0, t), 'function' != typeof r && (null === Ws ? (Ws = new Set([this])) : Ws.add(this));
+              var e = t.stack;
+              this.componentDidCatch(t.value, { componentStack: null !== e ? e : '' });
+            }),
+          n
+        );
+      }
+      function gl(e, t, n) {
+        var r = e.pingCache;
+        if (null === r) {
+          r = e.pingCache = new fl();
+          var a = new Set();
+          r.set(t, a);
+        } else void 0 === (a = r.get(t)) && ((a = new Set()), r.set(t, a));
+        a.has(n) || (a.add(n), (e = _c.bind(null, e, t, n)), t.then(e, e));
+      }
+      function yl(e) {
+        do {
+          var t;
+          if (((t = 13 === e.tag) && (t = null === (t = e.memoizedState) || null !== t.dehydrated), t)) return e;
+          e = e.return;
+        } while (null !== e);
+        return null;
+      }
+      function bl(e, t, n, r, a) {
+        return 0 == (1 & e.mode)
+          ? (e === t
+              ? (e.flags |= 65536)
+              : ((e.flags |= 128),
+                (n.flags |= 131072),
+                (n.flags &= -52805),
+                1 === n.tag && (null === n.alternate ? (n.tag = 17) : (((t = No(-1, 1)).tag = 2), Oo(n, t, 1))),
+                (n.lanes |= 1)),
+            e)
+          : ((e.flags |= 65536), (e.lanes = a), e);
+      }
+      var vl = w.ReactCurrentOwner,
+        wl = !1;
+      function kl(e, t, n, r) {
+        t.child = null === e ? Xo(t, null, n, r) : Yo(t, e.child, n, r);
+      }
+      function Sl(e, t, n, r, a) {
+        n = n.render;
+        var o = t.ref;
+        return (
+          Co(t, a),
+          (r = Ei(e, t, n, r, o, a)),
+          (n = Ci()),
+          null === e || wl
+            ? (ao && n && eo(t), (t.flags |= 1), kl(e, t, r, a), t.child)
+            : ((t.updateQueue = e.updateQueue), (t.flags &= -2053), (e.lanes &= ~a), Zl(e, t, a))
+        );
+      }
+      function xl(e, t, n, r, a) {
+        if (null === e) {
+          var o = n.type;
+          return 'function' != typeof o || Ic(o) || void 0 !== o.defaultProps || null !== n.compare || void 0 !== n.defaultProps
+            ? (((e = Oc(n.type, null, r, t, t.mode, a)).ref = t.ref), (e.return = t), (t.child = e))
+            : ((t.tag = 15), (t.type = o), El(e, t, o, r, a));
+        }
+        if (((o = e.child), 0 == (e.lanes & a))) {
+          var i = o.memoizedProps;
+          if ((n = null !== (n = n.compare) ? n : sr)(i, r) && e.ref === t.ref) return Zl(e, t, a);
+        }
+        return (t.flags |= 1), ((e = Nc(o, r)).ref = t.ref), (e.return = t), (t.child = e);
+      }
+      function El(e, t, n, r, a) {
+        if (null !== e) {
+          var o = e.memoizedProps;
+          if (sr(o, r) && e.ref === t.ref) {
+            if (((wl = !1), (t.pendingProps = r = o), 0 == (e.lanes & a))) return (t.lanes = e.lanes), Zl(e, t, a);
+            0 != (131072 & e.flags) && (wl = !0);
+          }
+        }
+        return Pl(e, t, n, r, a);
+      }
+      function Cl(e, t, n) {
+        var r = t.pendingProps,
+          a = r.children,
+          o = null !== e ? e.memoizedState : null;
+        if ('hidden' === r.mode)
+          if (0 == (1 & t.mode)) (t.memoizedState = { baseLanes: 0, cachePool: null, transitions: null }), _a(Ns, Is), (Is |= n);
+          else {
+            if (0 == (1073741824 & n))
+              return (
+                (e = null !== o ? o.baseLanes | n : n),
+                (t.lanes = t.childLanes = 1073741824),
+                (t.memoizedState = { baseLanes: e, cachePool: null, transitions: null }),
+                (t.updateQueue = null),
+                _a(Ns, Is),
+                (Is |= e),
+                null
+              );
+            (t.memoizedState = { baseLanes: 0, cachePool: null, transitions: null }),
+              (r = null !== o ? o.baseLanes : n),
+              _a(Ns, Is),
+              (Is |= r);
+          }
+        else null !== o ? ((r = o.baseLanes | n), (t.memoizedState = null)) : (r = n), _a(Ns, Is), (Is |= r);
+        return kl(e, t, a, n), t.child;
+      }
+      function _l(e, t) {
+        var n = t.ref;
+        ((null === e && null !== n) || (null !== e && e.ref !== n)) && ((t.flags |= 512), (t.flags |= 2097152));
+      }
+      function Pl(e, t, n, r, a) {
+        var o = Ra(n) ? La : Ta.current;
+        return (
+          (o = ja(t, o)),
+          Co(t, a),
+          (n = Ei(e, t, n, r, o, a)),
+          (r = Ci()),
+          null === e || wl
+            ? (ao && r && eo(t), (t.flags |= 1), kl(e, t, n, a), t.child)
+            : ((t.updateQueue = e.updateQueue), (t.flags &= -2053), (e.lanes &= ~a), Zl(e, t, a))
+        );
+      }
+      function Tl(e, t, n, r, a) {
+        if (Ra(n)) {
+          var o = !0;
+          Da(t);
+        } else o = !1;
+        if ((Co(t, a), null === t.stateNode)) ql(e, t), qo(t, n, r), Go(t, n, r, a), (r = !0);
+        else if (null === e) {
+          var i = t.stateNode,
+            l = t.memoizedProps;
+          i.props = l;
+          var s = i.context,
+            c = n.contextType;
+          'object' == typeof c && null !== c ? (c = _o(c)) : (c = ja(t, (c = Ra(n) ? La : Ta.current)));
+          var u = n.getDerivedStateFromProps,
+            d = 'function' == typeof u || 'function' == typeof i.getSnapshotBeforeUpdate;
+          d ||
+            ('function' != typeof i.UNSAFE_componentWillReceiveProps && 'function' != typeof i.componentWillReceiveProps) ||
+            ((l !== r || s !== c) && Zo(t, i, r, c)),
+            (jo = !1);
+          var p = t.memoizedState;
+          (i.state = p),
+            Mo(t, r, i, a),
+            (s = t.memoizedState),
+            l !== r || p !== s || Aa.current || jo
+              ? ('function' == typeof u && ($o(t, n, u, r), (s = t.memoizedState)),
+                (l = jo || Ho(t, n, l, r, p, s, c))
+                  ? (d ||
+                      ('function' != typeof i.UNSAFE_componentWillMount && 'function' != typeof i.componentWillMount) ||
+                      ('function' == typeof i.componentWillMount && i.componentWillMount(),
+                      'function' == typeof i.UNSAFE_componentWillMount && i.UNSAFE_componentWillMount()),
+                    'function' == typeof i.componentDidMount && (t.flags |= 4194308))
+                  : ('function' == typeof i.componentDidMount && (t.flags |= 4194308),
+                    (t.memoizedProps = r),
+                    (t.memoizedState = s)),
+                (i.props = r),
+                (i.state = s),
+                (i.context = c),
+                (r = l))
+              : ('function' == typeof i.componentDidMount && (t.flags |= 4194308), (r = !1));
+        } else {
+          (i = t.stateNode),
+            Io(e, t),
+            (l = t.memoizedProps),
+            (c = t.type === t.elementType ? l : yo(t.type, l)),
+            (i.props = c),
+            (d = t.pendingProps),
+            (p = i.context),
+            'object' == typeof (s = n.contextType) && null !== s ? (s = _o(s)) : (s = ja(t, (s = Ra(n) ? La : Ta.current)));
+          var f = n.getDerivedStateFromProps;
+          (u = 'function' == typeof f || 'function' == typeof i.getSnapshotBeforeUpdate) ||
+            ('function' != typeof i.UNSAFE_componentWillReceiveProps && 'function' != typeof i.componentWillReceiveProps) ||
+            ((l !== d || p !== s) && Zo(t, i, r, s)),
+            (jo = !1),
+            (p = t.memoizedState),
+            (i.state = p),
+            Mo(t, r, i, a);
+          var m = t.memoizedState;
+          l !== d || p !== m || Aa.current || jo
+            ? ('function' == typeof f && ($o(t, n, f, r), (m = t.memoizedState)),
+              (c = jo || Ho(t, n, c, r, p, m, s) || !1)
+                ? (u ||
+                    ('function' != typeof i.UNSAFE_componentWillUpdate && 'function' != typeof i.componentWillUpdate) ||
+                    ('function' == typeof i.componentWillUpdate && i.componentWillUpdate(r, m, s),
+                    'function' == typeof i.UNSAFE_componentWillUpdate && i.UNSAFE_componentWillUpdate(r, m, s)),
+                  'function' == typeof i.componentDidUpdate && (t.flags |= 4),
+                  'function' == typeof i.getSnapshotBeforeUpdate && (t.flags |= 1024))
+                : ('function' != typeof i.componentDidUpdate ||
+                    (l === e.memoizedProps && p === e.memoizedState) ||
+                    (t.flags |= 4),
+                  'function' != typeof i.getSnapshotBeforeUpdate ||
+                    (l === e.memoizedProps && p === e.memoizedState) ||
+                    (t.flags |= 1024),
+                  (t.memoizedProps = r),
+                  (t.memoizedState = m)),
+              (i.props = r),
+              (i.state = m),
+              (i.context = s),
+              (r = c))
+            : ('function' != typeof i.componentDidUpdate || (l === e.memoizedProps && p === e.memoizedState) || (t.flags |= 4),
+              'function' != typeof i.getSnapshotBeforeUpdate ||
+                (l === e.memoizedProps && p === e.memoizedState) ||
+                (t.flags |= 1024),
+              (r = !1));
+        }
+        return Al(e, t, n, r, o, a);
+      }
+      function Al(e, t, n, r, a, o) {
+        _l(e, t);
+        var i = 0 != (128 & t.flags);
+        if (!r && !i) return a && Fa(t, n, !1), Zl(e, t, o);
+        (r = t.stateNode), (vl.current = t);
+        var l = i && 'function' != typeof n.getDerivedStateFromError ? null : r.render();
+        return (
+          (t.flags |= 1),
+          null !== e && i ? ((t.child = Yo(t, e.child, null, o)), (t.child = Yo(t, null, l, o))) : kl(e, t, l, o),
+          (t.memoizedState = r.state),
+          a && Fa(t, n, !0),
+          t.child
+        );
+      }
+      function Ll(e) {
+        var t = e.stateNode;
+        t.pendingContext ? Na(0, t.pendingContext, t.pendingContext !== t.context) : t.context && Na(0, t.context, !1),
+          ai(e, t.containerInfo);
+      }
+      function jl(e, t, n, r, a) {
+        return mo(), ho(a), (t.flags |= 256), kl(e, t, n, r), t.child;
+      }
+      var Rl,
+        Il,
+        Nl,
+        Ol,
+        Dl = { dehydrated: null, treeContext: null, retryLane: 0 };
+      function Fl(e) {
+        return { baseLanes: e, cachePool: null, transitions: null };
+      }
+      function Ml(e, t, n) {
+        var r,
+          a = t.pendingProps,
+          i = si.current,
+          l = !1,
+          s = 0 != (128 & t.flags);
+        if (
+          ((r = s) || (r = (null === e || null !== e.memoizedState) && 0 != (2 & i)),
+          r ? ((l = !0), (t.flags &= -129)) : (null !== e && null === e.memoizedState) || (i |= 1),
+          _a(si, 1 & i),
+          null === e)
+        )
+          return (
+            co(t),
+            null !== (e = t.memoizedState) && null !== (e = e.dehydrated)
+              ? (0 == (1 & t.mode) ? (t.lanes = 1) : '$!' === e.data ? (t.lanes = 8) : (t.lanes = 1073741824), null)
+              : ((s = a.children),
+                (e = a.fallback),
+                l
+                  ? ((a = t.mode),
+                    (l = t.child),
+                    (s = { mode: 'hidden', children: s }),
+                    0 == (1 & a) && null !== l ? ((l.childLanes = 0), (l.pendingProps = s)) : (l = Fc(s, a, 0, null)),
+                    (e = Dc(e, a, n, null)),
+                    (l.return = t),
+                    (e.return = t),
+                    (l.sibling = e),
+                    (t.child = l),
+                    (t.child.memoizedState = Fl(n)),
+                    (t.memoizedState = Dl),
+                    e)
+                  : Bl(t, s))
+          );
+        if (null !== (i = e.memoizedState) && null !== (r = i.dehydrated))
+          return (function (e, t, n, r, a, i, l) {
+            if (n)
+              return 256 & t.flags
+                ? ((t.flags &= -257), zl(e, t, l, (r = dl(Error(o(422))))))
+                : null !== t.memoizedState
+                  ? ((t.child = e.child), (t.flags |= 128), null)
+                  : ((i = r.fallback),
+                    (a = t.mode),
+                    (r = Fc({ mode: 'visible', children: r.children }, a, 0, null)),
+                    ((i = Dc(i, a, l, null)).flags |= 2),
+                    (r.return = t),
+                    (i.return = t),
+                    (r.sibling = i),
+                    (t.child = r),
+                    0 != (1 & t.mode) && Yo(t, e.child, null, l),
+                    (t.child.memoizedState = Fl(l)),
+                    (t.memoizedState = Dl),
+                    i);
+            if (0 == (1 & t.mode)) return zl(e, t, l, null);
+            if ('$!' === a.data) {
+              if ((r = a.nextSibling && a.nextSibling.dataset)) var s = r.dgst;
+              return (r = s), zl(e, t, l, (r = dl((i = Error(o(419))), r, void 0)));
+            }
+            if (((s = 0 != (l & e.childLanes)), wl || s)) {
+              if (null !== (r = Ls)) {
+                switch (l & -l) {
+                  case 4:
+                    a = 2;
+                    break;
+                  case 16:
+                    a = 8;
+                    break;
+                  case 64:
+                  case 128:
+                  case 256:
+                  case 512:
+                  case 1024:
+                  case 2048:
+                  case 4096:
+                  case 8192:
+                  case 16384:
+                  case 32768:
+                  case 65536:
+                  case 131072:
+                  case 262144:
+                  case 524288:
+                  case 1048576:
+                  case 2097152:
+                  case 4194304:
+                  case 8388608:
+                  case 16777216:
+                  case 33554432:
+                  case 67108864:
+                    a = 32;
+                    break;
+                  case 536870912:
+                    a = 268435456;
+                    break;
+                  default:
+                    a = 0;
+                }
+                0 !== (a = 0 != (a & (r.suspendedLanes | l)) ? 0 : a) &&
+                  a !== i.retryLane &&
+                  ((i.retryLane = a), Lo(e, a), rc(r, e, a, -1));
+              }
+              return gc(), zl(e, t, l, (r = dl(Error(o(421)))));
+            }
+            return '$?' === a.data
+              ? ((t.flags |= 128), (t.child = e.child), (t = Tc.bind(null, e)), (a._reactRetry = t), null)
+              : ((e = i.treeContext),
+                (ro = ca(a.nextSibling)),
+                (no = t),
+                (ao = !0),
+                (oo = null),
+                null !== e && ((Wa[Va++] = Ka), (Wa[Va++] = Ya), (Wa[Va++] = Qa), (Ka = e.id), (Ya = e.overflow), (Qa = t)),
+                (t = Bl(t, r.children)),
+                (t.flags |= 4096),
+                t);
+          })(e, t, s, a, r, i, n);
+        if (l) {
+          (l = a.fallback), (s = t.mode), (r = (i = e.child).sibling);
+          var c = { mode: 'hidden', children: a.children };
+          return (
+            0 == (1 & s) && t.child !== i
+              ? (((a = t.child).childLanes = 0), (a.pendingProps = c), (t.deletions = null))
+              : ((a = Nc(i, c)).subtreeFlags = 14680064 & i.subtreeFlags),
+            null !== r ? (l = Nc(r, l)) : ((l = Dc(l, s, n, null)).flags |= 2),
+            (l.return = t),
+            (a.return = t),
+            (a.sibling = l),
+            (t.child = a),
+            (a = l),
+            (l = t.child),
+            (s =
+              null === (s = e.child.memoizedState)
+                ? Fl(n)
+                : { baseLanes: s.baseLanes | n, cachePool: null, transitions: s.transitions }),
+            (l.memoizedState = s),
+            (l.childLanes = e.childLanes & ~n),
+            (t.memoizedState = Dl),
+            a
+          );
+        }
+        return (
+          (e = (l = e.child).sibling),
+          (a = Nc(l, { mode: 'visible', children: a.children })),
+          0 == (1 & t.mode) && (a.lanes = n),
+          (a.return = t),
+          (a.sibling = null),
+          null !== e && (null === (n = t.deletions) ? ((t.deletions = [e]), (t.flags |= 16)) : n.push(e)),
+          (t.child = a),
+          (t.memoizedState = null),
+          a
+        );
+      }
+      function Bl(e, t) {
+        return ((t = Fc({ mode: 'visible', children: t }, e.mode, 0, null)).return = e), (e.child = t);
+      }
+      function zl(e, t, n, r) {
+        return (
+          null !== r && ho(r),
+          Yo(t, e.child, null, n),
+          ((e = Bl(t, t.pendingProps.children)).flags |= 2),
+          (t.memoizedState = null),
+          e
+        );
+      }
+      function $l(e, t, n) {
+        e.lanes |= t;
+        var r = e.alternate;
+        null !== r && (r.lanes |= t), Eo(e.return, t, n);
+      }
+      function Ul(e, t, n, r, a) {
+        var o = e.memoizedState;
+        null === o
+          ? (e.memoizedState = { isBackwards: t, rendering: null, renderingStartTime: 0, last: r, tail: n, tailMode: a })
+          : ((o.isBackwards = t), (o.rendering = null), (o.renderingStartTime = 0), (o.last = r), (o.tail = n), (o.tailMode = a));
+      }
+      function Hl(e, t, n) {
+        var r = t.pendingProps,
+          a = r.revealOrder,
+          o = r.tail;
+        if ((kl(e, t, r.children, n), 0 != (2 & (r = si.current)))) (r = (1 & r) | 2), (t.flags |= 128);
+        else {
+          if (null !== e && 0 != (128 & e.flags))
+            e: for (e = t.child; null !== e; ) {
+              if (13 === e.tag) null !== e.memoizedState && $l(e, n, t);
+              else if (19 === e.tag) $l(e, n, t);
+              else if (null !== e.child) {
+                (e.child.return = e), (e = e.child);
+                continue;
+              }
+              if (e === t) break e;
+              for (; null === e.sibling; ) {
+                if (null === e.return || e.return === t) break e;
+                e = e.return;
+              }
+              (e.sibling.return = e.return), (e = e.sibling);
+            }
+          r &= 1;
+        }
+        if ((_a(si, r), 0 == (1 & t.mode))) t.memoizedState = null;
+        else
+          switch (a) {
+            case 'forwards':
+              for (n = t.child, a = null; null !== n; ) null !== (e = n.alternate) && null === ci(e) && (a = n), (n = n.sibling);
+              null === (n = a) ? ((a = t.child), (t.child = null)) : ((a = n.sibling), (n.sibling = null)), Ul(t, !1, a, n, o);
+              break;
+            case 'backwards':
+              for (n = null, a = t.child, t.child = null; null !== a; ) {
+                if (null !== (e = a.alternate) && null === ci(e)) {
+                  t.child = a;
+                  break;
+                }
+                (e = a.sibling), (a.sibling = n), (n = a), (a = e);
+              }
+              Ul(t, !0, n, null, o);
+              break;
+            case 'together':
+              Ul(t, !1, null, null, void 0);
+              break;
+            default:
+              t.memoizedState = null;
+          }
+        return t.child;
+      }
+      function ql(e, t) {
+        0 == (1 & t.mode) && null !== e && ((e.alternate = null), (t.alternate = null), (t.flags |= 2));
+      }
+      function Zl(e, t, n) {
+        if ((null !== e && (t.dependencies = e.dependencies), (Fs |= t.lanes), 0 == (n & t.childLanes))) return null;
+        if (null !== e && t.child !== e.child) throw Error(o(153));
+        if (null !== t.child) {
+          for (n = Nc((e = t.child), e.pendingProps), t.child = n, n.return = t; null !== e.sibling; )
+            (e = e.sibling), ((n = n.sibling = Nc(e, e.pendingProps)).return = t);
+          n.sibling = null;
+        }
+        return t.child;
+      }
+      function Gl(e, t) {
+        if (!ao)
+          switch (e.tailMode) {
+            case 'hidden':
+              t = e.tail;
+              for (var n = null; null !== t; ) null !== t.alternate && (n = t), (t = t.sibling);
+              null === n ? (e.tail = null) : (n.sibling = null);
+              break;
+            case 'collapsed':
+              n = e.tail;
+              for (var r = null; null !== n; ) null !== n.alternate && (r = n), (n = n.sibling);
+              null === r ? (t || null === e.tail ? (e.tail = null) : (e.tail.sibling = null)) : (r.sibling = null);
+          }
+      }
+      function Wl(e) {
+        var t = null !== e.alternate && e.alternate.child === e.child,
+          n = 0,
+          r = 0;
+        if (t)
+          for (var a = e.child; null !== a; )
+            (n |= a.lanes | a.childLanes),
+              (r |= 14680064 & a.subtreeFlags),
+              (r |= 14680064 & a.flags),
+              (a.return = e),
+              (a = a.sibling);
+        else
+          for (a = e.child; null !== a; )
+            (n |= a.lanes | a.childLanes), (r |= a.subtreeFlags), (r |= a.flags), (a.return = e), (a = a.sibling);
+        return (e.subtreeFlags |= r), (e.childLanes = n), t;
+      }
+      function Vl(e, t, n) {
+        var r = t.pendingProps;
+        switch ((to(t), t.tag)) {
+          case 2:
+          case 16:
+          case 15:
+          case 0:
+          case 11:
+          case 7:
+          case 8:
+          case 12:
+          case 9:
+          case 14:
+            return Wl(t), null;
+          case 1:
+          case 17:
+            return Ra(t.type) && Ia(), Wl(t), null;
+          case 3:
+            return (
+              (r = t.stateNode),
+              oi(),
+              Ca(Aa),
+              Ca(Ta),
+              di(),
+              r.pendingContext && ((r.context = r.pendingContext), (r.pendingContext = null)),
+              (null !== e && null !== e.child) ||
+                (po(t)
+                  ? (t.flags |= 4)
+                  : null === e ||
+                    (e.memoizedState.isDehydrated && 0 == (256 & t.flags)) ||
+                    ((t.flags |= 1024), null !== oo && (lc(oo), (oo = null)))),
+              Il(e, t),
+              Wl(t),
+              null
+            );
+          case 5:
+            li(t);
+            var a = ri(ni.current);
+            if (((n = t.type), null !== e && null != t.stateNode))
+              Nl(e, t, n, r, a), e.ref !== t.ref && ((t.flags |= 512), (t.flags |= 2097152));
+            else {
+              if (!r) {
+                if (null === t.stateNode) throw Error(o(166));
+                return Wl(t), null;
+              }
+              if (((e = ri(ei.current)), po(t))) {
+                (r = t.stateNode), (n = t.type);
+                var i = t.memoizedProps;
+                switch (((r[pa] = t), (r[fa] = i), (e = 0 != (1 & t.mode)), n)) {
+                  case 'dialog':
+                    Br('cancel', r), Br('close', r);
+                    break;
+                  case 'iframe':
+                  case 'object':
+                  case 'embed':
+                    Br('load', r);
+                    break;
+                  case 'video':
+                  case 'audio':
+                    for (a = 0; a < Or.length; a++) Br(Or[a], r);
+                    break;
+                  case 'source':
+                    Br('error', r);
+                    break;
+                  case 'img':
+                  case 'image':
+                  case 'link':
+                    Br('error', r), Br('load', r);
+                    break;
+                  case 'details':
+                    Br('toggle', r);
+                    break;
+                  case 'input':
+                    K(r, i), Br('invalid', r);
+                    break;
+                  case 'select':
+                    (r._wrapperState = { wasMultiple: !!i.multiple }), Br('invalid', r);
+                    break;
+                  case 'textarea':
+                    ae(r, i), Br('invalid', r);
+                }
+                for (var s in (be(n, i), (a = null), i))
+                  if (i.hasOwnProperty(s)) {
+                    var c = i[s];
+                    'children' === s
+                      ? 'string' == typeof c
+                        ? r.textContent !== c &&
+                          (!0 !== i.suppressHydrationWarning && Xr(r.textContent, c, e), (a = ['children', c]))
+                        : 'number' == typeof c &&
+                          r.textContent !== '' + c &&
+                          (!0 !== i.suppressHydrationWarning && Xr(r.textContent, c, e), (a = ['children', '' + c]))
+                      : l.hasOwnProperty(s) && null != c && 'onScroll' === s && Br('scroll', r);
+                  }
+                switch (n) {
+                  case 'input':
+                    G(r), J(r, i, !0);
+                    break;
+                  case 'textarea':
+                    G(r), ie(r);
+                    break;
+                  case 'select':
+                  case 'option':
+                    break;
+                  default:
+                    'function' == typeof i.onClick && (r.onclick = Jr);
+                }
+                (r = a), (t.updateQueue = r), null !== r && (t.flags |= 4);
+              } else {
+                (s = 9 === a.nodeType ? a : a.ownerDocument),
+                  'http://www.w3.org/1999/xhtml' === e && (e = le(n)),
+                  'http://www.w3.org/1999/xhtml' === e
+                    ? 'script' === n
+                      ? (((e = s.createElement('div')).innerHTML = '<script></script>'), (e = e.removeChild(e.firstChild)))
+                      : 'string' == typeof r.is
+                        ? (e = s.createElement(n, { is: r.is }))
+                        : ((e = s.createElement(n)),
+                          'select' === n && ((s = e), r.multiple ? (s.multiple = !0) : r.size && (s.size = r.size)))
+                    : (e = s.createElementNS(e, n)),
+                  (e[pa] = t),
+                  (e[fa] = r),
+                  Rl(e, t, !1, !1),
+                  (t.stateNode = e);
+                e: {
+                  switch (((s = ve(n, r)), n)) {
+                    case 'dialog':
+                      Br('cancel', e), Br('close', e), (a = r);
+                      break;
+                    case 'iframe':
+                    case 'object':
+                    case 'embed':
+                      Br('load', e), (a = r);
+                      break;
+                    case 'video':
+                    case 'audio':
+                      for (a = 0; a < Or.length; a++) Br(Or[a], e);
+                      a = r;
+                      break;
+                    case 'source':
+                      Br('error', e), (a = r);
+                      break;
+                    case 'img':
+                    case 'image':
+                    case 'link':
+                      Br('error', e), Br('load', e), (a = r);
+                      break;
+                    case 'details':
+                      Br('toggle', e), (a = r);
+                      break;
+                    case 'input':
+                      K(e, r), (a = Q(e, r)), Br('invalid', e);
+                      break;
+                    case 'option':
+                    default:
+                      a = r;
+                      break;
+                    case 'select':
+                      (e._wrapperState = { wasMultiple: !!r.multiple }), (a = F({}, r, { value: void 0 })), Br('invalid', e);
+                      break;
+                    case 'textarea':
+                      ae(e, r), (a = re(e, r)), Br('invalid', e);
+                  }
+                  for (i in (be(n, a), (c = a)))
+                    if (c.hasOwnProperty(i)) {
+                      var u = c[i];
+                      'style' === i
+                        ? ge(e, u)
+                        : 'dangerouslySetInnerHTML' === i
+                          ? null != (u = u ? u.__html : void 0) && de(e, u)
+                          : 'children' === i
+                            ? 'string' == typeof u
+                              ? ('textarea' !== n || '' !== u) && pe(e, u)
+                              : 'number' == typeof u && pe(e, '' + u)
+                            : 'suppressContentEditableWarning' !== i &&
+                              'suppressHydrationWarning' !== i &&
+                              'autoFocus' !== i &&
+                              (l.hasOwnProperty(i)
+                                ? null != u && 'onScroll' === i && Br('scroll', e)
+                                : null != u && v(e, i, u, s));
+                    }
+                  switch (n) {
+                    case 'input':
+                      G(e), J(e, r, !1);
+                      break;
+                    case 'textarea':
+                      G(e), ie(e);
+                      break;
+                    case 'option':
+                      null != r.value && e.setAttribute('value', '' + q(r.value));
+                      break;
+                    case 'select':
+                      (e.multiple = !!r.multiple),
+                        null != (i = r.value)
+                          ? ne(e, !!r.multiple, i, !1)
+                          : null != r.defaultValue && ne(e, !!r.multiple, r.defaultValue, !0);
+                      break;
+                    default:
+                      'function' == typeof a.onClick && (e.onclick = Jr);
+                  }
+                  switch (n) {
+                    case 'button':
+                    case 'input':
+                    case 'select':
+                    case 'textarea':
+                      r = !!r.autoFocus;
+                      break e;
+                    case 'img':
+                      r = !0;
+                      break e;
+                    default:
+                      r = !1;
+                  }
+                }
+                r && (t.flags |= 4);
+              }
+              null !== t.ref && ((t.flags |= 512), (t.flags |= 2097152));
+            }
+            return Wl(t), null;
+          case 6:
+            if (e && null != t.stateNode) Ol(e, t, e.memoizedProps, r);
+            else {
+              if ('string' != typeof r && null === t.stateNode) throw Error(o(166));
+              if (((n = ri(ni.current)), ri(ei.current), po(t))) {
+                if (((r = t.stateNode), (n = t.memoizedProps), (r[pa] = t), (i = r.nodeValue !== n) && null !== (e = no)))
+                  switch (e.tag) {
+                    case 3:
+                      Xr(r.nodeValue, n, 0 != (1 & e.mode));
+                      break;
+                    case 5:
+                      !0 !== e.memoizedProps.suppressHydrationWarning && Xr(r.nodeValue, n, 0 != (1 & e.mode));
+                  }
+                i && (t.flags |= 4);
+              } else ((r = (9 === n.nodeType ? n : n.ownerDocument).createTextNode(r))[pa] = t), (t.stateNode = r);
+            }
+            return Wl(t), null;
+          case 13:
+            if (
+              (Ca(si), (r = t.memoizedState), null === e || (null !== e.memoizedState && null !== e.memoizedState.dehydrated))
+            ) {
+              if (ao && null !== ro && 0 != (1 & t.mode) && 0 == (128 & t.flags)) fo(), mo(), (t.flags |= 98560), (i = !1);
+              else if (((i = po(t)), null !== r && null !== r.dehydrated)) {
+                if (null === e) {
+                  if (!i) throw Error(o(318));
+                  if (!(i = null !== (i = t.memoizedState) ? i.dehydrated : null)) throw Error(o(317));
+                  i[pa] = t;
+                } else mo(), 0 == (128 & t.flags) && (t.memoizedState = null), (t.flags |= 4);
+                Wl(t), (i = !1);
+              } else null !== oo && (lc(oo), (oo = null)), (i = !0);
+              if (!i) return 65536 & t.flags ? t : null;
+            }
+            return 0 != (128 & t.flags)
+              ? ((t.lanes = n), t)
+              : ((r = null !== r) !== (null !== e && null !== e.memoizedState) &&
+                  r &&
+                  ((t.child.flags |= 8192),
+                  0 != (1 & t.mode) && (null === e || 0 != (1 & si.current) ? 0 === Os && (Os = 3) : gc())),
+                null !== t.updateQueue && (t.flags |= 4),
+                Wl(t),
+                null);
+          case 4:
+            return oi(), Il(e, t), null === e && Ur(t.stateNode.containerInfo), Wl(t), null;
+          case 10:
+            return xo(t.type._context), Wl(t), null;
+          case 19:
+            if ((Ca(si), null === (i = t.memoizedState))) return Wl(t), null;
+            if (((r = 0 != (128 & t.flags)), null === (s = i.rendering)))
+              if (r) Gl(i, !1);
+              else {
+                if (0 !== Os || (null !== e && 0 != (128 & e.flags)))
+                  for (e = t.child; null !== e; ) {
+                    if (null !== (s = ci(e))) {
+                      for (
+                        t.flags |= 128,
+                          Gl(i, !1),
+                          null !== (r = s.updateQueue) && ((t.updateQueue = r), (t.flags |= 4)),
+                          t.subtreeFlags = 0,
+                          r = n,
+                          n = t.child;
+                        null !== n;
+
+                      )
+                        (e = r),
+                          ((i = n).flags &= 14680066),
+                          null === (s = i.alternate)
+                            ? ((i.childLanes = 0),
+                              (i.lanes = e),
+                              (i.child = null),
+                              (i.subtreeFlags = 0),
+                              (i.memoizedProps = null),
+                              (i.memoizedState = null),
+                              (i.updateQueue = null),
+                              (i.dependencies = null),
+                              (i.stateNode = null))
+                            : ((i.childLanes = s.childLanes),
+                              (i.lanes = s.lanes),
+                              (i.child = s.child),
+                              (i.subtreeFlags = 0),
+                              (i.deletions = null),
+                              (i.memoizedProps = s.memoizedProps),
+                              (i.memoizedState = s.memoizedState),
+                              (i.updateQueue = s.updateQueue),
+                              (i.type = s.type),
+                              (e = s.dependencies),
+                              (i.dependencies = null === e ? null : { lanes: e.lanes, firstContext: e.firstContext })),
+                          (n = n.sibling);
+                      return _a(si, (1 & si.current) | 2), t.child;
+                    }
+                    e = e.sibling;
+                  }
+                null !== i.tail && Ye() > Hs && ((t.flags |= 128), (r = !0), Gl(i, !1), (t.lanes = 4194304));
+              }
+            else {
+              if (!r)
+                if (null !== (e = ci(s))) {
+                  if (
+                    ((t.flags |= 128),
+                    (r = !0),
+                    null !== (n = e.updateQueue) && ((t.updateQueue = n), (t.flags |= 4)),
+                    Gl(i, !0),
+                    null === i.tail && 'hidden' === i.tailMode && !s.alternate && !ao)
+                  )
+                    return Wl(t), null;
+                } else
+                  2 * Ye() - i.renderingStartTime > Hs &&
+                    1073741824 !== n &&
+                    ((t.flags |= 128), (r = !0), Gl(i, !1), (t.lanes = 4194304));
+              i.isBackwards
+                ? ((s.sibling = t.child), (t.child = s))
+                : (null !== (n = i.last) ? (n.sibling = s) : (t.child = s), (i.last = s));
+            }
+            return null !== i.tail
+              ? ((t = i.tail),
+                (i.rendering = t),
+                (i.tail = t.sibling),
+                (i.renderingStartTime = Ye()),
+                (t.sibling = null),
+                (n = si.current),
+                _a(si, r ? (1 & n) | 2 : 1 & n),
+                t)
+              : (Wl(t), null);
+          case 22:
+          case 23:
+            return (
+              pc(),
+              (r = null !== t.memoizedState),
+              null !== e && (null !== e.memoizedState) !== r && (t.flags |= 8192),
+              r && 0 != (1 & t.mode) ? 0 != (1073741824 & Is) && (Wl(t), 6 & t.subtreeFlags && (t.flags |= 8192)) : Wl(t),
+              null
+            );
+          case 24:
+          case 25:
+            return null;
+        }
+        throw Error(o(156, t.tag));
+      }
+      function Ql(e, t) {
+        switch ((to(t), t.tag)) {
+          case 1:
+            return Ra(t.type) && Ia(), 65536 & (e = t.flags) ? ((t.flags = (-65537 & e) | 128), t) : null;
+          case 3:
+            return (
+              oi(),
+              Ca(Aa),
+              Ca(Ta),
+              di(),
+              0 != (65536 & (e = t.flags)) && 0 == (128 & e) ? ((t.flags = (-65537 & e) | 128), t) : null
+            );
+          case 5:
+            return li(t), null;
+          case 13:
+            if ((Ca(si), null !== (e = t.memoizedState) && null !== e.dehydrated)) {
+              if (null === t.alternate) throw Error(o(340));
+              mo();
+            }
+            return 65536 & (e = t.flags) ? ((t.flags = (-65537 & e) | 128), t) : null;
+          case 19:
+            return Ca(si), null;
+          case 4:
+            return oi(), null;
+          case 10:
+            return xo(t.type._context), null;
+          case 22:
+          case 23:
+            return pc(), null;
+          default:
+            return null;
+        }
+      }
+      (Rl = function (e, t) {
+        for (var n = t.child; null !== n; ) {
+          if (5 === n.tag || 6 === n.tag) e.appendChild(n.stateNode);
+          else if (4 !== n.tag && null !== n.child) {
+            (n.child.return = n), (n = n.child);
+            continue;
+          }
+          if (n === t) break;
+          for (; null === n.sibling; ) {
+            if (null === n.return || n.return === t) return;
+            n = n.return;
+          }
+          (n.sibling.return = n.return), (n = n.sibling);
+        }
+      }),
+        (Il = function () {}),
+        (Nl = function (e, t, n, r) {
+          var a = e.memoizedProps;
+          if (a !== r) {
+            (e = t.stateNode), ri(ei.current);
+            var o,
+              i = null;
+            switch (n) {
+              case 'input':
+                (a = Q(e, a)), (r = Q(e, r)), (i = []);
+                break;
+              case 'select':
+                (a = F({}, a, { value: void 0 })), (r = F({}, r, { value: void 0 })), (i = []);
+                break;
+              case 'textarea':
+                (a = re(e, a)), (r = re(e, r)), (i = []);
+                break;
+              default:
+                'function' != typeof a.onClick && 'function' == typeof r.onClick && (e.onclick = Jr);
+            }
+            for (u in (be(n, r), (n = null), a))
+              if (!r.hasOwnProperty(u) && a.hasOwnProperty(u) && null != a[u])
+                if ('style' === u) {
+                  var s = a[u];
+                  for (o in s) s.hasOwnProperty(o) && (n || (n = {}), (n[o] = ''));
+                } else
+                  'dangerouslySetInnerHTML' !== u &&
+                    'children' !== u &&
+                    'suppressContentEditableWarning' !== u &&
+                    'suppressHydrationWarning' !== u &&
+                    'autoFocus' !== u &&
+                    (l.hasOwnProperty(u) ? i || (i = []) : (i = i || []).push(u, null));
+            for (u in r) {
+              var c = r[u];
+              if (((s = null != a ? a[u] : void 0), r.hasOwnProperty(u) && c !== s && (null != c || null != s)))
+                if ('style' === u)
+                  if (s) {
+                    for (o in s) !s.hasOwnProperty(o) || (c && c.hasOwnProperty(o)) || (n || (n = {}), (n[o] = ''));
+                    for (o in c) c.hasOwnProperty(o) && s[o] !== c[o] && (n || (n = {}), (n[o] = c[o]));
+                  } else n || (i || (i = []), i.push(u, n)), (n = c);
+                else
+                  'dangerouslySetInnerHTML' === u
+                    ? ((c = c ? c.__html : void 0), (s = s ? s.__html : void 0), null != c && s !== c && (i = i || []).push(u, c))
+                    : 'children' === u
+                      ? ('string' != typeof c && 'number' != typeof c) || (i = i || []).push(u, '' + c)
+                      : 'suppressContentEditableWarning' !== u &&
+                        'suppressHydrationWarning' !== u &&
+                        (l.hasOwnProperty(u)
+                          ? (null != c && 'onScroll' === u && Br('scroll', e), i || s === c || (i = []))
+                          : (i = i || []).push(u, c));
+            }
+            n && (i = i || []).push('style', n);
+            var u = i;
+            (t.updateQueue = u) && (t.flags |= 4);
+          }
+        }),
+        (Ol = function (e, t, n, r) {
+          n !== r && (t.flags |= 4);
+        });
+      var Kl = !1,
+        Yl = !1,
+        Xl = 'function' == typeof WeakSet ? WeakSet : Set,
+        Jl = null;
+      function es(e, t) {
+        var n = e.ref;
+        if (null !== n)
+          if ('function' == typeof n)
+            try {
+              n(null);
+            } catch (r) {
+              Cc(e, t, r);
+            }
+          else n.current = null;
+      }
+      function ts(e, t, n) {
+        try {
+          n();
+        } catch (r) {
+          Cc(e, t, r);
+        }
+      }
+      var ns = !1;
+      function rs(e, t, n) {
+        var r = t.updateQueue;
+        if (null !== (r = null !== r ? r.lastEffect : null)) {
+          var a = (r = r.next);
+          do {
+            if ((a.tag & e) === e) {
+              var o = a.destroy;
+              (a.destroy = void 0), void 0 !== o && ts(t, n, o);
+            }
+            a = a.next;
+          } while (a !== r);
+        }
+      }
+      function as(e, t) {
+        if (null !== (t = null !== (t = t.updateQueue) ? t.lastEffect : null)) {
+          var n = (t = t.next);
+          do {
+            if ((n.tag & e) === e) {
+              var r = n.create;
+              n.destroy = r();
+            }
+            n = n.next;
+          } while (n !== t);
+        }
+      }
+      function os(e) {
+        var t = e.ref;
+        if (null !== t) {
+          var n = e.stateNode;
+          e.tag, (e = n), 'function' == typeof t ? t(e) : (t.current = e);
+        }
+      }
+      function is(e) {
+        var t = e.alternate;
+        null !== t && ((e.alternate = null), is(t)),
+          (e.child = null),
+          (e.deletions = null),
+          (e.sibling = null),
+          5 === e.tag && null !== (t = e.stateNode) && (delete t[pa], delete t[fa], delete t[ha], delete t[ga], delete t[ya]),
+          (e.stateNode = null),
+          (e.return = null),
+          (e.dependencies = null),
+          (e.memoizedProps = null),
+          (e.memoizedState = null),
+          (e.pendingProps = null),
+          (e.stateNode = null),
+          (e.updateQueue = null);
+      }
+      function ls(e) {
+        return 5 === e.tag || 3 === e.tag || 4 === e.tag;
+      }
+      function ss(e) {
+        e: for (;;) {
+          for (; null === e.sibling; ) {
+            if (null === e.return || ls(e.return)) return null;
+            e = e.return;
+          }
+          for (e.sibling.return = e.return, e = e.sibling; 5 !== e.tag && 6 !== e.tag && 18 !== e.tag; ) {
+            if (2 & e.flags) continue e;
+            if (null === e.child || 4 === e.tag) continue e;
+            (e.child.return = e), (e = e.child);
+          }
+          if (!(2 & e.flags)) return e.stateNode;
+        }
+      }
+      function cs(e, t, n) {
+        var r = e.tag;
+        if (5 === r || 6 === r)
+          (e = e.stateNode),
+            t
+              ? 8 === n.nodeType
+                ? n.parentNode.insertBefore(e, t)
+                : n.insertBefore(e, t)
+              : (8 === n.nodeType ? (t = n.parentNode).insertBefore(e, n) : (t = n).appendChild(e),
+                null != (n = n._reactRootContainer) || null !== t.onclick || (t.onclick = Jr));
+        else if (4 !== r && null !== (e = e.child)) for (cs(e, t, n), e = e.sibling; null !== e; ) cs(e, t, n), (e = e.sibling);
+      }
+      function us(e, t, n) {
+        var r = e.tag;
+        if (5 === r || 6 === r) (e = e.stateNode), t ? n.insertBefore(e, t) : n.appendChild(e);
+        else if (4 !== r && null !== (e = e.child)) for (us(e, t, n), e = e.sibling; null !== e; ) us(e, t, n), (e = e.sibling);
+      }
+      var ds = null,
+        ps = !1;
+      function fs(e, t, n) {
+        for (n = n.child; null !== n; ) ms(e, t, n), (n = n.sibling);
+      }
+      function ms(e, t, n) {
+        if (ot && 'function' == typeof ot.onCommitFiberUnmount)
+          try {
+            ot.onCommitFiberUnmount(at, n);
+          } catch (l) {}
+        switch (n.tag) {
+          case 5:
+            Yl || es(n, t);
+          case 6:
+            var r = ds,
+              a = ps;
+            (ds = null),
+              fs(e, t, n),
+              (ps = a),
+              null !== (ds = r) &&
+                (ps
+                  ? ((e = ds), (n = n.stateNode), 8 === e.nodeType ? e.parentNode.removeChild(n) : e.removeChild(n))
+                  : ds.removeChild(n.stateNode));
+            break;
+          case 18:
+            null !== ds &&
+              (ps
+                ? ((e = ds), (n = n.stateNode), 8 === e.nodeType ? sa(e.parentNode, n) : 1 === e.nodeType && sa(e, n), Ut(e))
+                : sa(ds, n.stateNode));
+            break;
+          case 4:
+            (r = ds), (a = ps), (ds = n.stateNode.containerInfo), (ps = !0), fs(e, t, n), (ds = r), (ps = a);
+            break;
+          case 0:
+          case 11:
+          case 14:
+          case 15:
+            if (!Yl && null !== (r = n.updateQueue) && null !== (r = r.lastEffect)) {
+              a = r = r.next;
+              do {
+                var o = a,
+                  i = o.destroy;
+                (o = o.tag), void 0 !== i && (0 != (2 & o) || 0 != (4 & o)) && ts(n, t, i), (a = a.next);
+              } while (a !== r);
+            }
+            fs(e, t, n);
+            break;
+          case 1:
+            if (!Yl && (es(n, t), 'function' == typeof (r = n.stateNode).componentWillUnmount))
+              try {
+                (r.props = n.memoizedProps), (r.state = n.memoizedState), r.componentWillUnmount();
+              } catch (l) {
+                Cc(n, t, l);
+              }
+            fs(e, t, n);
+            break;
+          case 21:
+            fs(e, t, n);
+            break;
+          case 22:
+            1 & n.mode ? ((Yl = (r = Yl) || null !== n.memoizedState), fs(e, t, n), (Yl = r)) : fs(e, t, n);
+            break;
+          default:
+            fs(e, t, n);
+        }
+      }
+      function hs(e) {
+        var t = e.updateQueue;
+        if (null !== t) {
+          e.updateQueue = null;
+          var n = e.stateNode;
+          null === n && (n = e.stateNode = new Xl()),
+            t.forEach(function (t) {
+              var r = Ac.bind(null, e, t);
+              n.has(t) || (n.add(t), t.then(r, r));
+            });
+        }
+      }
+      function gs(e, t) {
+        var n = t.deletions;
+        if (null !== n)
+          for (var r = 0; r < n.length; r++) {
+            var a = n[r];
+            try {
+              var i = e,
+                l = t,
+                s = l;
+              e: for (; null !== s; ) {
+                switch (s.tag) {
+                  case 5:
+                    (ds = s.stateNode), (ps = !1);
+                    break e;
+                  case 3:
+                  case 4:
+                    (ds = s.stateNode.containerInfo), (ps = !0);
+                    break e;
+                }
+                s = s.return;
+              }
+              if (null === ds) throw Error(o(160));
+              ms(i, l, a), (ds = null), (ps = !1);
+              var c = a.alternate;
+              null !== c && (c.return = null), (a.return = null);
+            } catch (u) {
+              Cc(a, t, u);
+            }
+          }
+        if (12854 & t.subtreeFlags) for (t = t.child; null !== t; ) ys(t, e), (t = t.sibling);
+      }
+      function ys(e, t) {
+        var n = e.alternate,
+          r = e.flags;
+        switch (e.tag) {
+          case 0:
+          case 11:
+          case 14:
+          case 15:
+            if ((gs(t, e), bs(e), 4 & r)) {
+              try {
+                rs(3, e, e.return), as(3, e);
+              } catch (g) {
+                Cc(e, e.return, g);
+              }
+              try {
+                rs(5, e, e.return);
+              } catch (g) {
+                Cc(e, e.return, g);
+              }
+            }
+            break;
+          case 1:
+            gs(t, e), bs(e), 512 & r && null !== n && es(n, n.return);
+            break;
+          case 5:
+            if ((gs(t, e), bs(e), 512 & r && null !== n && es(n, n.return), 32 & e.flags)) {
+              var a = e.stateNode;
+              try {
+                pe(a, '');
+              } catch (g) {
+                Cc(e, e.return, g);
+              }
+            }
+            if (4 & r && null != (a = e.stateNode)) {
+              var i = e.memoizedProps,
+                l = null !== n ? n.memoizedProps : i,
+                s = e.type,
+                c = e.updateQueue;
+              if (((e.updateQueue = null), null !== c))
+                try {
+                  'input' === s && 'radio' === i.type && null != i.name && Y(a, i), ve(s, l);
+                  var u = ve(s, i);
+                  for (l = 0; l < c.length; l += 2) {
+                    var d = c[l],
+                      p = c[l + 1];
+                    'style' === d
+                      ? ge(a, p)
+                      : 'dangerouslySetInnerHTML' === d
+                        ? de(a, p)
+                        : 'children' === d
+                          ? pe(a, p)
+                          : v(a, d, p, u);
+                  }
+                  switch (s) {
+                    case 'input':
+                      X(a, i);
+                      break;
+                    case 'textarea':
+                      oe(a, i);
+                      break;
+                    case 'select':
+                      var f = a._wrapperState.wasMultiple;
+                      a._wrapperState.wasMultiple = !!i.multiple;
+                      var m = i.value;
+                      null != m
+                        ? ne(a, !!i.multiple, m, !1)
+                        : f !== !!i.multiple &&
+                          (null != i.defaultValue
+                            ? ne(a, !!i.multiple, i.defaultValue, !0)
+                            : ne(a, !!i.multiple, i.multiple ? [] : '', !1));
+                  }
+                  a[fa] = i;
+                } catch (g) {
+                  Cc(e, e.return, g);
+                }
+            }
+            break;
+          case 6:
+            if ((gs(t, e), bs(e), 4 & r)) {
+              if (null === e.stateNode) throw Error(o(162));
+              (a = e.stateNode), (i = e.memoizedProps);
+              try {
+                a.nodeValue = i;
+              } catch (g) {
+                Cc(e, e.return, g);
+              }
+            }
+            break;
+          case 3:
+            if ((gs(t, e), bs(e), 4 & r && null !== n && n.memoizedState.isDehydrated))
+              try {
+                Ut(t.containerInfo);
+              } catch (g) {
+                Cc(e, e.return, g);
+              }
+            break;
+          case 4:
+          default:
+            gs(t, e), bs(e);
+            break;
+          case 13:
+            gs(t, e),
+              bs(e),
+              8192 & (a = e.child).flags &&
+                ((i = null !== a.memoizedState),
+                (a.stateNode.isHidden = i),
+                !i || (null !== a.alternate && null !== a.alternate.memoizedState) || (Us = Ye())),
+              4 & r && hs(e);
+            break;
+          case 22:
+            if (
+              ((d = null !== n && null !== n.memoizedState),
+              1 & e.mode ? ((Yl = (u = Yl) || d), gs(t, e), (Yl = u)) : gs(t, e),
+              bs(e),
+              8192 & r)
+            ) {
+              if (((u = null !== e.memoizedState), (e.stateNode.isHidden = u) && !d && 0 != (1 & e.mode)))
+                for (Jl = e, d = e.child; null !== d; ) {
+                  for (p = Jl = d; null !== Jl; ) {
+                    switch (((m = (f = Jl).child), f.tag)) {
+                      case 0:
+                      case 11:
+                      case 14:
+                      case 15:
+                        rs(4, f, f.return);
+                        break;
+                      case 1:
+                        es(f, f.return);
+                        var h = f.stateNode;
+                        if ('function' == typeof h.componentWillUnmount) {
+                          (r = f), (n = f.return);
+                          try {
+                            (t = r), (h.props = t.memoizedProps), (h.state = t.memoizedState), h.componentWillUnmount();
+                          } catch (g) {
+                            Cc(r, n, g);
+                          }
+                        }
+                        break;
+                      case 5:
+                        es(f, f.return);
+                        break;
+                      case 22:
+                        if (null !== f.memoizedState) {
+                          Ss(p);
+                          continue;
+                        }
+                    }
+                    null !== m ? ((m.return = f), (Jl = m)) : Ss(p);
+                  }
+                  d = d.sibling;
+                }
+              e: for (d = null, p = e; ; ) {
+                if (5 === p.tag) {
+                  if (null === d) {
+                    d = p;
+                    try {
+                      (a = p.stateNode),
+                        u
+                          ? 'function' == typeof (i = a.style).setProperty
+                            ? i.setProperty('display', 'none', 'important')
+                            : (i.display = 'none')
+                          : ((s = p.stateNode),
+                            (l = null != (c = p.memoizedProps.style) && c.hasOwnProperty('display') ? c.display : null),
+                            (s.style.display = he('display', l)));
+                    } catch (g) {
+                      Cc(e, e.return, g);
+                    }
+                  }
+                } else if (6 === p.tag) {
+                  if (null === d)
+                    try {
+                      p.stateNode.nodeValue = u ? '' : p.memoizedProps;
+                    } catch (g) {
+                      Cc(e, e.return, g);
+                    }
+                } else if (((22 !== p.tag && 23 !== p.tag) || null === p.memoizedState || p === e) && null !== p.child) {
+                  (p.child.return = p), (p = p.child);
+                  continue;
+                }
+                if (p === e) break e;
+                for (; null === p.sibling; ) {
+                  if (null === p.return || p.return === e) break e;
+                  d === p && (d = null), (p = p.return);
+                }
+                d === p && (d = null), (p.sibling.return = p.return), (p = p.sibling);
+              }
+            }
+            break;
+          case 19:
+            gs(t, e), bs(e), 4 & r && hs(e);
+          case 21:
+        }
+      }
+      function bs(e) {
+        var t = e.flags;
+        if (2 & t) {
+          try {
+            e: {
+              for (var n = e.return; null !== n; ) {
+                if (ls(n)) {
+                  var r = n;
+                  break e;
+                }
+                n = n.return;
+              }
+              throw Error(o(160));
+            }
+            switch (r.tag) {
+              case 5:
+                var a = r.stateNode;
+                32 & r.flags && (pe(a, ''), (r.flags &= -33)), us(e, ss(e), a);
+                break;
+              case 3:
+              case 4:
+                var i = r.stateNode.containerInfo;
+                cs(e, ss(e), i);
+                break;
+              default:
+                throw Error(o(161));
+            }
+          } catch (l) {
+            Cc(e, e.return, l);
+          }
+          e.flags &= -3;
+        }
+        4096 & t && (e.flags &= -4097);
+      }
+      function vs(e, t, n) {
+        (Jl = e), ws(e, t, n);
+      }
+      function ws(e, t, n) {
+        for (var r = 0 != (1 & e.mode); null !== Jl; ) {
+          var a = Jl,
+            o = a.child;
+          if (22 === a.tag && r) {
+            var i = null !== a.memoizedState || Kl;
+            if (!i) {
+              var l = a.alternate,
+                s = (null !== l && null !== l.memoizedState) || Yl;
+              l = Kl;
+              var c = Yl;
+              if (((Kl = i), (Yl = s) && !c))
+                for (Jl = a; null !== Jl; )
+                  (s = (i = Jl).child),
+                    22 === i.tag && null !== i.memoizedState ? xs(a) : null !== s ? ((s.return = i), (Jl = s)) : xs(a);
+              for (; null !== o; ) (Jl = o), ws(o, t, n), (o = o.sibling);
+              (Jl = a), (Kl = l), (Yl = c);
+            }
+            ks(e);
+          } else 0 != (8772 & a.subtreeFlags) && null !== o ? ((o.return = a), (Jl = o)) : ks(e);
+        }
+      }
+      function ks(e) {
+        for (; null !== Jl; ) {
+          var t = Jl;
+          if (0 != (8772 & t.flags)) {
+            var n = t.alternate;
+            try {
+              if (0 != (8772 & t.flags))
+                switch (t.tag) {
+                  case 0:
+                  case 11:
+                  case 15:
+                    Yl || as(5, t);
+                    break;
+                  case 1:
+                    var r = t.stateNode;
+                    if (4 & t.flags && !Yl)
+                      if (null === n) r.componentDidMount();
+                      else {
+                        var a = t.elementType === t.type ? n.memoizedProps : yo(t.type, n.memoizedProps);
+                        r.componentDidUpdate(a, n.memoizedState, r.__reactInternalSnapshotBeforeUpdate);
+                      }
+                    var i = t.updateQueue;
+                    null !== i && Bo(t, i, r);
+                    break;
+                  case 3:
+                    var l = t.updateQueue;
+                    if (null !== l) {
+                      if (((n = null), null !== t.child))
+                        switch (t.child.tag) {
+                          case 5:
+                          case 1:
+                            n = t.child.stateNode;
+                        }
+                      Bo(t, l, n);
+                    }
+                    break;
+                  case 5:
+                    var s = t.stateNode;
+                    if (null === n && 4 & t.flags) {
+                      n = s;
+                      var c = t.memoizedProps;
+                      switch (t.type) {
+                        case 'button':
+                        case 'input':
+                        case 'select':
+                        case 'textarea':
+                          c.autoFocus && n.focus();
+                          break;
+                        case 'img':
+                          c.src && (n.src = c.src);
+                      }
+                    }
+                    break;
+                  case 6:
+                  case 4:
+                  case 12:
+                  case 19:
+                  case 17:
+                  case 21:
+                  case 22:
+                  case 23:
+                  case 25:
+                    break;
+                  case 13:
+                    if (null === t.memoizedState) {
+                      var u = t.alternate;
+                      if (null !== u) {
+                        var d = u.memoizedState;
+                        if (null !== d) {
+                          var p = d.dehydrated;
+                          null !== p && Ut(p);
+                        }
+                      }
+                    }
+                    break;
+                  default:
+                    throw Error(o(163));
+                }
+              Yl || (512 & t.flags && os(t));
+            } catch (f) {
+              Cc(t, t.return, f);
+            }
+          }
+          if (t === e) {
+            Jl = null;
+            break;
+          }
+          if (null !== (n = t.sibling)) {
+            (n.return = t.return), (Jl = n);
+            break;
+          }
+          Jl = t.return;
+        }
+      }
+      function Ss(e) {
+        for (; null !== Jl; ) {
+          var t = Jl;
+          if (t === e) {
+            Jl = null;
+            break;
+          }
+          var n = t.sibling;
+          if (null !== n) {
+            (n.return = t.return), (Jl = n);
+            break;
+          }
+          Jl = t.return;
+        }
+      }
+      function xs(e) {
+        for (; null !== Jl; ) {
+          var t = Jl;
+          try {
+            switch (t.tag) {
+              case 0:
+              case 11:
+              case 15:
+                var n = t.return;
+                try {
+                  as(4, t);
+                } catch (s) {
+                  Cc(t, n, s);
+                }
+                break;
+              case 1:
+                var r = t.stateNode;
+                if ('function' == typeof r.componentDidMount) {
+                  var a = t.return;
+                  try {
+                    r.componentDidMount();
+                  } catch (s) {
+                    Cc(t, a, s);
+                  }
+                }
+                var o = t.return;
+                try {
+                  os(t);
+                } catch (s) {
+                  Cc(t, o, s);
+                }
+                break;
+              case 5:
+                var i = t.return;
+                try {
+                  os(t);
+                } catch (s) {
+                  Cc(t, i, s);
+                }
+            }
+          } catch (s) {
+            Cc(t, t.return, s);
+          }
+          if (t === e) {
+            Jl = null;
+            break;
+          }
+          var l = t.sibling;
+          if (null !== l) {
+            (l.return = t.return), (Jl = l);
+            break;
+          }
+          Jl = t.return;
+        }
+      }
+      var Es,
+        Cs = Math.ceil,
+        _s = w.ReactCurrentDispatcher,
+        Ps = w.ReactCurrentOwner,
+        Ts = w.ReactCurrentBatchConfig,
+        As = 0,
+        Ls = null,
+        js = null,
+        Rs = 0,
+        Is = 0,
+        Ns = Ea(0),
+        Os = 0,
+        Ds = null,
+        Fs = 0,
+        Ms = 0,
+        Bs = 0,
+        zs = null,
+        $s = null,
+        Us = 0,
+        Hs = 1 / 0,
+        qs = null,
+        Zs = !1,
+        Gs = null,
+        Ws = null,
+        Vs = !1,
+        Qs = null,
+        Ks = 0,
+        Ys = 0,
+        Xs = null,
+        Js = -1,
+        ec = 0;
+      function tc() {
+        return 0 != (6 & As) ? Ye() : -1 !== Js ? Js : (Js = Ye());
+      }
+      function nc(e) {
+        return 0 == (1 & e.mode)
+          ? 1
+          : 0 != (2 & As) && 0 !== Rs
+            ? Rs & -Rs
+            : null !== go.transition
+              ? (0 === ec && (ec = ht()), ec)
+              : 0 !== (e = vt)
+                ? e
+                : (e = void 0 === (e = window.event) ? 16 : Kt(e.type));
+      }
+      function rc(e, t, n, r) {
+        if (50 < Ys) throw ((Ys = 0), (Xs = null), Error(o(185)));
+        yt(e, n, r),
+          (0 != (2 & As) && e === Ls) ||
+            (e === Ls && (0 == (2 & As) && (Ms |= n), 4 === Os && sc(e, Rs)),
+            ac(e, r),
+            1 === n && 0 === As && 0 == (1 & t.mode) && ((Hs = Ye() + 500), Ba && Ua()));
+      }
+      function ac(e, t) {
+        var n = e.callbackNode;
+        !(function (e, t) {
+          for (var n = e.suspendedLanes, r = e.pingedLanes, a = e.expirationTimes, o = e.pendingLanes; 0 < o; ) {
+            var i = 31 - it(o),
+              l = 1 << i,
+              s = a[i];
+            -1 === s ? (0 != (l & n) && 0 == (l & r)) || (a[i] = ft(l, t)) : s <= t && (e.expiredLanes |= l), (o &= ~l);
+          }
+        })(e, t);
+        var r = pt(e, e === Ls ? Rs : 0);
+        if (0 === r) null !== n && Ve(n), (e.callbackNode = null), (e.callbackPriority = 0);
+        else if (((t = r & -r), e.callbackPriority !== t)) {
+          if ((null != n && Ve(n), 1 === t))
+            0 === e.tag
+              ? (function (e) {
+                  (Ba = !0), $a(e);
+                })(cc.bind(null, e))
+              : $a(cc.bind(null, e)),
+              ia(function () {
+                0 == (6 & As) && Ua();
+              }),
+              (n = null);
+          else {
+            switch (wt(r)) {
+              case 1:
+                n = Je;
+                break;
+              case 4:
+                n = et;
+                break;
+              case 16:
+              default:
+                n = tt;
+                break;
+              case 536870912:
+                n = rt;
+            }
+            n = Lc(n, oc.bind(null, e));
+          }
+          (e.callbackPriority = t), (e.callbackNode = n);
+        }
+      }
+      function oc(e, t) {
+        if (((Js = -1), (ec = 0), 0 != (6 & As))) throw Error(o(327));
+        var n = e.callbackNode;
+        if (xc() && e.callbackNode !== n) return null;
+        var r = pt(e, e === Ls ? Rs : 0);
+        if (0 === r) return null;
+        if (0 != (30 & r) || 0 != (r & e.expiredLanes) || t) t = yc(e, r);
+        else {
+          t = r;
+          var a = As;
+          As |= 2;
+          var i = hc();
+          for ((Ls === e && Rs === t) || ((qs = null), (Hs = Ye() + 500), fc(e, t)); ; )
+            try {
+              vc();
+              break;
+            } catch (s) {
+              mc(e, s);
+            }
+          So(), (_s.current = i), (As = a), null !== js ? (t = 0) : ((Ls = null), (Rs = 0), (t = Os));
+        }
+        if (0 !== t) {
+          if ((2 === t && 0 !== (a = mt(e)) && ((r = a), (t = ic(e, a))), 1 === t))
+            throw ((n = Ds), fc(e, 0), sc(e, r), ac(e, Ye()), n);
+          if (6 === t) sc(e, r);
+          else {
+            if (
+              ((a = e.current.alternate),
+              0 == (30 & r) &&
+                !(function (e) {
+                  for (var t = e; ; ) {
+                    if (16384 & t.flags) {
+                      var n = t.updateQueue;
+                      if (null !== n && null !== (n = n.stores))
+                        for (var r = 0; r < n.length; r++) {
+                          var a = n[r],
+                            o = a.getSnapshot;
+                          a = a.value;
+                          try {
+                            if (!lr(o(), a)) return !1;
+                          } catch (l) {
+                            return !1;
+                          }
+                        }
+                    }
+                    if (((n = t.child), 16384 & t.subtreeFlags && null !== n)) (n.return = t), (t = n);
+                    else {
+                      if (t === e) break;
+                      for (; null === t.sibling; ) {
+                        if (null === t.return || t.return === e) return !0;
+                        t = t.return;
+                      }
+                      (t.sibling.return = t.return), (t = t.sibling);
+                    }
+                  }
+                  return !0;
+                })(a) &&
+                (2 === (t = yc(e, r)) && 0 !== (i = mt(e)) && ((r = i), (t = ic(e, i))), 1 === t))
+            )
+              throw ((n = Ds), fc(e, 0), sc(e, r), ac(e, Ye()), n);
+            switch (((e.finishedWork = a), (e.finishedLanes = r), t)) {
+              case 0:
+              case 1:
+                throw Error(o(345));
+              case 2:
+              case 5:
+                Sc(e, $s, qs);
+                break;
+              case 3:
+                if ((sc(e, r), (130023424 & r) === r && 10 < (t = Us + 500 - Ye()))) {
+                  if (0 !== pt(e, 0)) break;
+                  if (((a = e.suspendedLanes) & r) !== r) {
+                    tc(), (e.pingedLanes |= e.suspendedLanes & a);
+                    break;
+                  }
+                  e.timeoutHandle = ra(Sc.bind(null, e, $s, qs), t);
+                  break;
+                }
+                Sc(e, $s, qs);
+                break;
+              case 4:
+                if ((sc(e, r), (4194240 & r) === r)) break;
+                for (t = e.eventTimes, a = -1; 0 < r; ) {
+                  var l = 31 - it(r);
+                  (i = 1 << l), (l = t[l]) > a && (a = l), (r &= ~i);
+                }
+                if (
+                  ((r = a),
+                  10 <
+                    (r =
+                      (120 > (r = Ye() - r)
+                        ? 120
+                        : 480 > r
+                          ? 480
+                          : 1080 > r
+                            ? 1080
+                            : 1920 > r
+                              ? 1920
+                              : 3e3 > r
+                                ? 3e3
+                                : 4320 > r
+                                  ? 4320
+                                  : 1960 * Cs(r / 1960)) - r))
+                ) {
+                  e.timeoutHandle = ra(Sc.bind(null, e, $s, qs), r);
+                  break;
+                }
+                Sc(e, $s, qs);
+                break;
+              default:
+                throw Error(o(329));
+            }
+          }
+        }
+        return ac(e, Ye()), e.callbackNode === n ? oc.bind(null, e) : null;
+      }
+      function ic(e, t) {
+        var n = zs;
+        return (
+          e.current.memoizedState.isDehydrated && (fc(e, t).flags |= 256),
+          2 !== (e = yc(e, t)) && ((t = $s), ($s = n), null !== t && lc(t)),
+          e
+        );
+      }
+      function lc(e) {
+        null === $s ? ($s = e) : $s.push.apply($s, e);
+      }
+      function sc(e, t) {
+        for (t &= ~Bs, t &= ~Ms, e.suspendedLanes |= t, e.pingedLanes &= ~t, e = e.expirationTimes; 0 < t; ) {
+          var n = 31 - it(t),
+            r = 1 << n;
+          (e[n] = -1), (t &= ~r);
+        }
+      }
+      function cc(e) {
+        if (0 != (6 & As)) throw Error(o(327));
+        xc();
+        var t = pt(e, 0);
+        if (0 == (1 & t)) return ac(e, Ye()), null;
+        var n = yc(e, t);
+        if (0 !== e.tag && 2 === n) {
+          var r = mt(e);
+          0 !== r && ((t = r), (n = ic(e, r)));
+        }
+        if (1 === n) throw ((n = Ds), fc(e, 0), sc(e, t), ac(e, Ye()), n);
+        if (6 === n) throw Error(o(345));
+        return (e.finishedWork = e.current.alternate), (e.finishedLanes = t), Sc(e, $s, qs), ac(e, Ye()), null;
+      }
+      function uc(e, t) {
+        var n = As;
+        As |= 1;
+        try {
+          return e(t);
+        } finally {
+          0 === (As = n) && ((Hs = Ye() + 500), Ba && Ua());
+        }
+      }
+      function dc(e) {
+        null !== Qs && 0 === Qs.tag && 0 == (6 & As) && xc();
+        var t = As;
+        As |= 1;
+        var n = Ts.transition,
+          r = vt;
+        try {
+          if (((Ts.transition = null), (vt = 1), e)) return e();
+        } finally {
+          (vt = r), (Ts.transition = n), 0 == (6 & (As = t)) && Ua();
+        }
+      }
+      function pc() {
+        (Is = Ns.current), Ca(Ns);
+      }
+      function fc(e, t) {
+        (e.finishedWork = null), (e.finishedLanes = 0);
+        var n = e.timeoutHandle;
+        if ((-1 !== n && ((e.timeoutHandle = -1), aa(n)), null !== js))
+          for (n = js.return; null !== n; ) {
+            var r = n;
+            switch ((to(r), r.tag)) {
+              case 1:
+                null != (r = r.type.childContextTypes) && Ia();
+                break;
+              case 3:
+                oi(), Ca(Aa), Ca(Ta), di();
+                break;
+              case 5:
+                li(r);
+                break;
+              case 4:
+                oi();
+                break;
+              case 13:
+              case 19:
+                Ca(si);
+                break;
+              case 10:
+                xo(r.type._context);
+                break;
+              case 22:
+              case 23:
+                pc();
+            }
+            n = n.return;
+          }
+        if (
+          ((Ls = e),
+          (js = e = Nc(e.current, null)),
+          (Rs = Is = t),
+          (Os = 0),
+          (Ds = null),
+          (Bs = Ms = Fs = 0),
+          ($s = zs = null),
+          null !== Po)
+        ) {
+          for (t = 0; t < Po.length; t++)
+            if (null !== (r = (n = Po[t]).interleaved)) {
+              n.interleaved = null;
+              var a = r.next,
+                o = n.pending;
+              if (null !== o) {
+                var i = o.next;
+                (o.next = a), (r.next = i);
+              }
+              n.pending = r;
+            }
+          Po = null;
+        }
+        return e;
+      }
+      function mc(e, t) {
+        for (;;) {
+          var n = js;
+          try {
+            if ((So(), (pi.current = il), bi)) {
+              for (var r = hi.memoizedState; null !== r; ) {
+                var a = r.queue;
+                null !== a && (a.pending = null), (r = r.next);
+              }
+              bi = !1;
+            }
+            if (((mi = 0), (yi = gi = hi = null), (vi = !1), (wi = 0), (Ps.current = null), null === n || null === n.return)) {
+              (Os = 1), (Ds = t), (js = null);
+              break;
+            }
+            e: {
+              var i = e,
+                l = n.return,
+                s = n,
+                c = t;
+              if (((t = Rs), (s.flags |= 32768), null !== c && 'object' == typeof c && 'function' == typeof c.then)) {
+                var u = c,
+                  d = s,
+                  p = d.tag;
+                if (0 == (1 & d.mode) && (0 === p || 11 === p || 15 === p)) {
+                  var f = d.alternate;
+                  f
+                    ? ((d.updateQueue = f.updateQueue), (d.memoizedState = f.memoizedState), (d.lanes = f.lanes))
+                    : ((d.updateQueue = null), (d.memoizedState = null));
+                }
+                var m = yl(l);
+                if (null !== m) {
+                  (m.flags &= -257), bl(m, l, s, 0, t), 1 & m.mode && gl(i, u, t), (c = u);
+                  var h = (t = m).updateQueue;
+                  if (null === h) {
+                    var g = new Set();
+                    g.add(c), (t.updateQueue = g);
+                  } else h.add(c);
+                  break e;
+                }
+                if (0 == (1 & t)) {
+                  gl(i, u, t), gc();
+                  break e;
+                }
+                c = Error(o(426));
+              } else if (ao && 1 & s.mode) {
+                var y = yl(l);
+                if (null !== y) {
+                  0 == (65536 & y.flags) && (y.flags |= 256), bl(y, l, s, 0, t), ho(ul(c, s));
+                  break e;
+                }
+              }
+              (i = c = ul(c, s)), 4 !== Os && (Os = 2), null === zs ? (zs = [i]) : zs.push(i), (i = l);
+              do {
+                switch (i.tag) {
+                  case 3:
+                    (i.flags |= 65536), (t &= -t), (i.lanes |= t), Fo(i, ml(0, c, t));
+                    break e;
+                  case 1:
+                    s = c;
+                    var b = i.type,
+                      v = i.stateNode;
+                    if (
+                      0 == (128 & i.flags) &&
+                      ('function' == typeof b.getDerivedStateFromError ||
+                        (null !== v && 'function' == typeof v.componentDidCatch && (null === Ws || !Ws.has(v))))
+                    ) {
+                      (i.flags |= 65536), (t &= -t), (i.lanes |= t), Fo(i, hl(i, s, t));
+                      break e;
+                    }
+                }
+                i = i.return;
+              } while (null !== i);
+            }
+            kc(n);
+          } catch (w) {
+            (t = w), js === n && null !== n && (js = n = n.return);
+            continue;
+          }
+          break;
+        }
+      }
+      function hc() {
+        var e = _s.current;
+        return (_s.current = il), null === e ? il : e;
+      }
+      function gc() {
+        (0 !== Os && 3 !== Os && 2 !== Os) || (Os = 4),
+          null === Ls || (0 == (268435455 & Fs) && 0 == (268435455 & Ms)) || sc(Ls, Rs);
+      }
+      function yc(e, t) {
+        var n = As;
+        As |= 2;
+        var r = hc();
+        for ((Ls === e && Rs === t) || ((qs = null), fc(e, t)); ; )
+          try {
+            bc();
+            break;
+          } catch (a) {
+            mc(e, a);
+          }
+        if ((So(), (As = n), (_s.current = r), null !== js)) throw Error(o(261));
+        return (Ls = null), (Rs = 0), Os;
+      }
+      function bc() {
+        for (; null !== js; ) wc(js);
+      }
+      function vc() {
+        for (; null !== js && !Qe(); ) wc(js);
+      }
+      function wc(e) {
+        var t = Es(e.alternate, e, Is);
+        (e.memoizedProps = e.pendingProps), null === t ? kc(e) : (js = t), (Ps.current = null);
+      }
+      function kc(e) {
+        var t = e;
+        do {
+          var n = t.alternate;
+          if (((e = t.return), 0 == (32768 & t.flags))) {
+            if (null !== (n = Vl(n, t, Is))) return void (js = n);
+          } else {
+            if (null !== (n = Ql(n, t))) return (n.flags &= 32767), void (js = n);
+            if (null === e) return (Os = 6), void (js = null);
+            (e.flags |= 32768), (e.subtreeFlags = 0), (e.deletions = null);
+          }
+          if (null !== (t = t.sibling)) return void (js = t);
+          js = t = e;
+        } while (null !== t);
+        0 === Os && (Os = 5);
+      }
+      function Sc(e, t, n) {
+        var r = vt,
+          a = Ts.transition;
+        try {
+          (Ts.transition = null),
+            (vt = 1),
+            (function (e, t, n, r) {
+              do {
+                xc();
+              } while (null !== Qs);
+              if (0 != (6 & As)) throw Error(o(327));
+              n = e.finishedWork;
+              var a = e.finishedLanes;
+              if (null === n) return null;
+              if (((e.finishedWork = null), (e.finishedLanes = 0), n === e.current)) throw Error(o(177));
+              (e.callbackNode = null), (e.callbackPriority = 0);
+              var i = n.lanes | n.childLanes;
+              if (
+                ((function (e, t) {
+                  var n = e.pendingLanes & ~t;
+                  (e.pendingLanes = t),
+                    (e.suspendedLanes = 0),
+                    (e.pingedLanes = 0),
+                    (e.expiredLanes &= t),
+                    (e.mutableReadLanes &= t),
+                    (e.entangledLanes &= t),
+                    (t = e.entanglements);
+                  var r = e.eventTimes;
+                  for (e = e.expirationTimes; 0 < n; ) {
+                    var a = 31 - it(n),
+                      o = 1 << a;
+                    (t[a] = 0), (r[a] = -1), (e[a] = -1), (n &= ~o);
+                  }
+                })(e, i),
+                e === Ls && ((js = Ls = null), (Rs = 0)),
+                (0 == (2064 & n.subtreeFlags) && 0 == (2064 & n.flags)) ||
+                  Vs ||
+                  ((Vs = !0),
+                  Lc(tt, function () {
+                    return xc(), null;
+                  })),
+                (i = 0 != (15990 & n.flags)),
+                0 != (15990 & n.subtreeFlags) || i)
+              ) {
+                (i = Ts.transition), (Ts.transition = null);
+                var l = vt;
+                vt = 1;
+                var s = As;
+                (As |= 4),
+                  (Ps.current = null),
+                  (function (e, t) {
+                    if (((ea = qt), fr((e = pr())))) {
+                      if ('selectionStart' in e) var n = { start: e.selectionStart, end: e.selectionEnd };
+                      else
+                        e: {
+                          var r = (n = ((n = e.ownerDocument) && n.defaultView) || window).getSelection && n.getSelection();
+                          if (r && 0 !== r.rangeCount) {
+                            n = r.anchorNode;
+                            var a = r.anchorOffset,
+                              i = r.focusNode;
+                            r = r.focusOffset;
+                            try {
+                              n.nodeType, i.nodeType;
+                            } catch (k) {
+                              n = null;
+                              break e;
+                            }
+                            var l = 0,
+                              s = -1,
+                              c = -1,
+                              u = 0,
+                              d = 0,
+                              p = e,
+                              f = null;
+                            t: for (;;) {
+                              for (
+                                var m;
+                                p !== n || (0 !== a && 3 !== p.nodeType) || (s = l + a),
+                                  p !== i || (0 !== r && 3 !== p.nodeType) || (c = l + r),
+                                  3 === p.nodeType && (l += p.nodeValue.length),
+                                  null !== (m = p.firstChild);
+
+                              )
+                                (f = p), (p = m);
+                              for (;;) {
+                                if (p === e) break t;
+                                if (
+                                  (f === n && ++u === a && (s = l), f === i && ++d === r && (c = l), null !== (m = p.nextSibling))
+                                )
+                                  break;
+                                f = (p = f).parentNode;
+                              }
+                              p = m;
+                            }
+                            n = -1 === s || -1 === c ? null : { start: s, end: c };
+                          } else n = null;
+                        }
+                      n = n || { start: 0, end: 0 };
+                    } else n = null;
+                    for (ta = { focusedElem: e, selectionRange: n }, qt = !1, Jl = t; null !== Jl; )
+                      if (((e = (t = Jl).child), 0 != (1028 & t.subtreeFlags) && null !== e)) (e.return = t), (Jl = e);
+                      else
+                        for (; null !== Jl; ) {
+                          t = Jl;
+                          try {
+                            var h = t.alternate;
+                            if (0 != (1024 & t.flags))
+                              switch (t.tag) {
+                                case 0:
+                                case 11:
+                                case 15:
+                                case 5:
+                                case 6:
+                                case 4:
+                                case 17:
+                                  break;
+                                case 1:
+                                  if (null !== h) {
+                                    var g = h.memoizedProps,
+                                      y = h.memoizedState,
+                                      b = t.stateNode,
+                                      v = b.getSnapshotBeforeUpdate(t.elementType === t.type ? g : yo(t.type, g), y);
+                                    b.__reactInternalSnapshotBeforeUpdate = v;
+                                  }
+                                  break;
+                                case 3:
+                                  var w = t.stateNode.containerInfo;
+                                  1 === w.nodeType
+                                    ? (w.textContent = '')
+                                    : 9 === w.nodeType && w.documentElement && w.removeChild(w.documentElement);
+                                  break;
+                                default:
+                                  throw Error(o(163));
+                              }
+                          } catch (k) {
+                            Cc(t, t.return, k);
+                          }
+                          if (null !== (e = t.sibling)) {
+                            (e.return = t.return), (Jl = e);
+                            break;
+                          }
+                          Jl = t.return;
+                        }
+                    (h = ns), (ns = !1);
+                  })(e, n),
+                  ys(n, e),
+                  mr(ta),
+                  (qt = !!ea),
+                  (ta = ea = null),
+                  (e.current = n),
+                  vs(n, e, a),
+                  Ke(),
+                  (As = s),
+                  (vt = l),
+                  (Ts.transition = i);
+              } else e.current = n;
+              if (
+                (Vs && ((Vs = !1), (Qs = e), (Ks = a)),
+                (i = e.pendingLanes),
+                0 === i && (Ws = null),
+                (function (e) {
+                  if (ot && 'function' == typeof ot.onCommitFiberRoot)
+                    try {
+                      ot.onCommitFiberRoot(at, e, void 0, 128 == (128 & e.current.flags));
+                    } catch (t) {}
+                })(n.stateNode),
+                ac(e, Ye()),
+                null !== t)
+              )
+                for (r = e.onRecoverableError, n = 0; n < t.length; n++)
+                  (a = t[n]), r(a.value, { componentStack: a.stack, digest: a.digest });
+              if (Zs) throw ((Zs = !1), (e = Gs), (Gs = null), e);
+              0 != (1 & Ks) && 0 !== e.tag && xc(),
+                (i = e.pendingLanes),
+                0 != (1 & i) ? (e === Xs ? Ys++ : ((Ys = 0), (Xs = e))) : (Ys = 0),
+                Ua();
+            })(e, t, n, r);
+        } finally {
+          (Ts.transition = a), (vt = r);
+        }
+        return null;
+      }
+      function xc() {
+        if (null !== Qs) {
+          var e = wt(Ks),
+            t = Ts.transition,
+            n = vt;
+          try {
+            if (((Ts.transition = null), (vt = 16 > e ? 16 : e), null === Qs)) var r = !1;
+            else {
+              if (((e = Qs), (Qs = null), (Ks = 0), 0 != (6 & As))) throw Error(o(331));
+              var a = As;
+              for (As |= 4, Jl = e.current; null !== Jl; ) {
+                var i = Jl,
+                  l = i.child;
+                if (0 != (16 & Jl.flags)) {
+                  var s = i.deletions;
+                  if (null !== s) {
+                    for (var c = 0; c < s.length; c++) {
+                      var u = s[c];
+                      for (Jl = u; null !== Jl; ) {
+                        var d = Jl;
+                        switch (d.tag) {
+                          case 0:
+                          case 11:
+                          case 15:
+                            rs(8, d, i);
+                        }
+                        var p = d.child;
+                        if (null !== p) (p.return = d), (Jl = p);
+                        else
+                          for (; null !== Jl; ) {
+                            var f = (d = Jl).sibling,
+                              m = d.return;
+                            if ((is(d), d === u)) {
+                              Jl = null;
+                              break;
+                            }
+                            if (null !== f) {
+                              (f.return = m), (Jl = f);
+                              break;
+                            }
+                            Jl = m;
+                          }
+                      }
+                    }
+                    var h = i.alternate;
+                    if (null !== h) {
+                      var g = h.child;
+                      if (null !== g) {
+                        h.child = null;
+                        do {
+                          var y = g.sibling;
+                          (g.sibling = null), (g = y);
+                        } while (null !== g);
+                      }
+                    }
+                    Jl = i;
+                  }
+                }
+                if (0 != (2064 & i.subtreeFlags) && null !== l) (l.return = i), (Jl = l);
+                else
+                  e: for (; null !== Jl; ) {
+                    if (0 != (2048 & (i = Jl).flags))
+                      switch (i.tag) {
+                        case 0:
+                        case 11:
+                        case 15:
+                          rs(9, i, i.return);
+                      }
+                    var b = i.sibling;
+                    if (null !== b) {
+                      (b.return = i.return), (Jl = b);
+                      break e;
+                    }
+                    Jl = i.return;
+                  }
+              }
+              var v = e.current;
+              for (Jl = v; null !== Jl; ) {
+                var w = (l = Jl).child;
+                if (0 != (2064 & l.subtreeFlags) && null !== w) (w.return = l), (Jl = w);
+                else
+                  e: for (l = v; null !== Jl; ) {
+                    if (0 != (2048 & (s = Jl).flags))
+                      try {
+                        switch (s.tag) {
+                          case 0:
+                          case 11:
+                          case 15:
+                            as(9, s);
+                        }
+                      } catch (S) {
+                        Cc(s, s.return, S);
+                      }
+                    if (s === l) {
+                      Jl = null;
+                      break e;
+                    }
+                    var k = s.sibling;
+                    if (null !== k) {
+                      (k.return = s.return), (Jl = k);
+                      break e;
+                    }
+                    Jl = s.return;
+                  }
+              }
+              if (((As = a), Ua(), ot && 'function' == typeof ot.onPostCommitFiberRoot))
+                try {
+                  ot.onPostCommitFiberRoot(at, e);
+                } catch (S) {}
+              r = !0;
+            }
+            return r;
+          } finally {
+            (vt = n), (Ts.transition = t);
+          }
+        }
+        return !1;
+      }
+      function Ec(e, t, n) {
+        (e = Oo(e, (t = ml(0, (t = ul(n, t)), 1)), 1)), (t = tc()), null !== e && (yt(e, 1, t), ac(e, t));
+      }
+      function Cc(e, t, n) {
+        if (3 === e.tag) Ec(e, e, n);
+        else
+          for (; null !== t; ) {
+            if (3 === t.tag) {
+              Ec(t, e, n);
+              break;
+            }
+            if (1 === t.tag) {
+              var r = t.stateNode;
+              if (
+                'function' == typeof t.type.getDerivedStateFromError ||
+                ('function' == typeof r.componentDidCatch && (null === Ws || !Ws.has(r)))
+              ) {
+                (t = Oo(t, (e = hl(t, (e = ul(n, e)), 1)), 1)), (e = tc()), null !== t && (yt(t, 1, e), ac(t, e));
+                break;
+              }
+            }
+            t = t.return;
+          }
+      }
+      function _c(e, t, n) {
+        var r = e.pingCache;
+        null !== r && r.delete(t),
+          (t = tc()),
+          (e.pingedLanes |= e.suspendedLanes & n),
+          Ls === e &&
+            (Rs & n) === n &&
+            (4 === Os || (3 === Os && (130023424 & Rs) === Rs && 500 > Ye() - Us) ? fc(e, 0) : (Bs |= n)),
+          ac(e, t);
+      }
+      function Pc(e, t) {
+        0 === t && (0 == (1 & e.mode) ? (t = 1) : ((t = ut), 0 == (130023424 & (ut <<= 1)) && (ut = 4194304)));
+        var n = tc();
+        null !== (e = Lo(e, t)) && (yt(e, t, n), ac(e, n));
+      }
+      function Tc(e) {
+        var t = e.memoizedState,
+          n = 0;
+        null !== t && (n = t.retryLane), Pc(e, n);
+      }
+      function Ac(e, t) {
+        var n = 0;
+        switch (e.tag) {
+          case 13:
+            var r = e.stateNode,
+              a = e.memoizedState;
+            null !== a && (n = a.retryLane);
+            break;
+          case 19:
+            r = e.stateNode;
+            break;
+          default:
+            throw Error(o(314));
+        }
+        null !== r && r.delete(t), Pc(e, n);
+      }
+      function Lc(e, t) {
+        return We(e, t);
+      }
+      function jc(e, t, n, r) {
+        (this.tag = e),
+          (this.key = n),
+          (this.sibling = this.child = this.return = this.stateNode = this.type = this.elementType = null),
+          (this.index = 0),
+          (this.ref = null),
+          (this.pendingProps = t),
+          (this.dependencies = this.memoizedState = this.updateQueue = this.memoizedProps = null),
+          (this.mode = r),
+          (this.subtreeFlags = this.flags = 0),
+          (this.deletions = null),
+          (this.childLanes = this.lanes = 0),
+          (this.alternate = null);
+      }
+      function Rc(e, t, n, r) {
+        return new jc(e, t, n, r);
+      }
+      function Ic(e) {
+        return !(!(e = e.prototype) || !e.isReactComponent);
+      }
+      function Nc(e, t) {
+        var n = e.alternate;
+        return (
+          null === n
+            ? (((n = Rc(e.tag, t, e.key, e.mode)).elementType = e.elementType),
+              (n.type = e.type),
+              (n.stateNode = e.stateNode),
+              (n.alternate = e),
+              (e.alternate = n))
+            : ((n.pendingProps = t), (n.type = e.type), (n.flags = 0), (n.subtreeFlags = 0), (n.deletions = null)),
+          (n.flags = 14680064 & e.flags),
+          (n.childLanes = e.childLanes),
+          (n.lanes = e.lanes),
+          (n.child = e.child),
+          (n.memoizedProps = e.memoizedProps),
+          (n.memoizedState = e.memoizedState),
+          (n.updateQueue = e.updateQueue),
+          (t = e.dependencies),
+          (n.dependencies = null === t ? null : { lanes: t.lanes, firstContext: t.firstContext }),
+          (n.sibling = e.sibling),
+          (n.index = e.index),
+          (n.ref = e.ref),
+          n
+        );
+      }
+      function Oc(e, t, n, r, a, i) {
+        var l = 2;
+        if (((r = e), 'function' == typeof e)) Ic(e) && (l = 1);
+        else if ('string' == typeof e) l = 5;
+        else
+          e: switch (e) {
+            case x:
+              return Dc(n.children, a, i, t);
+            case E:
+              (l = 8), (a |= 8);
+              break;
+            case C:
+              return ((e = Rc(12, n, t, 2 | a)).elementType = C), (e.lanes = i), e;
+            case A:
+              return ((e = Rc(13, n, t, a)).elementType = A), (e.lanes = i), e;
+            case L:
+              return ((e = Rc(19, n, t, a)).elementType = L), (e.lanes = i), e;
+            case I:
+              return Fc(n, a, i, t);
+            default:
+              if ('object' == typeof e && null !== e)
+                switch (e.$$typeof) {
+                  case _:
+                    l = 10;
+                    break e;
+                  case P:
+                    l = 9;
+                    break e;
+                  case T:
+                    l = 11;
+                    break e;
+                  case j:
+                    l = 14;
+                    break e;
+                  case R:
+                    (l = 16), (r = null);
+                    break e;
+                }
+              throw Error(o(130, null == e ? e : typeof e, ''));
+          }
+        return ((t = Rc(l, n, t, a)).elementType = e), (t.type = r), (t.lanes = i), t;
+      }
+      function Dc(e, t, n, r) {
+        return ((e = Rc(7, e, r, t)).lanes = n), e;
+      }
+      function Fc(e, t, n, r) {
+        return ((e = Rc(22, e, r, t)).elementType = I), (e.lanes = n), (e.stateNode = { isHidden: !1 }), e;
+      }
+      function Mc(e, t, n) {
+        return ((e = Rc(6, e, null, t)).lanes = n), e;
+      }
+      function Bc(e, t, n) {
+        return (
+          ((t = Rc(4, null !== e.children ? e.children : [], e.key, t)).lanes = n),
+          (t.stateNode = { containerInfo: e.containerInfo, pendingChildren: null, implementation: e.implementation }),
+          t
+        );
+      }
+      function zc(e, t, n, r, a) {
+        (this.tag = t),
+          (this.containerInfo = e),
+          (this.finishedWork = this.pingCache = this.current = this.pendingChildren = null),
+          (this.timeoutHandle = -1),
+          (this.callbackNode = this.pendingContext = this.context = null),
+          (this.callbackPriority = 0),
+          (this.eventTimes = gt(0)),
+          (this.expirationTimes = gt(-1)),
+          (this.entangledLanes =
+            this.finishedLanes =
+            this.mutableReadLanes =
+            this.expiredLanes =
+            this.pingedLanes =
+            this.suspendedLanes =
+            this.pendingLanes =
+              0),
+          (this.entanglements = gt(0)),
+          (this.identifierPrefix = r),
+          (this.onRecoverableError = a),
+          (this.mutableSourceEagerHydrationData = null);
+      }
+      function $c(e, t, n, r, a, o, i, l, s) {
+        return (
+          (e = new zc(e, t, n, l, s)),
+          1 === t ? ((t = 1), !0 === o && (t |= 8)) : (t = 0),
+          (o = Rc(3, null, null, t)),
+          (e.current = o),
+          (o.stateNode = e),
+          (o.memoizedState = { element: r, isDehydrated: n, cache: null, transitions: null, pendingSuspenseBoundaries: null }),
+          Ro(o),
+          e
+        );
+      }
+      function Uc(e) {
+        if (!e) return Pa;
+        e: {
+          if (Ue((e = e._reactInternals)) !== e || 1 !== e.tag) throw Error(o(170));
+          var t = e;
+          do {
+            switch (t.tag) {
+              case 3:
+                t = t.stateNode.context;
+                break e;
+              case 1:
+                if (Ra(t.type)) {
+                  t = t.stateNode.__reactInternalMemoizedMergedChildContext;
+                  break e;
+                }
+            }
+            t = t.return;
+          } while (null !== t);
+          throw Error(o(171));
+        }
+        if (1 === e.tag) {
+          var n = e.type;
+          if (Ra(n)) return Oa(e, n, t);
+        }
+        return t;
+      }
+      function Hc(e, t, n, r, a, o, i, l, s) {
+        return (
+          ((e = $c(n, r, !0, e, 0, o, 0, l, s)).context = Uc(null)),
+          (n = e.current),
+          ((o = No((r = tc()), (a = nc(n)))).callback = null != t ? t : null),
+          Oo(n, o, a),
+          (e.current.lanes = a),
+          yt(e, a, r),
+          ac(e, r),
+          e
+        );
+      }
+      function qc(e, t, n, r) {
+        var a = t.current,
+          o = tc(),
+          i = nc(a);
+        return (
+          (n = Uc(n)),
+          null === t.context ? (t.context = n) : (t.pendingContext = n),
+          ((t = No(o, i)).payload = { element: e }),
+          null !== (r = void 0 === r ? null : r) && (t.callback = r),
+          null !== (e = Oo(a, t, i)) && (rc(e, a, i, o), Do(e, a, i)),
+          i
+        );
+      }
+      function Zc(e) {
+        return (e = e.current).child ? (e.child.tag, e.child.stateNode) : null;
+      }
+      function Gc(e, t) {
+        if (null !== (e = e.memoizedState) && null !== e.dehydrated) {
+          var n = e.retryLane;
+          e.retryLane = 0 !== n && n < t ? n : t;
+        }
+      }
+      function Wc(e, t) {
+        Gc(e, t), (e = e.alternate) && Gc(e, t);
+      }
+      Es = function (e, t, n) {
+        if (null !== e)
+          if (e.memoizedProps !== t.pendingProps || Aa.current) wl = !0;
+          else {
+            if (0 == (e.lanes & n) && 0 == (128 & t.flags))
+              return (
+                (wl = !1),
+                (function (e, t, n) {
+                  switch (t.tag) {
+                    case 3:
+                      Ll(t), mo();
+                      break;
+                    case 5:
+                      ii(t);
+                      break;
+                    case 1:
+                      Ra(t.type) && Da(t);
+                      break;
+                    case 4:
+                      ai(t, t.stateNode.containerInfo);
+                      break;
+                    case 10:
+                      var r = t.type._context,
+                        a = t.memoizedProps.value;
+                      _a(bo, r._currentValue), (r._currentValue = a);
+                      break;
+                    case 13:
+                      if (null !== (r = t.memoizedState))
+                        return null !== r.dehydrated
+                          ? (_a(si, 1 & si.current), (t.flags |= 128), null)
+                          : 0 != (n & t.child.childLanes)
+                            ? Ml(e, t, n)
+                            : (_a(si, 1 & si.current), null !== (e = Zl(e, t, n)) ? e.sibling : null);
+                      _a(si, 1 & si.current);
+                      break;
+                    case 19:
+                      if (((r = 0 != (n & t.childLanes)), 0 != (128 & e.flags))) {
+                        if (r) return Hl(e, t, n);
+                        t.flags |= 128;
+                      }
+                      if (
+                        (null !== (a = t.memoizedState) && ((a.rendering = null), (a.tail = null), (a.lastEffect = null)),
+                        _a(si, si.current),
+                        r)
+                      )
+                        break;
+                      return null;
+                    case 22:
+                    case 23:
+                      return (t.lanes = 0), Cl(e, t, n);
+                  }
+                  return Zl(e, t, n);
+                })(e, t, n)
+              );
+            wl = 0 != (131072 & e.flags);
+          }
+        else (wl = !1), ao && 0 != (1048576 & t.flags) && Ja(t, Ga, t.index);
+        switch (((t.lanes = 0), t.tag)) {
+          case 2:
+            var r = t.type;
+            ql(e, t), (e = t.pendingProps);
+            var a = ja(t, Ta.current);
+            Co(t, n), (a = Ei(null, t, r, e, a, n));
+            var i = Ci();
+            return (
+              (t.flags |= 1),
+              'object' == typeof a && null !== a && 'function' == typeof a.render && void 0 === a.$$typeof
+                ? ((t.tag = 1),
+                  (t.memoizedState = null),
+                  (t.updateQueue = null),
+                  Ra(r) ? ((i = !0), Da(t)) : (i = !1),
+                  (t.memoizedState = null !== a.state && void 0 !== a.state ? a.state : null),
+                  Ro(t),
+                  (a.updater = Uo),
+                  (t.stateNode = a),
+                  (a._reactInternals = t),
+                  Go(t, r, e, n),
+                  (t = Al(null, t, r, !0, i, n)))
+                : ((t.tag = 0), ao && i && eo(t), kl(null, t, a, n), (t = t.child)),
+              t
+            );
+          case 16:
+            r = t.elementType;
+            e: {
+              switch (
+                (ql(e, t),
+                (e = t.pendingProps),
+                (r = (a = r._init)(r._payload)),
+                (t.type = r),
+                (a = t.tag =
+                  (function (e) {
+                    if ('function' == typeof e) return Ic(e) ? 1 : 0;
+                    if (null != e) {
+                      if ((e = e.$$typeof) === T) return 11;
+                      if (e === j) return 14;
+                    }
+                    return 2;
+                  })(r)),
+                (e = yo(r, e)),
+                a)
+              ) {
+                case 0:
+                  t = Pl(null, t, r, e, n);
+                  break e;
+                case 1:
+                  t = Tl(null, t, r, e, n);
+                  break e;
+                case 11:
+                  t = Sl(null, t, r, e, n);
+                  break e;
+                case 14:
+                  t = xl(null, t, r, yo(r.type, e), n);
+                  break e;
+              }
+              throw Error(o(306, r, ''));
+            }
+            return t;
+          case 0:
+            return (r = t.type), (a = t.pendingProps), Pl(e, t, r, (a = t.elementType === r ? a : yo(r, a)), n);
+          case 1:
+            return (r = t.type), (a = t.pendingProps), Tl(e, t, r, (a = t.elementType === r ? a : yo(r, a)), n);
+          case 3:
+            e: {
+              if ((Ll(t), null === e)) throw Error(o(387));
+              (r = t.pendingProps), (a = (i = t.memoizedState).element), Io(e, t), Mo(t, r, null, n);
+              var l = t.memoizedState;
+              if (((r = l.element), i.isDehydrated)) {
+                if (
+                  ((i = {
+                    element: r,
+                    isDehydrated: !1,
+                    cache: l.cache,
+                    pendingSuspenseBoundaries: l.pendingSuspenseBoundaries,
+                    transitions: l.transitions,
+                  }),
+                  (t.updateQueue.baseState = i),
+                  (t.memoizedState = i),
+                  256 & t.flags)
+                ) {
+                  t = jl(e, t, r, n, (a = ul(Error(o(423)), t)));
+                  break e;
+                }
+                if (r !== a) {
+                  t = jl(e, t, r, n, (a = ul(Error(o(424)), t)));
+                  break e;
+                }
+                for (
+                  ro = ca(t.stateNode.containerInfo.firstChild), no = t, ao = !0, oo = null, n = Xo(t, null, r, n), t.child = n;
+                  n;
+
+                )
+                  (n.flags = (-3 & n.flags) | 4096), (n = n.sibling);
+              } else {
+                if ((mo(), r === a)) {
+                  t = Zl(e, t, n);
+                  break e;
+                }
+                kl(e, t, r, n);
+              }
+              t = t.child;
+            }
+            return t;
+          case 5:
+            return (
+              ii(t),
+              null === e && co(t),
+              (r = t.type),
+              (a = t.pendingProps),
+              (i = null !== e ? e.memoizedProps : null),
+              (l = a.children),
+              na(r, a) ? (l = null) : null !== i && na(r, i) && (t.flags |= 32),
+              _l(e, t),
+              kl(e, t, l, n),
+              t.child
+            );
+          case 6:
+            return null === e && co(t), null;
+          case 13:
+            return Ml(e, t, n);
+          case 4:
+            return (
+              ai(t, t.stateNode.containerInfo),
+              (r = t.pendingProps),
+              null === e ? (t.child = Yo(t, null, r, n)) : kl(e, t, r, n),
+              t.child
+            );
+          case 11:
+            return (r = t.type), (a = t.pendingProps), Sl(e, t, r, (a = t.elementType === r ? a : yo(r, a)), n);
+          case 7:
+            return kl(e, t, t.pendingProps, n), t.child;
+          case 8:
+          case 12:
+            return kl(e, t, t.pendingProps.children, n), t.child;
+          case 10:
+            e: {
+              if (
+                ((r = t.type._context),
+                (a = t.pendingProps),
+                (i = t.memoizedProps),
+                (l = a.value),
+                _a(bo, r._currentValue),
+                (r._currentValue = l),
+                null !== i)
+              )
+                if (lr(i.value, l)) {
+                  if (i.children === a.children && !Aa.current) {
+                    t = Zl(e, t, n);
+                    break e;
+                  }
+                } else
+                  for (null !== (i = t.child) && (i.return = t); null !== i; ) {
+                    var s = i.dependencies;
+                    if (null !== s) {
+                      l = i.child;
+                      for (var c = s.firstContext; null !== c; ) {
+                        if (c.context === r) {
+                          if (1 === i.tag) {
+                            (c = No(-1, n & -n)).tag = 2;
+                            var u = i.updateQueue;
+                            if (null !== u) {
+                              var d = (u = u.shared).pending;
+                              null === d ? (c.next = c) : ((c.next = d.next), (d.next = c)), (u.pending = c);
+                            }
+                          }
+                          (i.lanes |= n), null !== (c = i.alternate) && (c.lanes |= n), Eo(i.return, n, t), (s.lanes |= n);
+                          break;
+                        }
+                        c = c.next;
+                      }
+                    } else if (10 === i.tag) l = i.type === t.type ? null : i.child;
+                    else if (18 === i.tag) {
+                      if (null === (l = i.return)) throw Error(o(341));
+                      (l.lanes |= n), null !== (s = l.alternate) && (s.lanes |= n), Eo(l, n, t), (l = i.sibling);
+                    } else l = i.child;
+                    if (null !== l) l.return = i;
+                    else
+                      for (l = i; null !== l; ) {
+                        if (l === t) {
+                          l = null;
+                          break;
+                        }
+                        if (null !== (i = l.sibling)) {
+                          (i.return = l.return), (l = i);
+                          break;
+                        }
+                        l = l.return;
+                      }
+                    i = l;
+                  }
+              kl(e, t, a.children, n), (t = t.child);
+            }
+            return t;
+          case 9:
+            return (
+              (a = t.type), (r = t.pendingProps.children), Co(t, n), (r = r((a = _o(a)))), (t.flags |= 1), kl(e, t, r, n), t.child
+            );
+          case 14:
+            return (a = yo((r = t.type), t.pendingProps)), xl(e, t, r, (a = yo(r.type, a)), n);
+          case 15:
+            return El(e, t, t.type, t.pendingProps, n);
+          case 17:
+            return (
+              (r = t.type),
+              (a = t.pendingProps),
+              (a = t.elementType === r ? a : yo(r, a)),
+              ql(e, t),
+              (t.tag = 1),
+              Ra(r) ? ((e = !0), Da(t)) : (e = !1),
+              Co(t, n),
+              qo(t, r, a),
+              Go(t, r, a, n),
+              Al(null, t, r, !0, e, n)
+            );
+          case 19:
+            return Hl(e, t, n);
+          case 22:
+            return Cl(e, t, n);
+        }
+        throw Error(o(156, t.tag));
+      };
+      var Vc =
+        'function' == typeof reportError
+          ? reportError
+          : function (e) {
+              console.error(e);
+            };
+      function Qc(e) {
+        this._internalRoot = e;
+      }
+      function Kc(e) {
+        this._internalRoot = e;
+      }
+      function Yc(e) {
+        return !(!e || (1 !== e.nodeType && 9 !== e.nodeType && 11 !== e.nodeType));
+      }
+      function Xc(e) {
+        return !(
+          !e ||
+          (1 !== e.nodeType &&
+            9 !== e.nodeType &&
+            11 !== e.nodeType &&
+            (8 !== e.nodeType || ' react-mount-point-unstable ' !== e.nodeValue))
+        );
+      }
+      function Jc() {}
+      function eu(e, t, n, r, a) {
+        var o = n._reactRootContainer;
+        if (o) {
+          var i = o;
+          if ('function' == typeof a) {
+            var l = a;
+            a = function () {
+              var e = Zc(i);
+              l.call(e);
+            };
+          }
+          qc(t, i, e, a);
+        } else
+          i = (function (e, t, n, r, a) {
+            if (a) {
+              if ('function' == typeof r) {
+                var o = r;
+                r = function () {
+                  var e = Zc(i);
+                  o.call(e);
+                };
+              }
+              var i = Hc(t, r, e, 0, null, !1, 0, '', Jc);
+              return (e._reactRootContainer = i), (e[ma] = i.current), Ur(8 === e.nodeType ? e.parentNode : e), dc(), i;
+            }
+            for (; (a = e.lastChild); ) e.removeChild(a);
+            if ('function' == typeof r) {
+              var l = r;
+              r = function () {
+                var e = Zc(s);
+                l.call(e);
+              };
+            }
+            var s = $c(e, 0, !1, null, 0, !1, 0, '', Jc);
+            return (
+              (e._reactRootContainer = s),
+              (e[ma] = s.current),
+              Ur(8 === e.nodeType ? e.parentNode : e),
+              dc(function () {
+                qc(t, s, n, r);
+              }),
+              s
+            );
+          })(n, t, e, a, r);
+        return Zc(i);
+      }
+      (Kc.prototype.render = Qc.prototype.render =
+        function (e) {
+          var t = this._internalRoot;
+          if (null === t) throw Error(o(409));
+          qc(e, t, null, null);
+        }),
+        (Kc.prototype.unmount = Qc.prototype.unmount =
+          function () {
+            var e = this._internalRoot;
+            if (null !== e) {
+              this._internalRoot = null;
+              var t = e.containerInfo;
+              dc(function () {
+                qc(null, e, null, null);
+              }),
+                (t[ma] = null);
+            }
+          }),
+        (Kc.prototype.unstable_scheduleHydration = function (e) {
+          if (e) {
+            var t = Et();
+            e = { blockedOn: null, target: e, priority: t };
+            for (var n = 0; n < It.length && 0 !== t && t < It[n].priority; n++);
+            It.splice(n, 0, e), 0 === n && Ft(e);
+          }
+        }),
+        (kt = function (e) {
+          switch (e.tag) {
+            case 3:
+              var t = e.stateNode;
+              if (t.current.memoizedState.isDehydrated) {
+                var n = dt(t.pendingLanes);
+                0 !== n && (bt(t, 1 | n), ac(t, Ye()), 0 == (6 & As) && ((Hs = Ye() + 500), Ua()));
+              }
+              break;
+            case 13:
+              dc(function () {
+                var t = Lo(e, 1);
+                if (null !== t) {
+                  var n = tc();
+                  rc(t, e, 1, n);
+                }
+              }),
+                Wc(e, 1);
+          }
+        }),
+        (St = function (e) {
+          if (13 === e.tag) {
+            var t = Lo(e, 134217728);
+            if (null !== t) rc(t, e, 134217728, tc());
+            Wc(e, 134217728);
+          }
+        }),
+        (xt = function (e) {
+          if (13 === e.tag) {
+            var t = nc(e),
+              n = Lo(e, t);
+            if (null !== n) rc(n, e, t, tc());
+            Wc(e, t);
+          }
+        }),
+        (Et = function () {
+          return vt;
+        }),
+        (Ct = function (e, t) {
+          var n = vt;
+          try {
+            return (vt = e), t();
+          } finally {
+            vt = n;
+          }
+        }),
+        (Se = function (e, t, n) {
+          switch (t) {
+            case 'input':
+              if ((X(e, n), (t = n.name), 'radio' === n.type && null != t)) {
+                for (n = e; n.parentNode; ) n = n.parentNode;
+                for (
+                  n = n.querySelectorAll('input[name=' + JSON.stringify('' + t) + '][type="radio"]'), t = 0;
+                  t < n.length;
+                  t++
+                ) {
+                  var r = n[t];
+                  if (r !== e && r.form === e.form) {
+                    var a = ka(r);
+                    if (!a) throw Error(o(90));
+                    W(r), X(r, a);
+                  }
+                }
+              }
+              break;
+            case 'textarea':
+              oe(e, n);
+              break;
+            case 'select':
+              null != (t = n.value) && ne(e, !!n.multiple, t, !1);
+          }
+        }),
+        (Te = uc),
+        (Ae = dc);
+      var tu = { usingClientEntryPoint: !1, Events: [va, wa, ka, _e, Pe, uc] },
+        nu = { findFiberByHostInstance: ba, bundleType: 0, version: '18.2.0', rendererPackageName: 'react-dom' },
+        ru = {
+          bundleType: nu.bundleType,
+          version: nu.version,
+          rendererPackageName: nu.rendererPackageName,
+          rendererConfig: nu.rendererConfig,
+          overrideHookState: null,
+          overrideHookStateDeletePath: null,
+          overrideHookStateRenamePath: null,
+          overrideProps: null,
+          overridePropsDeletePath: null,
+          overridePropsRenamePath: null,
+          setErrorHandler: null,
+          setSuspenseHandler: null,
+          scheduleUpdate: null,
+          currentDispatcherRef: w.ReactCurrentDispatcher,
+          findHostInstanceByFiber: function (e) {
+            return null === (e = Ze(e)) ? null : e.stateNode;
+          },
+          findFiberByHostInstance:
+            nu.findFiberByHostInstance ||
+            function () {
+              return null;
+            },
+          findHostInstancesForRefresh: null,
+          scheduleRefresh: null,
+          scheduleRoot: null,
+          setRefreshHandler: null,
+          getCurrentFiber: null,
+          reconcilerVersion: '18.2.0-next-9e3b772b8-20220608',
+        };
+      if ('undefined' != typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
+        var au = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+        if (!au.isDisabled && au.supportsFiber)
+          try {
+            (at = au.inject(ru)), (ot = au);
+          } catch (ue) {}
+      }
+      (t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = tu),
+        (t.createPortal = function (e, t) {
+          var n = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : null;
+          if (!Yc(t)) throw Error(o(200));
+          return (function (e, t, n) {
+            var r = 3 < arguments.length && void 0 !== arguments[3] ? arguments[3] : null;
+            return { $$typeof: S, key: null == r ? null : '' + r, children: e, containerInfo: t, implementation: n };
+          })(e, t, null, n);
+        }),
+        (t.createRoot = function (e, t) {
+          if (!Yc(e)) throw Error(o(299));
+          var n = !1,
+            r = '',
+            a = Vc;
+          return (
+            null != t &&
+              (!0 === t.unstable_strictMode && (n = !0),
+              void 0 !== t.identifierPrefix && (r = t.identifierPrefix),
+              void 0 !== t.onRecoverableError && (a = t.onRecoverableError)),
+            (t = $c(e, 1, !1, null, 0, n, 0, r, a)),
+            (e[ma] = t.current),
+            Ur(8 === e.nodeType ? e.parentNode : e),
+            new Qc(t)
+          );
+        }),
+        (t.findDOMNode = function (e) {
+          if (null == e) return null;
+          if (1 === e.nodeType) return e;
+          var t = e._reactInternals;
+          if (void 0 === t) {
+            if ('function' == typeof e.render) throw Error(o(188));
+            throw ((e = Object.keys(e).join(',')), Error(o(268, e)));
+          }
+          return (e = null === (e = Ze(t)) ? null : e.stateNode);
+        }),
+        (t.flushSync = function (e) {
+          return dc(e);
+        }),
+        (t.hydrate = function (e, t, n) {
+          if (!Xc(t)) throw Error(o(200));
+          return eu(null, e, t, !0, n);
+        }),
+        (t.hydrateRoot = function (e, t, n) {
+          if (!Yc(e)) throw Error(o(405));
+          var r = (null != n && n.hydratedSources) || null,
+            a = !1,
+            i = '',
+            l = Vc;
+          if (
+            (null != n &&
+              (!0 === n.unstable_strictMode && (a = !0),
+              void 0 !== n.identifierPrefix && (i = n.identifierPrefix),
+              void 0 !== n.onRecoverableError && (l = n.onRecoverableError)),
+            (t = Hc(t, null, e, 1, null != n ? n : null, a, 0, i, l)),
+            (e[ma] = t.current),
+            Ur(e),
+            r)
+          )
+            for (e = 0; e < r.length; e++)
+              (a = (a = (n = r[e])._getVersion)(n._source)),
+                null == t.mutableSourceEagerHydrationData
+                  ? (t.mutableSourceEagerHydrationData = [n, a])
+                  : t.mutableSourceEagerHydrationData.push(n, a);
+          return new Kc(t);
+        }),
+        (t.render = function (e, t, n) {
+          if (!Xc(t)) throw Error(o(200));
+          return eu(null, e, t, !1, n);
+        }),
+        (t.unmountComponentAtNode = function (e) {
+          if (!Xc(e)) throw Error(o(40));
+          return (
+            !!e._reactRootContainer &&
+            (dc(function () {
+              eu(null, null, e, !1, function () {
+                (e._reactRootContainer = null), (e[ma] = null);
+              });
+            }),
+            !0)
+          );
+        }),
+        (t.unstable_batchedUpdates = uc),
+        (t.unstable_renderSubtreeIntoContainer = function (e, t, n, r) {
+          if (!Xc(n)) throw Error(o(200));
+          if (null == e || void 0 === e._reactInternals) throw Error(o(38));
+          return eu(e, t, n, !1, r);
+        }),
+        (t.version = '18.2.0-next-9e3b772b8-20220608');
+    },
+    745: (e, t, n) => {
+      'use strict';
+      var r = n(3935);
+      (t.createRoot = r.createRoot), (t.hydrateRoot = r.hydrateRoot);
+    },
+    3935: (e, t, n) => {
+      'use strict';
+      !(function e() {
+        if ('undefined' != typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && 'function' == typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)
+          try {
+            __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e);
+          } catch (t) {
+            console.error(t);
+          }
+      })(),
+        (e.exports = n(4448));
+    },
+    9590: e => {
+      var t = 'undefined' != typeof Element,
+        n = 'function' == typeof Map,
+        r = 'function' == typeof Set,
+        a = 'function' == typeof ArrayBuffer && !!ArrayBuffer.isView;
+      function o(e, i) {
+        if (e === i) return !0;
+        if (e && i && 'object' == typeof e && 'object' == typeof i) {
+          if (e.constructor !== i.constructor) return !1;
+          var l, s, c, u;
+          if (Array.isArray(e)) {
+            if ((l = e.length) != i.length) return !1;
+            for (s = l; 0 != s--; ) if (!o(e[s], i[s])) return !1;
+            return !0;
+          }
+          if (n && e instanceof Map && i instanceof Map) {
+            if (e.size !== i.size) return !1;
+            for (u = e.entries(); !(s = u.next()).done; ) if (!i.has(s.value[0])) return !1;
+            for (u = e.entries(); !(s = u.next()).done; ) if (!o(s.value[1], i.get(s.value[0]))) return !1;
+            return !0;
+          }
+          if (r && e instanceof Set && i instanceof Set) {
+            if (e.size !== i.size) return !1;
+            for (u = e.entries(); !(s = u.next()).done; ) if (!i.has(s.value[0])) return !1;
+            return !0;
+          }
+          if (a && ArrayBuffer.isView(e) && ArrayBuffer.isView(i)) {
+            if ((l = e.length) != i.length) return !1;
+            for (s = l; 0 != s--; ) if (e[s] !== i[s]) return !1;
+            return !0;
+          }
+          if (e.constructor === RegExp) return e.source === i.source && e.flags === i.flags;
+          if (e.valueOf !== Object.prototype.valueOf && 'function' == typeof e.valueOf && 'function' == typeof i.valueOf)
+            return e.valueOf() === i.valueOf();
+          if (e.toString !== Object.prototype.toString && 'function' == typeof e.toString && 'function' == typeof i.toString)
+            return e.toString() === i.toString();
+          if ((l = (c = Object.keys(e)).length) !== Object.keys(i).length) return !1;
+          for (s = l; 0 != s--; ) if (!Object.prototype.hasOwnProperty.call(i, c[s])) return !1;
+          if (t && e instanceof Element) return !1;
+          for (s = l; 0 != s--; )
+            if ((('_owner' !== c[s] && '__v' !== c[s] && '__o' !== c[s]) || !e.$$typeof) && !o(e[c[s]], i[c[s]])) return !1;
+          return !0;
+        }
+        return e != e && i != i;
+      }
+      e.exports = function (e, t) {
+        try {
+          return o(e, t);
+        } catch (n) {
+          if ((n.message || '').match(/stack|recursion/i))
+            return console.warn('react-fast-compare cannot handle circular refs'), !1;
+          throw n;
+        }
+      };
+    },
+    405: (e, t, n) => {
+      'use strict';
+      n.d(t, { B6: () => Z, ql: () => J });
+      var r = n(7294),
+        a = n(5697),
+        o = n.n(a),
+        i = n(9590),
+        l = n.n(i),
+        s = n(1143),
+        c = n.n(s),
+        u = n(6774),
+        d = n.n(u);
+      function p() {
+        return (
+          (p =
+            Object.assign ||
+            function (e) {
+              for (var t = 1; t < arguments.length; t++) {
+                var n = arguments[t];
+                for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
+              }
+              return e;
+            }),
+          p.apply(this, arguments)
+        );
+      }
+      function f(e, t) {
+        (e.prototype = Object.create(t.prototype)), (e.prototype.constructor = e), m(e, t);
+      }
+      function m(e, t) {
+        return (
+          (m =
+            Object.setPrototypeOf ||
+            function (e, t) {
+              return (e.__proto__ = t), e;
+            }),
+          m(e, t)
+        );
+      }
+      function h(e, t) {
+        if (null == e) return {};
+        var n,
+          r,
+          a = {},
+          o = Object.keys(e);
+        for (r = 0; r < o.length; r++) t.indexOf((n = o[r])) >= 0 || (a[n] = e[n]);
+        return a;
+      }
+      var g = {
+          BASE: 'base',
+          BODY: 'body',
+          HEAD: 'head',
+          HTML: 'html',
+          LINK: 'link',
+          META: 'meta',
+          NOSCRIPT: 'noscript',
+          SCRIPT: 'script',
+          STYLE: 'style',
+          TITLE: 'title',
+          FRAGMENT: 'Symbol(react.fragment)',
+        },
+        y = { rel: ['amphtml', 'canonical', 'alternate'] },
+        b = { type: ['application/ld+json'] },
+        v = {
+          charset: '',
+          name: ['robots', 'description'],
+          property: [
+            'og:type',
+            'og:title',
+            'og:url',
+            'og:image',
+            'og:image:alt',
+            'og:description',
+            'twitter:url',
+            'twitter:title',
+            'twitter:description',
+            'twitter:image',
+            'twitter:image:alt',
+            'twitter:card',
+            'twitter:site',
+          ],
+        },
+        w = Object.keys(g).map(function (e) {
+          return g[e];
+        }),
+        k = {
+          accesskey: 'accessKey',
+          charset: 'charSet',
+          class: 'className',
+          contenteditable: 'contentEditable',
+          contextmenu: 'contextMenu',
+          'http-equiv': 'httpEquiv',
+          itemprop: 'itemProp',
+          tabindex: 'tabIndex',
+        },
+        S = Object.keys(k).reduce(function (e, t) {
+          return (e[k[t]] = t), e;
+        }, {}),
+        x = function (e, t) {
+          for (var n = e.length - 1; n >= 0; n -= 1) {
+            var r = e[n];
+            if (Object.prototype.hasOwnProperty.call(r, t)) return r[t];
+          }
+          return null;
+        },
+        E = function (e) {
+          var t = x(e, g.TITLE),
+            n = x(e, 'titleTemplate');
+          if ((Array.isArray(t) && (t = t.join('')), n && t))
+            return n.replace(/%s/g, function () {
+              return t;
+            });
+          var r = x(e, 'defaultTitle');
+          return t || r || void 0;
+        },
+        C = function (e) {
+          return x(e, 'onChangeClientState') || function () {};
+        },
+        _ = function (e, t) {
+          return t
+            .filter(function (t) {
+              return void 0 !== t[e];
+            })
+            .map(function (t) {
+              return t[e];
+            })
+            .reduce(function (e, t) {
+              return p({}, e, t);
+            }, {});
+        },
+        P = function (e, t) {
+          return t
+            .filter(function (e) {
+              return void 0 !== e[g.BASE];
+            })
+            .map(function (e) {
+              return e[g.BASE];
+            })
+            .reverse()
+            .reduce(function (t, n) {
+              if (!t.length)
+                for (var r = Object.keys(n), a = 0; a < r.length; a += 1) {
+                  var o = r[a].toLowerCase();
+                  if (-1 !== e.indexOf(o) && n[o]) return t.concat(n);
+                }
+              return t;
+            }, []);
+        },
+        T = function (e, t, n) {
+          var r = {};
+          return n
+            .filter(function (t) {
+              return (
+                !!Array.isArray(t[e]) ||
+                (void 0 !== t[e] &&
+                  console &&
+                  'function' == typeof console.warn &&
+                  console.warn('Helmet: ' + e + ' should be of type "Array". Instead found type "' + typeof t[e] + '"'),
+                !1)
+              );
+            })
+            .map(function (t) {
+              return t[e];
+            })
+            .reverse()
+            .reduce(function (e, n) {
+              var a = {};
+              n.filter(function (e) {
+                for (var n, o = Object.keys(e), i = 0; i < o.length; i += 1) {
+                  var l = o[i],
+                    s = l.toLowerCase();
+                  -1 === t.indexOf(s) ||
+                    ('rel' === n && 'canonical' === e[n].toLowerCase()) ||
+                    ('rel' === s && 'stylesheet' === e[s].toLowerCase()) ||
+                    (n = s),
+                    -1 === t.indexOf(l) || ('innerHTML' !== l && 'cssText' !== l && 'itemprop' !== l) || (n = l);
+                }
+                if (!n || !e[n]) return !1;
+                var c = e[n].toLowerCase();
+                return r[n] || (r[n] = {}), a[n] || (a[n] = {}), !r[n][c] && ((a[n][c] = !0), !0);
+              })
+                .reverse()
+                .forEach(function (t) {
+                  return e.push(t);
+                });
+              for (var o = Object.keys(a), i = 0; i < o.length; i += 1) {
+                var l = o[i],
+                  s = p({}, r[l], a[l]);
+                r[l] = s;
+              }
+              return e;
+            }, [])
+            .reverse();
+        },
+        A = function (e, t) {
+          if (Array.isArray(e) && e.length) for (var n = 0; n < e.length; n += 1) if (e[n][t]) return !0;
+          return !1;
+        },
+        L = function (e) {
+          return Array.isArray(e) ? e.join('') : e;
+        },
+        j = function (e, t) {
+          return Array.isArray(e)
+            ? e.reduce(
+                function (e, n) {
+                  return (
+                    (function (e, t) {
+                      for (var n = Object.keys(e), r = 0; r < n.length; r += 1)
+                        if (t[n[r]] && t[n[r]].includes(e[n[r]])) return !0;
+                      return !1;
+                    })(n, t)
+                      ? e.priority.push(n)
+                      : e.default.push(n),
+                    e
+                  );
+                },
+                { priority: [], default: [] },
+              )
+            : { default: e };
+        },
+        R = function (e, t) {
+          var n;
+          return p({}, e, (((n = {})[t] = void 0), n));
+        },
+        I = [g.NOSCRIPT, g.SCRIPT, g.STYLE],
+        N = function (e, t) {
+          return (
+            void 0 === t && (t = !0),
+            !1 === t
+              ? String(e)
+              : String(e)
+                  .replace(/&/g, '&amp;')
+                  .replace(/</g, '&lt;')
+                  .replace(/>/g, '&gt;')
+                  .replace(/"/g, '&quot;')
+                  .replace(/'/g, '&#x27;')
+          );
+        },
+        O = function (e) {
+          return Object.keys(e).reduce(function (t, n) {
+            var r = void 0 !== e[n] ? n + '="' + e[n] + '"' : '' + n;
+            return t ? t + ' ' + r : r;
+          }, '');
+        },
+        D = function (e, t) {
+          return (
+            void 0 === t && (t = {}),
+            Object.keys(e).reduce(function (t, n) {
+              return (t[k[n] || n] = e[n]), t;
+            }, t)
+          );
+        },
+        F = function (e, t) {
+          return t.map(function (t, n) {
+            var a,
+              o = (((a = { key: n })['data-rh'] = !0), a);
+            return (
+              Object.keys(t).forEach(function (e) {
+                var n = k[e] || e;
+                'innerHTML' === n || 'cssText' === n
+                  ? (o.dangerouslySetInnerHTML = { __html: t.innerHTML || t.cssText })
+                  : (o[n] = t[e]);
+              }),
+              r.createElement(e, o)
+            );
+          });
+        },
+        M = function (e, t, n) {
+          switch (e) {
+            case g.TITLE:
+              return {
+                toComponent: function () {
+                  return (
+                    (n = t.titleAttributes),
+                    ((a = { key: (e = t.title) })['data-rh'] = !0),
+                    (o = D(n, a)),
+                    [r.createElement(g.TITLE, o, e)]
+                  );
+                  var e, n, a, o;
+                },
+                toString: function () {
+                  return (function (e, t, n, r) {
+                    var a = O(n),
+                      o = L(t);
+                    return a
+                      ? '<' + e + ' data-rh="true" ' + a + '>' + N(o, r) + '</' + e + '>'
+                      : '<' + e + ' data-rh="true">' + N(o, r) + '</' + e + '>';
+                  })(e, t.title, t.titleAttributes, n);
+                },
+              };
+            case 'bodyAttributes':
+            case 'htmlAttributes':
+              return {
+                toComponent: function () {
+                  return D(t);
+                },
+                toString: function () {
+                  return O(t);
+                },
+              };
+            default:
+              return {
+                toComponent: function () {
+                  return F(e, t);
+                },
+                toString: function () {
+                  return (function (e, t, n) {
+                    return t.reduce(function (t, r) {
+                      var a = Object.keys(r)
+                          .filter(function (e) {
+                            return !('innerHTML' === e || 'cssText' === e);
+                          })
+                          .reduce(function (e, t) {
+                            var a = void 0 === r[t] ? t : t + '="' + N(r[t], n) + '"';
+                            return e ? e + ' ' + a : a;
+                          }, ''),
+                        o = r.innerHTML || r.cssText || '',
+                        i = -1 === I.indexOf(e);
+                      return t + '<' + e + ' data-rh="true" ' + a + (i ? '/>' : '>' + o + '</' + e + '>');
+                    }, '');
+                  })(e, t, n);
+                },
+              };
+          }
+        },
+        B = function (e) {
+          var t = e.baseTag,
+            n = e.bodyAttributes,
+            r = e.encode,
+            a = e.htmlAttributes,
+            o = e.noscriptTags,
+            i = e.styleTags,
+            l = e.title,
+            s = void 0 === l ? '' : l,
+            c = e.titleAttributes,
+            u = e.linkTags,
+            d = e.metaTags,
+            p = e.scriptTags,
+            f = {
+              toComponent: function () {},
+              toString: function () {
+                return '';
+              },
+            };
+          if (e.prioritizeSeoTags) {
+            var m = (function (e) {
+              var t = e.linkTags,
+                n = e.scriptTags,
+                r = e.encode,
+                a = j(e.metaTags, v),
+                o = j(t, y),
+                i = j(n, b);
+              return {
+                priorityMethods: {
+                  toComponent: function () {
+                    return [].concat(F(g.META, a.priority), F(g.LINK, o.priority), F(g.SCRIPT, i.priority));
+                  },
+                  toString: function () {
+                    return M(g.META, a.priority, r) + ' ' + M(g.LINK, o.priority, r) + ' ' + M(g.SCRIPT, i.priority, r);
+                  },
+                },
+                metaTags: a.default,
+                linkTags: o.default,
+                scriptTags: i.default,
+              };
+            })(e);
+            (f = m.priorityMethods), (u = m.linkTags), (d = m.metaTags), (p = m.scriptTags);
+          }
+          return {
+            priority: f,
+            base: M(g.BASE, t, r),
+            bodyAttributes: M('bodyAttributes', n, r),
+            htmlAttributes: M('htmlAttributes', a, r),
+            link: M(g.LINK, u, r),
+            meta: M(g.META, d, r),
+            noscript: M(g.NOSCRIPT, o, r),
+            script: M(g.SCRIPT, p, r),
+            style: M(g.STYLE, i, r),
+            title: M(g.TITLE, { title: s, titleAttributes: c }, r),
+          };
+        },
+        z = [],
+        $ = function (e, t) {
+          var n = this;
+          void 0 === t && (t = 'undefined' != typeof document),
+            (this.instances = []),
+            (this.value = {
+              setHelmet: function (e) {
+                n.context.helmet = e;
+              },
+              helmetInstances: {
+                get: function () {
+                  return n.canUseDOM ? z : n.instances;
+                },
+                add: function (e) {
+                  (n.canUseDOM ? z : n.instances).push(e);
+                },
+                remove: function (e) {
+                  var t = (n.canUseDOM ? z : n.instances).indexOf(e);
+                  (n.canUseDOM ? z : n.instances).splice(t, 1);
+                },
+              },
+            }),
+            (this.context = e),
+            (this.canUseDOM = t),
+            t ||
+              (e.helmet = B({
+                baseTag: [],
+                bodyAttributes: {},
+                encodeSpecialCharacters: !0,
+                htmlAttributes: {},
+                linkTags: [],
+                metaTags: [],
+                noscriptTags: [],
+                scriptTags: [],
+                styleTags: [],
+                title: '',
+                titleAttributes: {},
+              }));
+        },
+        U = r.createContext({}),
+        H = o().shape({ setHelmet: o().func, helmetInstances: o().shape({ get: o().func, add: o().func, remove: o().func }) }),
+        q = 'undefined' != typeof document,
+        Z = (function (e) {
+          function t(n) {
+            var r;
+            return ((r = e.call(this, n) || this).helmetData = new $(r.props.context, t.canUseDOM)), r;
+          }
+          return (
+            f(t, e),
+            (t.prototype.render = function () {
+              return r.createElement(U.Provider, { value: this.helmetData.value }, this.props.children);
+            }),
+            t
+          );
+        })(r.Component);
+      (Z.canUseDOM = q),
+        (Z.propTypes = { context: o().shape({ helmet: o().shape() }), children: o().node.isRequired }),
+        (Z.defaultProps = { context: {} }),
+        (Z.displayName = 'HelmetProvider');
+      var G = function (e, t) {
+          var n,
+            r = document.head || document.querySelector(g.HEAD),
+            a = r.querySelectorAll(e + '[data-rh]'),
+            o = [].slice.call(a),
+            i = [];
+          return (
+            t &&
+              t.length &&
+              t.forEach(function (t) {
+                var r = document.createElement(e);
+                for (var a in t)
+                  Object.prototype.hasOwnProperty.call(t, a) &&
+                    ('innerHTML' === a
+                      ? (r.innerHTML = t.innerHTML)
+                      : 'cssText' === a
+                        ? r.styleSheet
+                          ? (r.styleSheet.cssText = t.cssText)
+                          : r.appendChild(document.createTextNode(t.cssText))
+                        : r.setAttribute(a, void 0 === t[a] ? '' : t[a]));
+                r.setAttribute('data-rh', 'true'),
+                  o.some(function (e, t) {
+                    return (n = t), r.isEqualNode(e);
+                  })
+                    ? o.splice(n, 1)
+                    : i.push(r);
+              }),
+            o.forEach(function (e) {
+              return e.parentNode.removeChild(e);
+            }),
+            i.forEach(function (e) {
+              return r.appendChild(e);
+            }),
+            { oldTags: o, newTags: i }
+          );
+        },
+        W = function (e, t) {
+          var n = document.getElementsByTagName(e)[0];
+          if (n) {
+            for (
+              var r = n.getAttribute('data-rh'), a = r ? r.split(',') : [], o = [].concat(a), i = Object.keys(t), l = 0;
+              l < i.length;
+              l += 1
+            ) {
+              var s = i[l],
+                c = t[s] || '';
+              n.getAttribute(s) !== c && n.setAttribute(s, c), -1 === a.indexOf(s) && a.push(s);
+              var u = o.indexOf(s);
+              -1 !== u && o.splice(u, 1);
+            }
+            for (var d = o.length - 1; d >= 0; d -= 1) n.removeAttribute(o[d]);
+            a.length === o.length
+              ? n.removeAttribute('data-rh')
+              : n.getAttribute('data-rh') !== i.join(',') && n.setAttribute('data-rh', i.join(','));
+          }
+        },
+        V = function (e, t) {
+          var n = e.baseTag,
+            r = e.htmlAttributes,
+            a = e.linkTags,
+            o = e.metaTags,
+            i = e.noscriptTags,
+            l = e.onChangeClientState,
+            s = e.scriptTags,
+            c = e.styleTags,
+            u = e.title,
+            d = e.titleAttributes;
+          W(g.BODY, e.bodyAttributes),
+            W(g.HTML, r),
+            (function (e, t) {
+              void 0 !== e && document.title !== e && (document.title = L(e)), W(g.TITLE, t);
+            })(u, d);
+          var p = {
+              baseTag: G(g.BASE, n),
+              linkTags: G(g.LINK, a),
+              metaTags: G(g.META, o),
+              noscriptTags: G(g.NOSCRIPT, i),
+              scriptTags: G(g.SCRIPT, s),
+              styleTags: G(g.STYLE, c),
+            },
+            f = {},
+            m = {};
+          Object.keys(p).forEach(function (e) {
+            var t = p[e],
+              n = t.newTags,
+              r = t.oldTags;
+            n.length && (f[e] = n), r.length && (m[e] = p[e].oldTags);
+          }),
+            t && t(),
+            l(e, f, m);
+        },
+        Q = null,
+        K = (function (e) {
+          function t() {
+            for (var t, n = arguments.length, r = new Array(n), a = 0; a < n; a++) r[a] = arguments[a];
+            return ((t = e.call.apply(e, [this].concat(r)) || this).rendered = !1), t;
+          }
+          f(t, e);
+          var n = t.prototype;
+          return (
+            (n.shouldComponentUpdate = function (e) {
+              return !d()(e, this.props);
+            }),
+            (n.componentDidUpdate = function () {
+              this.emitChange();
+            }),
+            (n.componentWillUnmount = function () {
+              this.props.context.helmetInstances.remove(this), this.emitChange();
+            }),
+            (n.emitChange = function () {
+              var e,
+                t,
+                n = this.props.context,
+                r = n.setHelmet,
+                a = null,
+                o =
+                  ((e = n.helmetInstances.get().map(function (e) {
+                    var t = p({}, e.props);
+                    return delete t.context, t;
+                  })),
+                  {
+                    baseTag: P(['href'], e),
+                    bodyAttributes: _('bodyAttributes', e),
+                    defer: x(e, 'defer'),
+                    encode: x(e, 'encodeSpecialCharacters'),
+                    htmlAttributes: _('htmlAttributes', e),
+                    linkTags: T(g.LINK, ['rel', 'href'], e),
+                    metaTags: T(g.META, ['name', 'charset', 'http-equiv', 'property', 'itemprop'], e),
+                    noscriptTags: T(g.NOSCRIPT, ['innerHTML'], e),
+                    onChangeClientState: C(e),
+                    scriptTags: T(g.SCRIPT, ['src', 'innerHTML'], e),
+                    styleTags: T(g.STYLE, ['cssText'], e),
+                    title: E(e),
+                    titleAttributes: _('titleAttributes', e),
+                    prioritizeSeoTags: A(e, 'prioritizeSeoTags'),
+                  });
+              Z.canUseDOM
+                ? ((t = o),
+                  Q && cancelAnimationFrame(Q),
+                  t.defer
+                    ? (Q = requestAnimationFrame(function () {
+                        V(t, function () {
+                          Q = null;
+                        });
+                      }))
+                    : (V(t), (Q = null)))
+                : B && (a = B(o)),
+                r(a);
+            }),
+            (n.init = function () {
+              this.rendered || ((this.rendered = !0), this.props.context.helmetInstances.add(this), this.emitChange());
+            }),
+            (n.render = function () {
+              return this.init(), null;
+            }),
+            t
+          );
+        })(r.Component);
+      (K.propTypes = { context: H.isRequired }), (K.displayName = 'HelmetDispatcher');
+      var Y = ['children'],
+        X = ['children'],
+        J = (function (e) {
+          function t() {
+            return e.apply(this, arguments) || this;
+          }
+          f(t, e);
+          var n = t.prototype;
+          return (
+            (n.shouldComponentUpdate = function (e) {
+              return !l()(R(this.props, 'helmetData'), R(e, 'helmetData'));
+            }),
+            (n.mapNestedChildrenToProps = function (e, t) {
+              if (!t) return null;
+              switch (e.type) {
+                case g.SCRIPT:
+                case g.NOSCRIPT:
+                  return { innerHTML: t };
+                case g.STYLE:
+                  return { cssText: t };
+                default:
+                  throw new Error(
+                    '<' +
+                      e.type +
+                      ' /> elements are self-closing and can not contain children. Refer to our API for more information.',
+                  );
+              }
+            }),
+            (n.flattenArrayTypeChildren = function (e) {
+              var t,
+                n = e.child,
+                r = e.arrayTypeChildren;
+              return p(
+                {},
+                r,
+                (((t = {})[n.type] = [].concat(r[n.type] || [], [
+                  p({}, e.newChildProps, this.mapNestedChildrenToProps(n, e.nestedChildren)),
+                ])),
+                t),
+              );
+            }),
+            (n.mapObjectTypeChildren = function (e) {
+              var t,
+                n,
+                r = e.child,
+                a = e.newProps,
+                o = e.newChildProps,
+                i = e.nestedChildren;
+              switch (r.type) {
+                case g.TITLE:
+                  return p({}, a, (((t = {})[r.type] = i), (t.titleAttributes = p({}, o)), t));
+                case g.BODY:
+                  return p({}, a, { bodyAttributes: p({}, o) });
+                case g.HTML:
+                  return p({}, a, { htmlAttributes: p({}, o) });
+                default:
+                  return p({}, a, (((n = {})[r.type] = p({}, o)), n));
+              }
+            }),
+            (n.mapArrayTypeChildrenToProps = function (e, t) {
+              var n = p({}, t);
+              return (
+                Object.keys(e).forEach(function (t) {
+                  var r;
+                  n = p({}, n, (((r = {})[t] = e[t]), r));
+                }),
+                n
+              );
+            }),
+            (n.warnOnInvalidChildren = function (e, t) {
+              return (
+                c()(
+                  w.some(function (t) {
+                    return e.type === t;
+                  }),
+                  'function' == typeof e.type
+                    ? 'You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.'
+                    : 'Only elements types ' +
+                        w.join(', ') +
+                        ' are allowed. Helmet does not support rendering <' +
+                        e.type +
+                        '> elements. Refer to our API for more information.',
+                ),
+                c()(
+                  !t ||
+                    'string' == typeof t ||
+                    (Array.isArray(t) &&
+                      !t.some(function (e) {
+                        return 'string' != typeof e;
+                      })),
+                  'Helmet expects a string as a child of <' +
+                    e.type +
+                    '>. Did you forget to wrap your children in braces? ( <' +
+                    e.type +
+                    '>{``}</' +
+                    e.type +
+                    '> ) Refer to our API for more information.',
+                ),
+                !0
+              );
+            }),
+            (n.mapChildrenToProps = function (e, t) {
+              var n = this,
+                a = {};
+              return (
+                r.Children.forEach(e, function (e) {
+                  if (e && e.props) {
+                    var r = e.props,
+                      o = r.children,
+                      i = h(r, Y),
+                      l = Object.keys(i).reduce(function (e, t) {
+                        return (e[S[t] || t] = i[t]), e;
+                      }, {}),
+                      s = e.type;
+                    switch (('symbol' == typeof s ? (s = s.toString()) : n.warnOnInvalidChildren(e, o), s)) {
+                      case g.FRAGMENT:
+                        t = n.mapChildrenToProps(o, t);
+                        break;
+                      case g.LINK:
+                      case g.META:
+                      case g.NOSCRIPT:
+                      case g.SCRIPT:
+                      case g.STYLE:
+                        a = n.flattenArrayTypeChildren({ child: e, arrayTypeChildren: a, newChildProps: l, nestedChildren: o });
+                        break;
+                      default:
+                        t = n.mapObjectTypeChildren({ child: e, newProps: t, newChildProps: l, nestedChildren: o });
+                    }
+                  }
+                }),
+                this.mapArrayTypeChildrenToProps(a, t)
+              );
+            }),
+            (n.render = function () {
+              var e = this.props,
+                t = e.children,
+                n = h(e, X),
+                a = p({}, n),
+                o = n.helmetData;
+              return (
+                t && (a = this.mapChildrenToProps(t, a)),
+                !o || o instanceof $ || (o = new $(o.context, o.instances)),
+                o
+                  ? r.createElement(K, p({}, a, { context: o.value, helmetData: void 0 }))
+                  : r.createElement(U.Consumer, null, function (e) {
+                      return r.createElement(K, p({}, a, { context: e }));
+                    })
+              );
+            }),
+            t
+          );
+        })(r.Component);
+      (J.propTypes = {
+        base: o().object,
+        bodyAttributes: o().object,
+        children: o().oneOfType([o().arrayOf(o().node), o().node]),
+        defaultTitle: o().string,
+        defer: o().bool,
+        encodeSpecialCharacters: o().bool,
+        htmlAttributes: o().object,
+        link: o().arrayOf(o().object),
+        meta: o().arrayOf(o().object),
+        noscript: o().arrayOf(o().object),
+        onChangeClientState: o().func,
+        script: o().arrayOf(o().object),
+        style: o().arrayOf(o().object),
+        title: o().string,
+        titleAttributes: o().object,
+        titleTemplate: o().string,
+        prioritizeSeoTags: o().bool,
+        helmetData: o().object,
+      }),
+        (J.defaultProps = { defer: !0, encodeSpecialCharacters: !0, prioritizeSeoTags: !1 }),
+        (J.displayName = 'Helmet');
+    },
+    9921: (e, t) => {
+      'use strict';
+      var n = 'function' == typeof Symbol && Symbol.for,
+        r = n ? Symbol.for('react.element') : 60103,
+        a = n ? Symbol.for('react.portal') : 60106,
+        o = n ? Symbol.for('react.fragment') : 60107,
+        i = n ? Symbol.for('react.strict_mode') : 60108,
+        l = n ? Symbol.for('react.profiler') : 60114,
+        s = n ? Symbol.for('react.provider') : 60109,
+        c = n ? Symbol.for('react.context') : 60110,
+        u = n ? Symbol.for('react.async_mode') : 60111,
+        d = n ? Symbol.for('react.concurrent_mode') : 60111,
+        p = n ? Symbol.for('react.forward_ref') : 60112,
+        f = n ? Symbol.for('react.suspense') : 60113,
+        m = n ? Symbol.for('react.suspense_list') : 60120,
+        h = n ? Symbol.for('react.memo') : 60115,
+        g = n ? Symbol.for('react.lazy') : 60116,
+        y = n ? Symbol.for('react.block') : 60121,
+        b = n ? Symbol.for('react.fundamental') : 60117,
+        v = n ? Symbol.for('react.responder') : 60118,
+        w = n ? Symbol.for('react.scope') : 60119;
+      function k(e) {
+        if ('object' == typeof e && null !== e) {
+          var t = e.$$typeof;
+          switch (t) {
+            case r:
+              switch ((e = e.type)) {
+                case u:
+                case d:
+                case o:
+                case l:
+                case i:
+                case f:
+                  return e;
+                default:
+                  switch ((e = e && e.$$typeof)) {
+                    case c:
+                    case p:
+                    case g:
+                    case h:
+                    case s:
+                      return e;
+                    default:
+                      return t;
+                  }
+              }
+            case a:
+              return t;
+          }
+        }
+      }
+      function S(e) {
+        return k(e) === d;
+      }
+      (t.AsyncMode = u),
+        (t.ConcurrentMode = d),
+        (t.ContextConsumer = c),
+        (t.ContextProvider = s),
+        (t.Element = r),
+        (t.ForwardRef = p),
+        (t.Fragment = o),
+        (t.Lazy = g),
+        (t.Memo = h),
+        (t.Portal = a),
+        (t.Profiler = l),
+        (t.StrictMode = i),
+        (t.Suspense = f),
+        (t.isAsyncMode = function (e) {
+          return S(e) || k(e) === u;
+        }),
+        (t.isConcurrentMode = S),
+        (t.isContextConsumer = function (e) {
+          return k(e) === c;
+        }),
+        (t.isContextProvider = function (e) {
+          return k(e) === s;
+        }),
+        (t.isElement = function (e) {
+          return 'object' == typeof e && null !== e && e.$$typeof === r;
+        }),
+        (t.isForwardRef = function (e) {
+          return k(e) === p;
+        }),
+        (t.isFragment = function (e) {
+          return k(e) === o;
+        }),
+        (t.isLazy = function (e) {
+          return k(e) === g;
+        }),
+        (t.isMemo = function (e) {
+          return k(e) === h;
+        }),
+        (t.isPortal = function (e) {
+          return k(e) === a;
+        }),
+        (t.isProfiler = function (e) {
+          return k(e) === l;
+        }),
+        (t.isStrictMode = function (e) {
+          return k(e) === i;
+        }),
+        (t.isSuspense = function (e) {
+          return k(e) === f;
+        }),
+        (t.isValidElementType = function (e) {
+          return (
+            'string' == typeof e ||
+            'function' == typeof e ||
+            e === o ||
+            e === d ||
+            e === l ||
+            e === i ||
+            e === f ||
+            e === m ||
+            ('object' == typeof e &&
+              null !== e &&
+              (e.$$typeof === g ||
+                e.$$typeof === h ||
+                e.$$typeof === s ||
+                e.$$typeof === c ||
+                e.$$typeof === p ||
+                e.$$typeof === b ||
+                e.$$typeof === v ||
+                e.$$typeof === w ||
+                e.$$typeof === y))
+          );
+        }),
+        (t.typeOf = k);
+    },
+    9864: (e, t, n) => {
+      'use strict';
+      e.exports = n(9921);
+    },
+    8356: (e, t, n) => {
+      'use strict';
+      function r(e, t) {
+        (e.prototype = Object.create(t.prototype)), (e.prototype.constructor = e), (e.__proto__ = t);
+      }
+      function a(e) {
+        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        return e;
+      }
+      function o(e, t, n) {
+        return t in e ? Object.defineProperty(e, t, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : (e[t] = n), e;
+      }
+      function i() {
+        return (
+          (i =
+            Object.assign ||
+            function (e) {
+              for (var t = 1; t < arguments.length; t++) {
+                var n = arguments[t];
+                for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
+              }
+              return e;
+            }),
+          i.apply(this, arguments)
+        );
+      }
+      var l = n(7294),
+        s = n(5697),
+        c = [],
+        u = [];
+      function d(e) {
+        var t = e(),
+          n = { loading: !0, loaded: null, error: null };
+        return (
+          (n.promise = t
+            .then(function (e) {
+              return (n.loading = !1), (n.loaded = e), e;
+            })
+            .catch(function (e) {
+              throw ((n.loading = !1), (n.error = e), e);
+            })),
+          n
+        );
+      }
+      function p(e) {
+        var t = { loading: !1, loaded: {}, error: null },
+          n = [];
+        try {
+          Object.keys(e).forEach(function (r) {
+            var a = d(e[r]);
+            a.loading ? (t.loading = !0) : ((t.loaded[r] = a.loaded), (t.error = a.error)),
+              n.push(a.promise),
+              a.promise
+                .then(function (e) {
+                  t.loaded[r] = e;
+                })
+                .catch(function (e) {
+                  t.error = e;
+                });
+          });
+        } catch (r) {
+          t.error = r;
+        }
+        return (
+          (t.promise = Promise.all(n)
+            .then(function (e) {
+              return (t.loading = !1), e;
+            })
+            .catch(function (e) {
+              throw ((t.loading = !1), e);
+            })),
+          t
+        );
+      }
+      function f(e, t) {
+        return l.createElement((n = e) && n.__esModule ? n.default : n, t);
+        var n;
+      }
+      function m(e, t) {
+        var d, p;
+        if (!t.loading) throw new Error('react-loadable requires a `loading` component');
+        var m = i({ loader: null, loading: null, delay: 200, timeout: null, render: f, webpack: null, modules: null }, t),
+          h = null;
+        function g() {
+          return h || (h = e(m.loader)), h.promise;
+        }
+        return (
+          c.push(g),
+          'function' == typeof m.webpack &&
+            u.push(function () {
+              if (
+                (0, m.webpack)().every(function (e) {
+                  return void 0 !== e && void 0 !== n.m[e];
+                })
+              )
+                return g();
+            }),
+          (p = d =
+            (function (t) {
+              function n(n) {
+                var r;
+                return (
+                  o(a(a((r = t.call(this, n) || this))), 'retry', function () {
+                    r.setState({ error: null, loading: !0, timedOut: !1 }), (h = e(m.loader)), r._loadModule();
+                  }),
+                  g(),
+                  (r.state = { error: h.error, pastDelay: !1, timedOut: !1, loading: h.loading, loaded: h.loaded }),
+                  r
+                );
+              }
+              r(n, t),
+                (n.preload = function () {
+                  return g();
+                });
+              var i = n.prototype;
+              return (
+                (i.UNSAFE_componentWillMount = function () {
+                  this._loadModule();
+                }),
+                (i.componentDidMount = function () {
+                  this._mounted = !0;
+                }),
+                (i._loadModule = function () {
+                  var e = this;
+                  if (
+                    (this.context.loadable &&
+                      Array.isArray(m.modules) &&
+                      m.modules.forEach(function (t) {
+                        e.context.loadable.report(t);
+                      }),
+                    h.loading)
+                  ) {
+                    var t = function (t) {
+                      e._mounted && e.setState(t);
+                    };
+                    'number' == typeof m.delay &&
+                      (0 === m.delay
+                        ? this.setState({ pastDelay: !0 })
+                        : (this._delay = setTimeout(function () {
+                            t({ pastDelay: !0 });
+                          }, m.delay))),
+                      'number' == typeof m.timeout &&
+                        (this._timeout = setTimeout(function () {
+                          t({ timedOut: !0 });
+                        }, m.timeout));
+                    var n = function () {
+                      t({ error: h.error, loaded: h.loaded, loading: h.loading }), e._clearTimeouts();
+                    };
+                    h.promise
+                      .then(function () {
+                        return n(), null;
+                      })
+                      .catch(function (e) {
+                        return n(), null;
+                      });
+                  }
+                }),
+                (i.componentWillUnmount = function () {
+                  (this._mounted = !1), this._clearTimeouts();
+                }),
+                (i._clearTimeouts = function () {
+                  clearTimeout(this._delay), clearTimeout(this._timeout);
+                }),
+                (i.render = function () {
+                  return this.state.loading || this.state.error
+                    ? l.createElement(m.loading, {
+                        isLoading: this.state.loading,
+                        pastDelay: this.state.pastDelay,
+                        timedOut: this.state.timedOut,
+                        error: this.state.error,
+                        retry: this.retry,
+                      })
+                    : this.state.loaded
+                      ? m.render(this.state.loaded, this.props)
+                      : null;
+                }),
+                n
+              );
+            })(l.Component)),
+          o(d, 'contextTypes', { loadable: s.shape({ report: s.func.isRequired }) }),
+          p
+        );
+      }
+      function h(e) {
+        return m(d, e);
+      }
+      h.Map = function (e) {
+        if ('function' != typeof e.render) throw new Error('LoadableMap requires a `render(loaded, props)` function');
+        return m(p, e);
+      };
+      var g = (function (e) {
+        function t() {
+          return e.apply(this, arguments) || this;
+        }
+        r(t, e);
+        var n = t.prototype;
+        return (
+          (n.getChildContext = function () {
+            return { loadable: { report: this.props.report } };
+          }),
+          (n.render = function () {
+            return l.Children.only(this.props.children);
+          }),
+          t
+        );
+      })(l.Component);
+      function y(e) {
+        for (var t = []; e.length; ) {
+          var n = e.pop();
+          t.push(n());
+        }
+        return Promise.all(t).then(function () {
+          if (e.length) return y(e);
+        });
+      }
+      o(g, 'propTypes', { report: s.func.isRequired }),
+        o(g, 'childContextTypes', { loadable: s.shape({ report: s.func.isRequired }).isRequired }),
+        (h.Capture = g),
+        (h.preloadAll = function () {
+          return new Promise(function (e, t) {
+            y(c).then(e, t);
+          });
+        }),
+        (h.preloadReady = function () {
+          return new Promise(function (e, t) {
+            y(u).then(e, e);
+          });
+        }),
+        (e.exports = h);
+    },
+    8790: (e, t, n) => {
+      'use strict';
+      n.d(t, { H: () => l, f: () => i });
+      var r = n(6550),
+        a = n(7462),
+        o = n(7294);
+      function i(e, t, n) {
+        return (
+          void 0 === n && (n = []),
+          e.some(function (e) {
+            var a = e.path ? (0, r.LX)(t, e) : n.length ? n[n.length - 1].match : r.F0.computeRootMatch(t);
+            return a && (n.push({ route: e, match: a }), e.routes && i(e.routes, t, n)), a;
+          }),
+          n
+        );
+      }
+      function l(e, t, n) {
+        return (
+          void 0 === t && (t = {}),
+          void 0 === n && (n = {}),
+          e
+            ? o.createElement(
+                r.rs,
+                n,
+                e.map(function (e, n) {
+                  return o.createElement(r.AW, {
+                    key: e.key || n,
+                    path: e.path,
+                    exact: e.exact,
+                    strict: e.strict,
+                    render: function (n) {
+                      return e.render
+                        ? e.render((0, a.Z)({}, n, {}, t, { route: e }))
+                        : o.createElement(e.component, (0, a.Z)({}, n, t, { route: e }));
+                    },
+                  });
+                }),
+              )
+            : null
+        );
+      }
+    },
+    3727: (e, t, n) => {
+      'use strict';
+      n.d(t, { OL: () => v, VK: () => u, rU: () => g });
+      var r = n(6550),
+        a = n(5068),
+        o = n(7294),
+        i = n(9318),
+        l = n(7462),
+        s = n(3366),
+        c = n(8776),
+        u = (function (e) {
+          function t() {
+            for (var t, n = arguments.length, r = new Array(n), a = 0; a < n; a++) r[a] = arguments[a];
+            return ((t = e.call.apply(e, [this].concat(r)) || this).history = (0, i.lX)(t.props)), t;
+          }
+          return (
+            (0, a.Z)(t, e),
+            (t.prototype.render = function () {
+              return o.createElement(r.F0, { history: this.history, children: this.props.children });
+            }),
+            t
+          );
+        })(o.Component);
+      o.Component;
+      var d = function (e, t) {
+          return 'function' == typeof e ? e(t) : e;
+        },
+        p = function (e, t) {
+          return 'string' == typeof e ? (0, i.ob)(e, null, null, t) : e;
+        },
+        f = function (e) {
+          return e;
+        },
+        m = o.forwardRef;
+      void 0 === m && (m = f);
+      var h = m(function (e, t) {
+        var n = e.innerRef,
+          r = e.navigate,
+          a = e.onClick,
+          i = (0, s.Z)(e, ['innerRef', 'navigate', 'onClick']),
+          c = i.target,
+          u = (0, l.Z)({}, i, {
+            onClick: function (e) {
+              try {
+                a && a(e);
+              } catch (t) {
+                throw (e.preventDefault(), t);
+              }
+              e.defaultPrevented ||
+                0 !== e.button ||
+                (c && '_self' !== c) ||
+                (function (e) {
+                  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+                })(e) ||
+                (e.preventDefault(), r());
+            },
+          });
+        return (u.ref = (f !== m && t) || n), o.createElement('a', u);
+      });
+      var g = m(function (e, t) {
+          var n = e.component,
+            a = void 0 === n ? h : n,
+            u = e.replace,
+            g = e.to,
+            y = e.innerRef,
+            b = (0, s.Z)(e, ['component', 'replace', 'to', 'innerRef']);
+          return o.createElement(r.s6.Consumer, null, function (e) {
+            e || (0, c.Z)(!1);
+            var n = e.history,
+              r = p(d(g, e.location), e.location),
+              s = r ? n.createHref(r) : '',
+              h = (0, l.Z)({}, b, {
+                href: s,
+                navigate: function () {
+                  var t = d(g, e.location),
+                    r = (0, i.Ep)(e.location) === (0, i.Ep)(p(t));
+                  (u || r ? n.replace : n.push)(t);
+                },
+              });
+            return f !== m ? (h.ref = t || y) : (h.innerRef = y), o.createElement(a, h);
+          });
+        }),
+        y = function (e) {
+          return e;
+        },
+        b = o.forwardRef;
+      void 0 === b && (b = y);
+      var v = b(function (e, t) {
+        var n = e['aria-current'],
+          a = void 0 === n ? 'page' : n,
+          i = e.activeClassName,
+          u = void 0 === i ? 'active' : i,
+          f = e.activeStyle,
+          m = e.className,
+          h = e.exact,
+          v = e.isActive,
+          w = e.location,
+          k = e.sensitive,
+          S = e.strict,
+          x = e.style,
+          E = e.to,
+          C = e.innerRef,
+          _ = (0, s.Z)(e, [
+            'aria-current',
+            'activeClassName',
+            'activeStyle',
+            'className',
+            'exact',
+            'isActive',
+            'location',
+            'sensitive',
+            'strict',
+            'style',
+            'to',
+            'innerRef',
+          ]);
+        return o.createElement(r.s6.Consumer, null, function (e) {
+          e || (0, c.Z)(!1);
+          var n = w || e.location,
+            i = p(d(E, n), n),
+            s = i.pathname,
+            P = s && s.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1'),
+            T = P ? (0, r.LX)(n.pathname, { path: P, exact: h, sensitive: k, strict: S }) : null,
+            A = !!(v ? v(T, n) : T),
+            L = 'function' == typeof m ? m(A) : m,
+            j = 'function' == typeof x ? x(A) : x;
+          A &&
+            ((L = (function () {
+              for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++) t[n] = arguments[n];
+              return t
+                .filter(function (e) {
+                  return e;
+                })
+                .join(' ');
+            })(L, u)),
+            (j = (0, l.Z)({}, j, f)));
+          var R = (0, l.Z)({ 'aria-current': (A && a) || null, className: L, style: j, to: i }, _);
+          return y !== b ? (R.ref = t || C) : (R.innerRef = C), o.createElement(g, R);
+        });
+      });
+    },
+    6550: (e, t, n) => {
+      'use strict';
+      n.d(t, { AW: () => E, F0: () => v, LX: () => x, TH: () => I, k6: () => R, rs: () => L, s6: () => b });
+      var r = n(5068),
+        a = n(7294),
+        o = n(5697),
+        i = n.n(o),
+        l = n(9318),
+        s = n(8776),
+        c = n(7462),
+        u = n(4779),
+        d = n.n(u),
+        p = (n(9864), n(3366)),
+        f = (n(8679), 1073741823),
+        m = 'undefined' != typeof globalThis ? globalThis : 'undefined' != typeof window ? window : void 0 !== n.g ? n.g : {};
+      var h =
+          a.createContext ||
+          function (e, t) {
+            var n,
+              o,
+              l =
+                '__create-react-context-' +
+                (function () {
+                  var e = '__global_unique_id__';
+                  return (m[e] = (m[e] || 0) + 1);
+                })() +
+                '__',
+              s = (function (e) {
+                function n() {
+                  for (var t, n, r, a = arguments.length, o = new Array(a), i = 0; i < a; i++) o[i] = arguments[i];
+                  return (
+                    ((t = e.call.apply(e, [this].concat(o)) || this).emitter =
+                      ((n = t.props.value),
+                      (r = []),
+                      {
+                        on: function (e) {
+                          r.push(e);
+                        },
+                        off: function (e) {
+                          r = r.filter(function (t) {
+                            return t !== e;
+                          });
+                        },
+                        get: function () {
+                          return n;
+                        },
+                        set: function (e, t) {
+                          (n = e),
+                            r.forEach(function (e) {
+                              return e(n, t);
+                            });
+                        },
+                      })),
+                    t
+                  );
+                }
+                (0, r.Z)(n, e);
+                var a = n.prototype;
+                return (
+                  (a.getChildContext = function () {
+                    var e;
+                    return ((e = {})[l] = this.emitter), e;
+                  }),
+                  (a.componentWillReceiveProps = function (e) {
+                    if (this.props.value !== e.value) {
+                      var n,
+                        r = this.props.value,
+                        a = e.value;
+                      ((o = r) === (i = a) ? 0 !== o || 1 / o == 1 / i : o != o && i != i)
+                        ? (n = 0)
+                        : ((n = 'function' == typeof t ? t(r, a) : f), 0 !== (n |= 0) && this.emitter.set(e.value, n));
+                    }
+                    var o, i;
+                  }),
+                  (a.render = function () {
+                    return this.props.children;
+                  }),
+                  n
+                );
+              })(a.Component);
+            s.childContextTypes = (((n = {})[l] = i().object.isRequired), n);
+            var c = (function (t) {
+              function n() {
+                for (var e, n = arguments.length, r = new Array(n), a = 0; a < n; a++) r[a] = arguments[a];
+                return (
+                  ((e = t.call.apply(t, [this].concat(r)) || this).observedBits = void 0),
+                  (e.state = { value: e.getValue() }),
+                  (e.onUpdate = function (t, n) {
+                    0 != ((0 | e.observedBits) & n) && e.setState({ value: e.getValue() });
+                  }),
+                  e
+                );
+              }
+              (0, r.Z)(n, t);
+              var a = n.prototype;
+              return (
+                (a.componentWillReceiveProps = function (e) {
+                  var t = e.observedBits;
+                  this.observedBits = null == t ? f : t;
+                }),
+                (a.componentDidMount = function () {
+                  this.context[l] && this.context[l].on(this.onUpdate);
+                  var e = this.props.observedBits;
+                  this.observedBits = null == e ? f : e;
+                }),
+                (a.componentWillUnmount = function () {
+                  this.context[l] && this.context[l].off(this.onUpdate);
+                }),
+                (a.getValue = function () {
+                  return this.context[l] ? this.context[l].get() : e;
+                }),
+                (a.render = function () {
+                  return ((e = this.props.children), Array.isArray(e) ? e[0] : e)(this.state.value);
+                  var e;
+                }),
+                n
+              );
+            })(a.Component);
+            return (c.contextTypes = (((o = {})[l] = i().object), o)), { Provider: s, Consumer: c };
+          },
+        g = function (e) {
+          var t = h();
+          return (t.displayName = e), t;
+        },
+        y = g('Router-History'),
+        b = g('Router'),
+        v = (function (e) {
+          function t(t) {
+            var n;
+            return (
+              ((n = e.call(this, t) || this).state = { location: t.history.location }),
+              (n._isMounted = !1),
+              (n._pendingLocation = null),
+              t.staticContext ||
+                (n.unlisten = t.history.listen(function (e) {
+                  n._pendingLocation = e;
+                })),
+              n
+            );
+          }
+          (0, r.Z)(t, e),
+            (t.computeRootMatch = function (e) {
+              return { path: '/', url: '/', params: {}, isExact: '/' === e };
+            });
+          var n = t.prototype;
+          return (
+            (n.componentDidMount = function () {
+              var e = this;
+              (this._isMounted = !0),
+                this.unlisten && this.unlisten(),
+                this.props.staticContext ||
+                  (this.unlisten = this.props.history.listen(function (t) {
+                    e._isMounted && e.setState({ location: t });
+                  })),
+                this._pendingLocation && this.setState({ location: this._pendingLocation });
+            }),
+            (n.componentWillUnmount = function () {
+              this.unlisten && (this.unlisten(), (this._isMounted = !1), (this._pendingLocation = null));
+            }),
+            (n.render = function () {
+              return a.createElement(
+                b.Provider,
+                {
+                  value: {
+                    history: this.props.history,
+                    location: this.state.location,
+                    match: t.computeRootMatch(this.state.location.pathname),
+                    staticContext: this.props.staticContext,
+                  },
+                },
+                a.createElement(y.Provider, { children: this.props.children || null, value: this.props.history }),
+              );
+            }),
+            t
+          );
+        })(a.Component);
+      a.Component;
+      a.Component;
+      var w = {},
+        k = 1e4,
+        S = 0;
+      function x(e, t) {
+        void 0 === t && (t = {}), ('string' == typeof t || Array.isArray(t)) && (t = { path: t });
+        var n = t,
+          r = n.path,
+          a = n.exact,
+          o = void 0 !== a && a,
+          i = n.strict,
+          l = void 0 !== i && i,
+          s = n.sensitive,
+          c = void 0 !== s && s;
+        return [].concat(r).reduce(function (t, n) {
+          if (!n && '' !== n) return null;
+          if (t) return t;
+          var r = (function (e, t) {
+              var n = '' + t.end + t.strict + t.sensitive,
+                r = w[n] || (w[n] = {});
+              if (r[e]) return r[e];
+              var a = [],
+                o = { regexp: d()(e, a, t), keys: a };
+              return S < k && ((r[e] = o), S++), o;
+            })(n, { end: o, strict: l, sensitive: c }),
+            a = r.regexp,
+            i = r.keys,
+            s = a.exec(e);
+          if (!s) return null;
+          var u = s[0],
+            p = s.slice(1),
+            f = e === u;
+          return o && !f
+            ? null
+            : {
+                path: n,
+                url: '/' === n && '' === u ? '/' : u,
+                isExact: f,
+                params: i.reduce(function (e, t, n) {
+                  return (e[t.name] = p[n]), e;
+                }, {}),
+              };
+        }, null);
+      }
+      var E = (function (e) {
+        function t() {
+          return e.apply(this, arguments) || this;
+        }
+        return (
+          (0, r.Z)(t, e),
+          (t.prototype.render = function () {
+            var e = this;
+            return a.createElement(b.Consumer, null, function (t) {
+              t || (0, s.Z)(!1);
+              var n = e.props.location || t.location,
+                r = e.props.computedMatch ? e.props.computedMatch : e.props.path ? x(n.pathname, e.props) : t.match,
+                o = (0, c.Z)({}, t, { location: n, match: r }),
+                i = e.props,
+                l = i.children,
+                u = i.component,
+                d = i.render;
+              return (
+                Array.isArray(l) &&
+                  (function (e) {
+                    return 0 === a.Children.count(e);
+                  })(l) &&
+                  (l = null),
+                a.createElement(
+                  b.Provider,
+                  { value: o },
+                  o.match
+                    ? l
+                      ? 'function' == typeof l
+                        ? l(o)
+                        : l
+                      : u
+                        ? a.createElement(u, o)
+                        : d
+                          ? d(o)
+                          : null
+                    : 'function' == typeof l
+                      ? l(o)
+                      : null,
+                )
+              );
+            });
+          }),
+          t
+        );
+      })(a.Component);
+      function C(e) {
+        return '/' === e.charAt(0) ? e : '/' + e;
+      }
+      function _(e, t) {
+        if (!e) return t;
+        var n = C(e);
+        return 0 !== t.pathname.indexOf(n) ? t : (0, c.Z)({}, t, { pathname: t.pathname.substr(n.length) });
+      }
+      function P(e) {
+        return 'string' == typeof e ? e : (0, l.Ep)(e);
+      }
+      function T(e) {
+        return function () {
+          (0, s.Z)(!1);
+        };
+      }
+      function A() {}
+      a.Component;
+      var L = (function (e) {
+        function t() {
+          return e.apply(this, arguments) || this;
+        }
+        return (
+          (0, r.Z)(t, e),
+          (t.prototype.render = function () {
+            var e = this;
+            return a.createElement(b.Consumer, null, function (t) {
+              t || (0, s.Z)(!1);
+              var n,
+                r,
+                o = e.props.location || t.location;
+              return (
+                a.Children.forEach(e.props.children, function (e) {
+                  if (null == r && a.isValidElement(e)) {
+                    n = e;
+                    var i = e.props.path || e.props.from;
+                    r = i ? x(o.pathname, (0, c.Z)({}, e.props, { path: i })) : t.match;
+                  }
+                }),
+                r ? a.cloneElement(n, { location: o, computedMatch: r }) : null
+              );
+            });
+          }),
+          t
+        );
+      })(a.Component);
+      var j = a.useContext;
+      function R() {
+        return j(y);
+      }
+      function I() {
+        return j(b).location;
+      }
+    },
+    5251: (e, t, n) => {
+      'use strict';
+      var r = n(7294),
+        a = Symbol.for('react.element'),
+        o = Symbol.for('react.fragment'),
+        i = Object.prototype.hasOwnProperty,
+        l = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,
+        s = { key: !0, ref: !0, __self: !0, __source: !0 };
+      function c(e, t, n) {
+        var r,
+          o = {},
+          c = null,
+          u = null;
+        for (r in (void 0 !== n && (c = '' + n), void 0 !== t.key && (c = '' + t.key), void 0 !== t.ref && (u = t.ref), t))
+          i.call(t, r) && !s.hasOwnProperty(r) && (o[r] = t[r]);
+        if (e && e.defaultProps) for (r in (t = e.defaultProps)) void 0 === o[r] && (o[r] = t[r]);
+        return { $$typeof: a, type: e, key: c, ref: u, props: o, _owner: l.current };
+      }
+      (t.Fragment = o), (t.jsx = c), (t.jsxs = c);
+    },
+    2408: (e, t) => {
+      'use strict';
+      var n = Symbol.for('react.element'),
+        r = Symbol.for('react.portal'),
+        a = Symbol.for('react.fragment'),
+        o = Symbol.for('react.strict_mode'),
+        i = Symbol.for('react.profiler'),
+        l = Symbol.for('react.provider'),
+        s = Symbol.for('react.context'),
+        c = Symbol.for('react.forward_ref'),
+        u = Symbol.for('react.suspense'),
+        d = Symbol.for('react.memo'),
+        p = Symbol.for('react.lazy'),
+        f = Symbol.iterator;
+      var m = {
+          isMounted: function () {
+            return !1;
+          },
+          enqueueForceUpdate: function () {},
+          enqueueReplaceState: function () {},
+          enqueueSetState: function () {},
+        },
+        h = Object.assign,
+        g = {};
+      function y(e, t, n) {
+        (this.props = e), (this.context = t), (this.refs = g), (this.updater = n || m);
+      }
+      function b() {}
+      function v(e, t, n) {
+        (this.props = e), (this.context = t), (this.refs = g), (this.updater = n || m);
+      }
+      (y.prototype.isReactComponent = {}),
+        (y.prototype.setState = function (e, t) {
+          if ('object' != typeof e && 'function' != typeof e && null != e)
+            throw Error(
+              'setState(...): takes an object of state variables to update or a function which returns an object of state variables.',
+            );
+          this.updater.enqueueSetState(this, e, t, 'setState');
+        }),
+        (y.prototype.forceUpdate = function (e) {
+          this.updater.enqueueForceUpdate(this, e, 'forceUpdate');
+        }),
+        (b.prototype = y.prototype);
+      var w = (v.prototype = new b());
+      (w.constructor = v), h(w, y.prototype), (w.isPureReactComponent = !0);
+      var k = Array.isArray,
+        S = Object.prototype.hasOwnProperty,
+        x = { current: null },
+        E = { key: !0, ref: !0, __self: !0, __source: !0 };
+      function C(e, t, r) {
+        var a,
+          o = {},
+          i = null,
+          l = null;
+        if (null != t)
+          for (a in (void 0 !== t.ref && (l = t.ref), void 0 !== t.key && (i = '' + t.key), t))
+            S.call(t, a) && !E.hasOwnProperty(a) && (o[a] = t[a]);
+        var s = arguments.length - 2;
+        if (1 === s) o.children = r;
+        else if (1 < s) {
+          for (var c = Array(s), u = 0; u < s; u++) c[u] = arguments[u + 2];
+          o.children = c;
+        }
+        if (e && e.defaultProps) for (a in (s = e.defaultProps)) void 0 === o[a] && (o[a] = s[a]);
+        return { $$typeof: n, type: e, key: i, ref: l, props: o, _owner: x.current };
+      }
+      function _(e) {
+        return 'object' == typeof e && null !== e && e.$$typeof === n;
+      }
+      var P = /\/+/g;
+      function T(e, t) {
+        return 'object' == typeof e && null !== e && null != e.key
+          ? (function (e) {
+              var t = { '=': '=0', ':': '=2' };
+              return (
+                '$' +
+                e.replace(/[=:]/g, function (e) {
+                  return t[e];
+                })
+              );
+            })('' + e.key)
+          : t.toString(36);
+      }
+      function A(e, t, a, o, i) {
+        var l = typeof e;
+        ('undefined' !== l && 'boolean' !== l) || (e = null);
+        var s = !1;
+        if (null === e) s = !0;
+        else
+          switch (l) {
+            case 'string':
+            case 'number':
+              s = !0;
+              break;
+            case 'object':
+              switch (e.$$typeof) {
+                case n:
+                case r:
+                  s = !0;
+              }
+          }
+        if (s)
+          return (
+            (i = i((s = e))),
+            (e = '' === o ? '.' + T(s, 0) : o),
+            k(i)
+              ? ((a = ''),
+                null != e && (a = e.replace(P, '$&/') + '/'),
+                A(i, t, a, '', function (e) {
+                  return e;
+                }))
+              : null != i &&
+                (_(i) &&
+                  (i = (function (e, t) {
+                    return { $$typeof: n, type: e.type, key: t, ref: e.ref, props: e.props, _owner: e._owner };
+                  })(i, a + (!i.key || (s && s.key === i.key) ? '' : ('' + i.key).replace(P, '$&/') + '/') + e)),
+                t.push(i)),
+            1
+          );
+        if (((s = 0), (o = '' === o ? '.' : o + ':'), k(e)))
+          for (var c = 0; c < e.length; c++) {
+            var u = o + T((l = e[c]), c);
+            s += A(l, t, a, u, i);
+          }
+        else if (
+          ((u = (function (e) {
+            return null === e || 'object' != typeof e
+              ? null
+              : 'function' == typeof (e = (f && e[f]) || e['@@iterator'])
+                ? e
+                : null;
+          })(e)),
+          'function' == typeof u)
+        )
+          for (e = u.call(e), c = 0; !(l = e.next()).done; ) s += A((l = l.value), t, a, (u = o + T(l, c++)), i);
+        else if ('object' === l)
+          throw (
+            ((t = String(e)),
+            Error(
+              'Objects are not valid as a React child (found: ' +
+                ('[object Object]' === t ? 'object with keys {' + Object.keys(e).join(', ') + '}' : t) +
+                '). If you meant to render a collection of children, use an array instead.',
+            ))
+          );
+        return s;
+      }
+      function L(e, t, n) {
+        if (null == e) return e;
+        var r = [],
+          a = 0;
+        return (
+          A(e, r, '', '', function (e) {
+            return t.call(n, e, a++);
+          }),
+          r
+        );
+      }
+      function j(e) {
+        if (-1 === e._status) {
+          var t = e._result;
+          (t = t()).then(
+            function (t) {
+              (0 !== e._status && -1 !== e._status) || ((e._status = 1), (e._result = t));
+            },
+            function (t) {
+              (0 !== e._status && -1 !== e._status) || ((e._status = 2), (e._result = t));
+            },
+          ),
+            -1 === e._status && ((e._status = 0), (e._result = t));
+        }
+        if (1 === e._status) return e._result.default;
+        throw e._result;
+      }
+      var R = { current: null },
+        I = { transition: null },
+        N = { ReactCurrentDispatcher: R, ReactCurrentBatchConfig: I, ReactCurrentOwner: x };
+      (t.Children = {
+        map: L,
+        forEach: function (e, t, n) {
+          L(
+            e,
+            function () {
+              t.apply(this, arguments);
+            },
+            n,
+          );
+        },
+        count: function (e) {
+          var t = 0;
+          return (
+            L(e, function () {
+              t++;
+            }),
+            t
+          );
+        },
+        toArray: function (e) {
+          return (
+            L(e, function (e) {
+              return e;
+            }) || []
+          );
+        },
+        only: function (e) {
+          if (!_(e)) throw Error('React.Children.only expected to receive a single React element child.');
+          return e;
+        },
+      }),
+        (t.Component = y),
+        (t.Fragment = a),
+        (t.Profiler = i),
+        (t.PureComponent = v),
+        (t.StrictMode = o),
+        (t.Suspense = u),
+        (t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = N),
+        (t.cloneElement = function (e, t, r) {
+          if (null == e) throw Error('React.cloneElement(...): The argument must be a React element, but you passed ' + e + '.');
+          var a = h({}, e.props),
+            o = e.key,
+            i = e.ref,
+            l = e._owner;
+          if (null != t) {
+            if (
+              (void 0 !== t.ref && ((i = t.ref), (l = x.current)),
+              void 0 !== t.key && (o = '' + t.key),
+              e.type && e.type.defaultProps)
+            )
+              var s = e.type.defaultProps;
+            for (c in t) S.call(t, c) && !E.hasOwnProperty(c) && (a[c] = void 0 === t[c] && void 0 !== s ? s[c] : t[c]);
+          }
+          var c = arguments.length - 2;
+          if (1 === c) a.children = r;
+          else if (1 < c) {
+            s = Array(c);
+            for (var u = 0; u < c; u++) s[u] = arguments[u + 2];
+            a.children = s;
+          }
+          return { $$typeof: n, type: e.type, key: o, ref: i, props: a, _owner: l };
+        }),
+        (t.createContext = function (e) {
+          return (
+            ((e = {
+              $$typeof: s,
+              _currentValue: e,
+              _currentValue2: e,
+              _threadCount: 0,
+              Provider: null,
+              Consumer: null,
+              _defaultValue: null,
+              _globalName: null,
+            }).Provider = { $$typeof: l, _context: e }),
+            (e.Consumer = e)
+          );
+        }),
+        (t.createElement = C),
+        (t.createFactory = function (e) {
+          var t = C.bind(null, e);
+          return (t.type = e), t;
+        }),
+        (t.createRef = function () {
+          return { current: null };
+        }),
+        (t.forwardRef = function (e) {
+          return { $$typeof: c, render: e };
+        }),
+        (t.isValidElement = _),
+        (t.lazy = function (e) {
+          return { $$typeof: p, _payload: { _status: -1, _result: e }, _init: j };
+        }),
+        (t.memo = function (e, t) {
+          return { $$typeof: d, type: e, compare: void 0 === t ? null : t };
+        }),
+        (t.startTransition = function (e) {
+          var t = I.transition;
+          I.transition = {};
+          try {
+            e();
+          } finally {
+            I.transition = t;
+          }
+        }),
+        (t.unstable_act = function () {
+          throw Error('act(...) is not supported in production builds of React.');
+        }),
+        (t.useCallback = function (e, t) {
+          return R.current.useCallback(e, t);
+        }),
+        (t.useContext = function (e) {
+          return R.current.useContext(e);
+        }),
+        (t.useDebugValue = function () {}),
+        (t.useDeferredValue = function (e) {
+          return R.current.useDeferredValue(e);
+        }),
+        (t.useEffect = function (e, t) {
+          return R.current.useEffect(e, t);
+        }),
+        (t.useId = function () {
+          return R.current.useId();
+        }),
+        (t.useImperativeHandle = function (e, t, n) {
+          return R.current.useImperativeHandle(e, t, n);
+        }),
+        (t.useInsertionEffect = function (e, t) {
+          return R.current.useInsertionEffect(e, t);
+        }),
+        (t.useLayoutEffect = function (e, t) {
+          return R.current.useLayoutEffect(e, t);
+        }),
+        (t.useMemo = function (e, t) {
+          return R.current.useMemo(e, t);
+        }),
+        (t.useReducer = function (e, t, n) {
+          return R.current.useReducer(e, t, n);
+        }),
+        (t.useRef = function (e) {
+          return R.current.useRef(e);
+        }),
+        (t.useState = function (e) {
+          return R.current.useState(e);
+        }),
+        (t.useSyncExternalStore = function (e, t, n) {
+          return R.current.useSyncExternalStore(e, t, n);
+        }),
+        (t.useTransition = function () {
+          return R.current.useTransition();
+        }),
+        (t.version = '18.2.0');
+    },
+    7294: (e, t, n) => {
+      'use strict';
+      e.exports = n(2408);
+    },
+    5893: (e, t, n) => {
+      'use strict';
+      e.exports = n(5251);
+    },
+    53: (e, t) => {
+      'use strict';
+      function n(e, t) {
+        var n = e.length;
+        e.push(t);
+        e: for (; 0 < n; ) {
+          var r = (n - 1) >>> 1,
+            a = e[r];
+          if (!(0 < o(a, t))) break e;
+          (e[r] = t), (e[n] = a), (n = r);
+        }
+      }
+      function r(e) {
+        return 0 === e.length ? null : e[0];
+      }
+      function a(e) {
+        if (0 === e.length) return null;
+        var t = e[0],
+          n = e.pop();
+        if (n !== t) {
+          e[0] = n;
+          e: for (var r = 0, a = e.length, i = a >>> 1; r < i; ) {
+            var l = 2 * (r + 1) - 1,
+              s = e[l],
+              c = l + 1,
+              u = e[c];
+            if (0 > o(s, n)) c < a && 0 > o(u, s) ? ((e[r] = u), (e[c] = n), (r = c)) : ((e[r] = s), (e[l] = n), (r = l));
+            else {
+              if (!(c < a && 0 > o(u, n))) break e;
+              (e[r] = u), (e[c] = n), (r = c);
+            }
+          }
+        }
+        return t;
+      }
+      function o(e, t) {
+        var n = e.sortIndex - t.sortIndex;
+        return 0 !== n ? n : e.id - t.id;
+      }
+      if ('object' == typeof performance && 'function' == typeof performance.now) {
+        var i = performance;
+        t.unstable_now = function () {
+          return i.now();
+        };
+      } else {
+        var l = Date,
+          s = l.now();
+        t.unstable_now = function () {
+          return l.now() - s;
+        };
+      }
+      var c = [],
+        u = [],
+        d = 1,
+        p = null,
+        f = 3,
+        m = !1,
+        h = !1,
+        g = !1,
+        y = 'function' == typeof setTimeout ? setTimeout : null,
+        b = 'function' == typeof clearTimeout ? clearTimeout : null,
+        v = 'undefined' != typeof setImmediate ? setImmediate : null;
+      function w(e) {
+        for (var t = r(u); null !== t; ) {
+          if (null === t.callback) a(u);
+          else {
+            if (!(t.startTime <= e)) break;
+            a(u), (t.sortIndex = t.expirationTime), n(c, t);
+          }
+          t = r(u);
+        }
+      }
+      function k(e) {
+        if (((g = !1), w(e), !h))
+          if (null !== r(c)) (h = !0), I(S);
+          else {
+            var t = r(u);
+            null !== t && N(k, t.startTime - e);
+          }
+      }
+      function S(e, n) {
+        (h = !1), g && ((g = !1), b(_), (_ = -1)), (m = !0);
+        var o = f;
+        try {
+          for (w(n), p = r(c); null !== p && (!(p.expirationTime > n) || (e && !A())); ) {
+            var i = p.callback;
+            if ('function' == typeof i) {
+              (p.callback = null), (f = p.priorityLevel);
+              var l = i(p.expirationTime <= n);
+              (n = t.unstable_now()), 'function' == typeof l ? (p.callback = l) : p === r(c) && a(c), w(n);
+            } else a(c);
+            p = r(c);
+          }
+          if (null !== p) var s = !0;
+          else {
+            var d = r(u);
+            null !== d && N(k, d.startTime - n), (s = !1);
+          }
+          return s;
+        } finally {
+          (p = null), (f = o), (m = !1);
+        }
+      }
+      'undefined' != typeof navigator &&
+        void 0 !== navigator.scheduling &&
+        void 0 !== navigator.scheduling.isInputPending &&
+        navigator.scheduling.isInputPending.bind(navigator.scheduling);
+      var x,
+        E = !1,
+        C = null,
+        _ = -1,
+        P = 5,
+        T = -1;
+      function A() {
+        return !(t.unstable_now() - T < P);
+      }
+      function L() {
+        if (null !== C) {
+          var e = t.unstable_now();
+          T = e;
+          var n = !0;
+          try {
+            n = C(!0, e);
+          } finally {
+            n ? x() : ((E = !1), (C = null));
+          }
+        } else E = !1;
+      }
+      if ('function' == typeof v)
+        x = function () {
+          v(L);
+        };
+      else if ('undefined' != typeof MessageChannel) {
+        var j = new MessageChannel(),
+          R = j.port2;
+        (j.port1.onmessage = L),
+          (x = function () {
+            R.postMessage(null);
+          });
+      } else
+        x = function () {
+          y(L, 0);
+        };
+      function I(e) {
+        (C = e), E || ((E = !0), x());
+      }
+      function N(e, n) {
+        _ = y(function () {
+          e(t.unstable_now());
+        }, n);
+      }
+      (t.unstable_IdlePriority = 5),
+        (t.unstable_ImmediatePriority = 1),
+        (t.unstable_LowPriority = 4),
+        (t.unstable_NormalPriority = 3),
+        (t.unstable_Profiling = null),
+        (t.unstable_UserBlockingPriority = 2),
+        (t.unstable_cancelCallback = function (e) {
+          e.callback = null;
+        }),
+        (t.unstable_continueExecution = function () {
+          h || m || ((h = !0), I(S));
+        }),
+        (t.unstable_forceFrameRate = function (e) {
+          0 > e || 125 < e
+            ? console.error(
+                'forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported',
+              )
+            : (P = 0 < e ? Math.floor(1e3 / e) : 5);
+        }),
+        (t.unstable_getCurrentPriorityLevel = function () {
+          return f;
+        }),
+        (t.unstable_getFirstCallbackNode = function () {
+          return r(c);
+        }),
+        (t.unstable_next = function (e) {
+          switch (f) {
+            case 1:
+            case 2:
+            case 3:
+              var t = 3;
+              break;
+            default:
+              t = f;
+          }
+          var n = f;
+          f = t;
+          try {
+            return e();
+          } finally {
+            f = n;
+          }
+        }),
+        (t.unstable_pauseExecution = function () {}),
+        (t.unstable_requestPaint = function () {}),
+        (t.unstable_runWithPriority = function (e, t) {
+          switch (e) {
+            case 1:
+            case 2:
+            case 3:
+            case 4:
+            case 5:
+              break;
+            default:
+              e = 3;
+          }
+          var n = f;
+          f = e;
+          try {
+            return t();
+          } finally {
+            f = n;
+          }
+        }),
+        (t.unstable_scheduleCallback = function (e, a, o) {
+          var i = t.unstable_now();
+          switch (
+            ('object' == typeof o && null !== o ? (o = 'number' == typeof (o = o.delay) && 0 < o ? i + o : i) : (o = i), e)
+          ) {
+            case 1:
+              var l = -1;
+              break;
+            case 2:
+              l = 250;
+              break;
+            case 5:
+              l = 1073741823;
+              break;
+            case 4:
+              l = 1e4;
+              break;
+            default:
+              l = 5e3;
+          }
+          return (
+            (e = { id: d++, callback: a, priorityLevel: e, startTime: o, expirationTime: (l = o + l), sortIndex: -1 }),
+            o > i
+              ? ((e.sortIndex = o), n(u, e), null === r(c) && e === r(u) && (g ? (b(_), (_ = -1)) : (g = !0), N(k, o - i)))
+              : ((e.sortIndex = l), n(c, e), h || m || ((h = !0), I(S))),
+            e
+          );
+        }),
+        (t.unstable_shouldYield = A),
+        (t.unstable_wrapCallback = function (e) {
+          var t = f;
+          return function () {
+            var n = f;
+            f = t;
+            try {
+              return e.apply(this, arguments);
+            } finally {
+              f = n;
+            }
+          };
+        });
+    },
+    3840: (e, t, n) => {
+      'use strict';
+      e.exports = n(53);
+    },
+    6774: e => {
+      e.exports = function (e, t, n, r) {
+        var a = n ? n.call(r, e, t) : void 0;
+        if (void 0 !== a) return !!a;
+        if (e === t) return !0;
+        if ('object' != typeof e || !e || 'object' != typeof t || !t) return !1;
+        var o = Object.keys(e),
+          i = Object.keys(t);
+        if (o.length !== i.length) return !1;
+        for (var l = Object.prototype.hasOwnProperty.bind(t), s = 0; s < o.length; s++) {
+          var c = o[s];
+          if (!l(c)) return !1;
+          var u = e[c],
+            d = t[c];
+          if (!1 === (a = n ? n.call(r, u, d, c) : void 0) || (void 0 === a && u !== d)) return !1;
+        }
+        return !0;
+      };
+    },
+    6809: (e, t, n) => {
+      'use strict';
+      n.r(t), n.d(t, { default: () => r });
+      const r = {
+        title: 'Reanimated Color Picker',
+        tagline: 'A Pure JavaScript Color Picker for React Native',
+        url: 'https://alabsi91.github.io',
+        baseUrl: '/reanimated-color-picker/',
+        onBrokenLinks: 'warn',
+        onBrokenMarkdownLinks: 'warn',
+        favicon: 'img/favicon.ico',
+        i18n: { defaultLocale: 'en', locales: ['en'], path: 'i18n', localeConfigs: {} },
+        scripts: [{ src: 'https://snack.expo.dev/embed.js', async: !0 }],
+        presets: [
+          [
+            'classic',
+            {
+              docs: { sidebarPath: 'F:\\ReactNative\\reanimated-color-picker\\docs\\sidebars.js' },
+              blog: !1,
+              theme: { customCss: 'F:\\ReactNative\\reanimated-color-picker\\docs\\src\\css\\custom.css' },
+            },
+          ],
+        ],
+        themeConfig: {
+          metadata: [
+            {
+              name: 'keywords',
+              content:
+                'react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette',
+            },
+          ],
+          colorMode: { defaultMode: 'dark', disableSwitch: !0, respectPrefersColorScheme: !1 },
+          navbar: {
+            title: 'Home',
+            items: [
+              { type: 'doc', docId: 'intro', position: 'left', label: 'Docs' },
+              { href: 'https://github.com/alabsi91/reanimated-color-picker', label: 'GitHub', position: 'right' },
+            ],
+            hideOnScroll: !1,
+          },
+          footer: { style: 'dark', copyright: 'Released under the MIT License.', links: [] },
+          prism: {
+            theme: {
+              plain: { color: '#393A34', backgroundColor: '#f6f8fa' },
+              styles: [
+                { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: '#999988', fontStyle: 'italic' } },
+                { types: ['namespace'], style: { opacity: 0.7 } },
+                { types: ['string', 'attr-value'], style: { color: '#e3116c' } },
+                { types: ['punctuation', 'operator'], style: { color: '#393A34' } },
+                {
+                  types: [
+                    'entity',
+                    'url',
+                    'symbol',
+                    'number',
+                    'boolean',
+                    'variable',
+                    'constant',
+                    'property',
+                    'regex',
+                    'inserted',
+                  ],
+                  style: { color: '#36acaa' },
+                },
+                { types: ['atrule', 'keyword', 'attr-name', 'selector'], style: { color: '#00a4db' } },
+                { types: ['function', 'deleted', 'tag'], style: { color: '#d73a49' } },
+                { types: ['function-variable'], style: { color: '#6f42c1' } },
+                { types: ['tag', 'selector', 'keyword'], style: { color: '#00009f' } },
+              ],
+            },
+            darkTheme: {
+              plain: { color: '#F8F8F2', backgroundColor: '#282A36' },
+              styles: [
+                { types: ['prolog', 'constant', 'builtin'], style: { color: 'rgb(189, 147, 249)' } },
+                { types: ['inserted', 'function'], style: { color: 'rgb(80, 250, 123)' } },
+                { types: ['deleted'], style: { color: 'rgb(255, 85, 85)' } },
+                { types: ['changed'], style: { color: 'rgb(255, 184, 108)' } },
+                { types: ['punctuation', 'symbol'], style: { color: 'rgb(248, 248, 242)' } },
+                { types: ['string', 'char', 'tag', 'selector'], style: { color: 'rgb(255, 121, 198)' } },
+                { types: ['keyword', 'variable'], style: { color: 'rgb(189, 147, 249)', fontStyle: 'italic' } },
+                { types: ['comment'], style: { color: 'rgb(98, 114, 164)' } },
+                { types: ['attr-name'], style: { color: 'rgb(241, 250, 140)' } },
+              ],
+            },
+            additionalLanguages: [],
+            magicComments: [
+              {
+                className: 'theme-code-block-highlighted-line',
+                line: 'highlight-next-line',
+                block: { start: 'highlight-start', end: 'highlight-end' },
+              },
+            ],
+          },
+          docs: { versionPersistence: 'localStorage', sidebar: { hideable: !1, autoCollapseCategories: !1 } },
+          tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 3 },
+        },
+        baseUrlIssueBanner: !0,
+        onBrokenAnchors: 'warn',
+        onDuplicateRoutes: 'warn',
+        staticDirectories: ['static'],
+        customFields: {},
+        plugins: [],
+        themes: [],
+        headTags: [],
+        stylesheets: [],
+        clientModules: [],
+        titleDelimiter: '|',
+        noIndex: !1,
+        markdown: { format: 'mdx', mermaid: !1, mdx1Compat: { comments: !0, admonitions: !0, headingIds: !0 } },
+      };
+    },
+    7462: (e, t, n) => {
+      'use strict';
+      function r() {
+        return (
+          (r = Object.assign
+            ? Object.assign.bind()
+            : function (e) {
+                for (var t = 1; t < arguments.length; t++) {
+                  var n = arguments[t];
+                  for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
+                }
+                return e;
+              }),
+          r.apply(this, arguments)
+        );
+      }
+      n.d(t, { Z: () => r });
+    },
+    5068: (e, t, n) => {
+      'use strict';
+      function r(e, t) {
+        return (
+          (r = Object.setPrototypeOf
+            ? Object.setPrototypeOf.bind()
+            : function (e, t) {
+                return (e.__proto__ = t), e;
+              }),
+          r(e, t)
+        );
+      }
+      function a(e, t) {
+        (e.prototype = Object.create(t.prototype)), (e.prototype.constructor = e), r(e, t);
+      }
+      n.d(t, { Z: () => a });
+    },
+    3366: (e, t, n) => {
+      'use strict';
+      function r(e, t) {
+        if (null == e) return {};
+        var n,
+          r,
+          a = {},
+          o = Object.keys(e);
+        for (r = 0; r < o.length; r++) (n = o[r]), t.indexOf(n) >= 0 || (a[n] = e[n]);
+        return a;
+      }
+      n.d(t, { Z: () => r });
+    },
+    512: (e, t, n) => {
+      'use strict';
+      function r(e) {
+        var t,
+          n,
+          a = '';
+        if ('string' == typeof e || 'number' == typeof e) a += e;
+        else if ('object' == typeof e)
+          if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (n = r(e[t])) && (a && (a += ' '), (a += n));
+          else for (t in e) e[t] && (a && (a += ' '), (a += t));
+        return a;
+      }
+      n.d(t, { Z: () => a });
+      const a = function () {
+        for (var e, t, n = 0, a = ''; n < arguments.length; ) (e = arguments[n++]) && (t = r(e)) && (a && (a += ' '), (a += t));
+        return a;
+      };
+    },
+    2573: (e, t, n) => {
+      'use strict';
+      n.d(t, { p1: () => P, y$: () => ee });
+      var r,
+        a,
+        o,
+        i,
+        l,
+        s,
+        c,
+        u = n(7294),
+        d = n(512),
+        p = Object.create,
+        f = Object.defineProperty,
+        m = Object.defineProperties,
+        h = Object.getOwnPropertyDescriptor,
+        g = Object.getOwnPropertyDescriptors,
+        y = Object.getOwnPropertyNames,
+        b = Object.getOwnPropertySymbols,
+        v = Object.getPrototypeOf,
+        w = Object.prototype.hasOwnProperty,
+        k = Object.prototype.propertyIsEnumerable,
+        S = (e, t, n) => (t in e ? f(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : (e[t] = n)),
+        x = (e, t) => {
+          for (var n in t || (t = {})) w.call(t, n) && S(e, n, t[n]);
+          if (b) for (var n of b(t)) k.call(t, n) && S(e, n, t[n]);
+          return e;
+        },
+        E = (e, t) => m(e, g(t)),
+        C = (e, t) => {
+          var n = {};
+          for (var r in e) w.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
+          if (null != e && b) for (var r of b(e)) t.indexOf(r) < 0 && k.call(e, r) && (n[r] = e[r]);
+          return n;
+        },
+        _ =
+          ((r = {
+            '../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js'(e, t) {
+              var n = (function () {
+                var e = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,
+                  t = 0,
+                  n = {},
+                  r = {
+                    util: {
+                      encode: function e(t) {
+                        return t instanceof a
+                          ? new a(t.type, e(t.content), t.alias)
+                          : Array.isArray(t)
+                            ? t.map(e)
+                            : t
+                                .replace(/&/g, '&amp;')
+                                .replace(/</g, '&lt;')
+                                .replace(/\u00a0/g, ' ');
+                      },
+                      type: function (e) {
+                        return Object.prototype.toString.call(e).slice(8, -1);
+                      },
+                      objId: function (e) {
+                        return e.__id || Object.defineProperty(e, '__id', { value: ++t }), e.__id;
+                      },
+                      clone: function e(t, n) {
+                        var a, o;
+                        switch (((n = n || {}), r.util.type(t))) {
+                          case 'Object':
+                            if (((o = r.util.objId(t)), n[o])) return n[o];
+                            for (var i in ((a = {}), (n[o] = a), t)) t.hasOwnProperty(i) && (a[i] = e(t[i], n));
+                            return a;
+                          case 'Array':
+                            return (
+                              (o = r.util.objId(t)),
+                              n[o]
+                                ? n[o]
+                                : ((a = []),
+                                  (n[o] = a),
+                                  t.forEach(function (t, r) {
+                                    a[r] = e(t, n);
+                                  }),
+                                  a)
+                            );
+                          default:
+                            return t;
+                        }
+                      },
+                      getLanguage: function (t) {
+                        for (; t; ) {
+                          var n = e.exec(t.className);
+                          if (n) return n[1].toLowerCase();
+                          t = t.parentElement;
+                        }
+                        return 'none';
+                      },
+                      setLanguage: function (t, n) {
+                        (t.className = t.className.replace(RegExp(e, 'gi'), '')), t.classList.add('language-' + n);
+                      },
+                      isActive: function (e, t, n) {
+                        for (var r = 'no-' + t; e; ) {
+                          var a = e.classList;
+                          if (a.contains(t)) return !0;
+                          if (a.contains(r)) return !1;
+                          e = e.parentElement;
+                        }
+                        return !!n;
+                      },
+                    },
+                    languages: {
+                      plain: n,
+                      plaintext: n,
+                      text: n,
+                      txt: n,
+                      extend: function (e, t) {
+                        var n = r.util.clone(r.languages[e]);
+                        for (var a in t) n[a] = t[a];
+                        return n;
+                      },
+                      insertBefore: function (e, t, n, a) {
+                        var o = (a = a || r.languages)[e],
+                          i = {};
+                        for (var l in o)
+                          if (o.hasOwnProperty(l)) {
+                            if (l == t) for (var s in n) n.hasOwnProperty(s) && (i[s] = n[s]);
+                            n.hasOwnProperty(l) || (i[l] = o[l]);
+                          }
+                        var c = a[e];
+                        return (
+                          (a[e] = i),
+                          r.languages.DFS(r.languages, function (t, n) {
+                            n === c && t != e && (this[t] = i);
+                          }),
+                          i
+                        );
+                      },
+                      DFS: function e(t, n, a, o) {
+                        o = o || {};
+                        var i = r.util.objId;
+                        for (var l in t)
+                          if (t.hasOwnProperty(l)) {
+                            n.call(t, l, t[l], a || l);
+                            var s = t[l],
+                              c = r.util.type(s);
+                            'Object' !== c || o[i(s)]
+                              ? 'Array' !== c || o[i(s)] || ((o[i(s)] = !0), e(s, n, l, o))
+                              : ((o[i(s)] = !0), e(s, n, null, o));
+                          }
+                      },
+                    },
+                    plugins: {},
+                    highlight: function (e, t, n) {
+                      var o = { code: e, grammar: t, language: n };
+                      if ((r.hooks.run('before-tokenize', o), !o.grammar))
+                        throw new Error('The language "' + o.language + '" has no grammar.');
+                      return (
+                        (o.tokens = r.tokenize(o.code, o.grammar)),
+                        r.hooks.run('after-tokenize', o),
+                        a.stringify(r.util.encode(o.tokens), o.language)
+                      );
+                    },
+                    tokenize: function (e, t) {
+                      var n = t.rest;
+                      if (n) {
+                        for (var r in n) t[r] = n[r];
+                        delete t.rest;
+                      }
+                      var a = new l();
+                      return (
+                        s(a, a.head, e),
+                        i(e, a, t, a.head, 0),
+                        (function (e) {
+                          for (var t = [], n = e.head.next; n !== e.tail; ) t.push(n.value), (n = n.next);
+                          return t;
+                        })(a)
+                      );
+                    },
+                    hooks: {
+                      all: {},
+                      add: function (e, t) {
+                        var n = r.hooks.all;
+                        (n[e] = n[e] || []), n[e].push(t);
+                      },
+                      run: function (e, t) {
+                        var n = r.hooks.all[e];
+                        if (n && n.length) for (var a, o = 0; (a = n[o++]); ) a(t);
+                      },
+                    },
+                    Token: a,
+                  };
+                function a(e, t, n, r) {
+                  (this.type = e), (this.content = t), (this.alias = n), (this.length = 0 | (r || '').length);
+                }
+                function o(e, t, n, r) {
+                  e.lastIndex = t;
+                  var a = e.exec(n);
+                  if (a && r && a[1]) {
+                    var o = a[1].length;
+                    (a.index += o), (a[0] = a[0].slice(o));
+                  }
+                  return a;
+                }
+                function i(e, t, n, l, u, d) {
+                  for (var p in n)
+                    if (n.hasOwnProperty(p) && n[p]) {
+                      var f = n[p];
+                      f = Array.isArray(f) ? f : [f];
+                      for (var m = 0; m < f.length; ++m) {
+                        if (d && d.cause == p + ',' + m) return;
+                        var h = f[m],
+                          g = h.inside,
+                          y = !!h.lookbehind,
+                          b = !!h.greedy,
+                          v = h.alias;
+                        if (b && !h.pattern.global) {
+                          var w = h.pattern.toString().match(/[imsuy]*$/)[0];
+                          h.pattern = RegExp(h.pattern.source, w + 'g');
+                        }
+                        for (
+                          var k = h.pattern || h, S = l.next, x = u;
+                          S !== t.tail && !(d && x >= d.reach);
+                          x += S.value.length, S = S.next
+                        ) {
+                          var E = S.value;
+                          if (t.length > e.length) return;
+                          if (!(E instanceof a)) {
+                            var C,
+                              _ = 1;
+                            if (b) {
+                              if (!(C = o(k, x, e, y)) || C.index >= e.length) break;
+                              var P = C.index,
+                                T = C.index + C[0].length,
+                                A = x;
+                              for (A += S.value.length; P >= A; ) A += (S = S.next).value.length;
+                              if (((x = A -= S.value.length), S.value instanceof a)) continue;
+                              for (var L = S; L !== t.tail && (A < T || 'string' == typeof L.value); L = L.next)
+                                _++, (A += L.value.length);
+                              _--, (E = e.slice(x, A)), (C.index -= x);
+                            } else if (!(C = o(k, 0, E, y))) continue;
+                            P = C.index;
+                            var j = C[0],
+                              R = E.slice(0, P),
+                              I = E.slice(P + j.length),
+                              N = x + E.length;
+                            d && N > d.reach && (d.reach = N);
+                            var O = S.prev;
+                            if (
+                              (R && ((O = s(t, O, R)), (x += R.length)),
+                              c(t, O, _),
+                              (S = s(t, O, new a(p, g ? r.tokenize(j, g) : j, v, j))),
+                              I && s(t, S, I),
+                              _ > 1)
+                            ) {
+                              var D = { cause: p + ',' + m, reach: N };
+                              i(e, t, n, S.prev, x, D), d && D.reach > d.reach && (d.reach = D.reach);
+                            }
+                          }
+                        }
+                      }
+                    }
+                }
+                function l() {
+                  var e = { value: null, prev: null, next: null },
+                    t = { value: null, prev: e, next: null };
+                  (e.next = t), (this.head = e), (this.tail = t), (this.length = 0);
+                }
+                function s(e, t, n) {
+                  var r = t.next,
+                    a = { value: n, prev: t, next: r };
+                  return (t.next = a), (r.prev = a), e.length++, a;
+                }
+                function c(e, t, n) {
+                  for (var r = t.next, a = 0; a < n && r !== e.tail; a++) r = r.next;
+                  (t.next = r), (r.prev = t), (e.length -= a);
+                }
+                return (
+                  (a.stringify = function e(t, n) {
+                    if ('string' == typeof t) return t;
+                    if (Array.isArray(t)) {
+                      var a = '';
+                      return (
+                        t.forEach(function (t) {
+                          a += e(t, n);
+                        }),
+                        a
+                      );
+                    }
+                    var o = {
+                        type: t.type,
+                        content: e(t.content, n),
+                        tag: 'span',
+                        classes: ['token', t.type],
+                        attributes: {},
+                        language: n,
+                      },
+                      i = t.alias;
+                    i && (Array.isArray(i) ? Array.prototype.push.apply(o.classes, i) : o.classes.push(i)),
+                      r.hooks.run('wrap', o);
+                    var l = '';
+                    for (var s in o.attributes) l += ' ' + s + '="' + (o.attributes[s] || '').replace(/"/g, '&quot;') + '"';
+                    return '<' + o.tag + ' class="' + o.classes.join(' ') + '"' + l + '>' + o.content + '</' + o.tag + '>';
+                  }),
+                  r
+                );
+              })();
+              (t.exports = n), (n.default = n);
+            },
+          }),
+          function () {
+            return a || (0, r[y(r)[0]])((a = { exports: {} }).exports, a), a.exports;
+          }),
+        P = ((e, t, n) => (
+          (n = null != e ? p(v(e)) : {}),
+          ((e, t, n, r) => {
+            if ((t && 'object' == typeof t) || 'function' == typeof t)
+              for (let a of y(t))
+                w.call(e, a) || a === n || f(e, a, { get: () => t[a], enumerable: !(r = h(t, a)) || r.enumerable });
+            return e;
+          })(!t && e && e.__esModule ? n : f(n, 'default', { value: e, enumerable: !0 }), e)
+        ))(_());
+      (P.languages.markup = {
+        comment: { pattern: /<!--(?:(?!<!--)[\s\S])*?-->/, greedy: !0 },
+        prolog: { pattern: /<\?[\s\S]+?\?>/, greedy: !0 },
+        doctype: {
+          pattern:
+            /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+          greedy: !0,
+          inside: {
+            'internal-subset': { pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/, lookbehind: !0, greedy: !0, inside: null },
+            string: { pattern: /"[^"]*"|'[^']*'/, greedy: !0 },
+            punctuation: /^<!|>$|[[\]]/,
+            'doctype-tag': /^DOCTYPE/i,
+            name: /[^\s<>'"]+/,
+          },
+        },
+        cdata: { pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i, greedy: !0 },
+        tag: {
+          pattern:
+            /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+          greedy: !0,
+          inside: {
+            tag: { pattern: /^<\/?[^\s>\/]+/, inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ } },
+            'special-attr': [],
+            'attr-value': {
+              pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+              inside: {
+                punctuation: [
+                  { pattern: /^=/, alias: 'attr-equals' },
+                  { pattern: /^(\s*)["']|["']$/, lookbehind: !0 },
+                ],
+              },
+            },
+            punctuation: /\/?>/,
+            'attr-name': { pattern: /[^\s>\/]+/, inside: { namespace: /^[^\s>\/:]+:/ } },
+          },
+        },
+        entity: [{ pattern: /&[\da-z]{1,8};/i, alias: 'named-entity' }, /&#x?[\da-f]{1,8};/i],
+      }),
+        (P.languages.markup.tag.inside['attr-value'].inside.entity = P.languages.markup.entity),
+        (P.languages.markup.doctype.inside['internal-subset'].inside = P.languages.markup),
+        P.hooks.add('wrap', function (e) {
+          'entity' === e.type && (e.attributes.title = e.content.replace(/&amp;/, '&'));
+        }),
+        Object.defineProperty(P.languages.markup.tag, 'addInlined', {
+          value: function (e, t) {
+            var n;
+            ((t =
+              (((n =
+                (((n = {})['language-' + t] = {
+                  pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+                  lookbehind: !0,
+                  inside: P.languages[t],
+                }),
+                (n.cdata = /^<!\[CDATA\[|\]\]>$/i),
+                { 'included-cdata': { pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i, inside: n } }))['language-' + t] = {
+                pattern: /[\s\S]+/,
+                inside: P.languages[t],
+              }),
+              {}))[e] = {
+              pattern: RegExp(
+                /(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(
+                  /__/g,
+                  function () {
+                    return e;
+                  },
+                ),
+                'i',
+              ),
+              lookbehind: !0,
+              greedy: !0,
+              inside: n,
+            }),
+              P.languages.insertBefore('markup', 'cdata', t);
+          },
+        }),
+        Object.defineProperty(P.languages.markup.tag, 'addAttribute', {
+          value: function (e, t) {
+            P.languages.markup.tag.inside['special-attr'].push({
+              pattern: RegExp(
+                /(^|["'\s])/.source + '(?:' + e + ')' + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
+                'i',
+              ),
+              lookbehind: !0,
+              inside: {
+                'attr-name': /^[^\s=]+/,
+                'attr-value': {
+                  pattern: /=[\s\S]+/,
+                  inside: {
+                    value: {
+                      pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+                      lookbehind: !0,
+                      alias: [t, 'language-' + t],
+                      inside: P.languages[t],
+                    },
+                    punctuation: [{ pattern: /^=/, alias: 'attr-equals' }, /"|'/],
+                  },
+                },
+              },
+            });
+          },
+        }),
+        (P.languages.html = P.languages.markup),
+        (P.languages.mathml = P.languages.markup),
+        (P.languages.svg = P.languages.markup),
+        (P.languages.xml = P.languages.extend('markup', {})),
+        (P.languages.ssml = P.languages.xml),
+        (P.languages.atom = P.languages.xml),
+        (P.languages.rss = P.languages.xml),
+        (o = P),
+        (i = { pattern: /\\[\\(){}[\]^$+*?|.]/, alias: 'escape' }),
+        (s =
+          '(?:[^\\\\-]|' +
+          (l = /\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source +
+          ')'),
+        (s = RegExp(s + '-' + s)),
+        (c = { pattern: /(<|')[^<>']+(?=[>']$)/, lookbehind: !0, alias: 'variable' }),
+        (o.languages.regex = {
+          'char-class': {
+            pattern: /((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,
+            lookbehind: !0,
+            inside: {
+              'char-class-negation': { pattern: /(^\[)\^/, lookbehind: !0, alias: 'operator' },
+              'char-class-punctuation': { pattern: /^\[|\]$/, alias: 'punctuation' },
+              range: { pattern: s, inside: { escape: l, 'range-punctuation': { pattern: /-/, alias: 'operator' } } },
+              'special-escape': i,
+              'char-set': { pattern: /\\[wsd]|\\p\{[^{}]+\}/i, alias: 'class-name' },
+              escape: l,
+            },
+          },
+          'special-escape': i,
+          'char-set': { pattern: /\.|\\[wsd]|\\p\{[^{}]+\}/i, alias: 'class-name' },
+          backreference: [
+            { pattern: /\\(?![123][0-7]{2})[1-9]/, alias: 'keyword' },
+            { pattern: /\\k<[^<>']+>/, alias: 'keyword', inside: { 'group-name': c } },
+          ],
+          anchor: { pattern: /[$^]|\\[ABbGZz]/, alias: 'function' },
+          escape: l,
+          group: [
+            {
+              pattern: /\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|<?[=!]|[idmnsuxU]+(?:-[idmnsuxU]+)?:?))?/,
+              alias: 'punctuation',
+              inside: { 'group-name': c },
+            },
+            { pattern: /\)/, alias: 'punctuation' },
+          ],
+          quantifier: { pattern: /(?:[+*?]|\{\d+(?:,\d*)?\})[?+]?/, alias: 'number' },
+          alternation: { pattern: /\|/, alias: 'keyword' },
+        }),
+        (P.languages.clike = {
+          comment: [
+            { pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/, lookbehind: !0, greedy: !0 },
+            { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 },
+          ],
+          string: { pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, greedy: !0 },
+          'class-name': {
+            pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
+            lookbehind: !0,
+            inside: { punctuation: /[.\\]/ },
+          },
+          keyword: /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+          boolean: /\b(?:false|true)\b/,
+          function: /\b\w+(?=\()/,
+          number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+          operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+          punctuation: /[{}[\];(),.:]/,
+        }),
+        (P.languages.javascript = P.languages.extend('clike', {
+          'class-name': [
+            P.languages.clike['class-name'],
+            {
+              pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
+              lookbehind: !0,
+            },
+          ],
+          keyword: [
+            { pattern: /((?:^|\})\s*)catch\b/, lookbehind: !0 },
+            {
+              pattern:
+                /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+              lookbehind: !0,
+            },
+          ],
+          function: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+          number: {
+            pattern: RegExp(
+              /(^|[^\w$])/.source +
+                '(?:' +
+                /NaN|Infinity/.source +
+                '|' +
+                /0[bB][01]+(?:_[01]+)*n?/.source +
+                '|' +
+                /0[oO][0-7]+(?:_[0-7]+)*n?/.source +
+                '|' +
+                /0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source +
+                '|' +
+                /\d+(?:_\d+)*n/.source +
+                '|' +
+                /(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source +
+                ')' +
+                /(?![\w$])/.source,
+            ),
+            lookbehind: !0,
+          },
+          operator: /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/,
+        })),
+        (P.languages.javascript['class-name'][0].pattern =
+          /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/),
+        P.languages.insertBefore('javascript', 'keyword', {
+          regex: {
+            pattern: RegExp(
+              /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source +
+                /\//.source +
+                '(?:' +
+                /(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source +
+                '|' +
+                /(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/
+                  .source +
+                ')' +
+                /(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source,
+            ),
+            lookbehind: !0,
+            greedy: !0,
+            inside: {
+              'regex-source': {
+                pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+                lookbehind: !0,
+                alias: 'language-regex',
+                inside: P.languages.regex,
+              },
+              'regex-delimiter': /^\/|\/$/,
+              'regex-flags': /^[a-z]+$/,
+            },
+          },
+          'function-variable': {
+            pattern:
+              /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
+            alias: 'function',
+          },
+          parameter: [
+            {
+              pattern:
+                /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
+              lookbehind: !0,
+              inside: P.languages.javascript,
+            },
+            {
+              pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
+              lookbehind: !0,
+              inside: P.languages.javascript,
+            },
+            {
+              pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
+              lookbehind: !0,
+              inside: P.languages.javascript,
+            },
+            {
+              pattern:
+                /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
+              lookbehind: !0,
+              inside: P.languages.javascript,
+            },
+          ],
+          constant: /\b[A-Z](?:[A-Z_]|\dx?)*\b/,
+        }),
+        P.languages.insertBefore('javascript', 'string', {
+          hashbang: { pattern: /^#!.*/, greedy: !0, alias: 'comment' },
+          'template-string': {
+            pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
+            greedy: !0,
+            inside: {
+              'template-punctuation': { pattern: /^`|`$/, alias: 'string' },
+              interpolation: {
+                pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
+                lookbehind: !0,
+                inside: {
+                  'interpolation-punctuation': { pattern: /^\$\{|\}$/, alias: 'punctuation' },
+                  rest: P.languages.javascript,
+                },
+              },
+              string: /[\s\S]+/,
+            },
+          },
+          'string-property': {
+            pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+            lookbehind: !0,
+            greedy: !0,
+            alias: 'property',
+          },
+        }),
+        P.languages.insertBefore('javascript', 'operator', {
+          'literal-property': {
+            pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+            lookbehind: !0,
+            alias: 'property',
+          },
+        }),
+        P.languages.markup &&
+          (P.languages.markup.tag.addInlined('script', 'javascript'),
+          P.languages.markup.tag.addAttribute(
+            /on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/
+              .source,
+            'javascript',
+          )),
+        (P.languages.js = P.languages.javascript),
+        (P.languages.actionscript = P.languages.extend('javascript', {
+          keyword:
+            /\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,
+          operator: /\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<<?|>>?>?|[!=]=?)=?|[~?@]/,
+        })),
+        (P.languages.actionscript['class-name'].alias = 'function'),
+        delete P.languages.actionscript.parameter,
+        delete P.languages.actionscript['literal-property'],
+        P.languages.markup &&
+          P.languages.insertBefore('actionscript', 'string', {
+            xml: {
+              pattern: /(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,
+              lookbehind: !0,
+              inside: P.languages.markup,
+            },
+          }),
+        (function (e) {
+          var t = /#(?!\{).+/,
+            n = { pattern: /#\{[^}]+\}/, alias: 'variable' };
+          (e.languages.coffeescript = e.languages.extend('javascript', {
+            comment: t,
+            string: [
+              { pattern: /'(?:\\[\s\S]|[^\\'])*'/, greedy: !0 },
+              { pattern: /"(?:\\[\s\S]|[^\\"])*"/, greedy: !0, inside: { interpolation: n } },
+            ],
+            keyword:
+              /\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,
+            'class-member': { pattern: /@(?!\d)\w+/, alias: 'variable' },
+          })),
+            e.languages.insertBefore('coffeescript', 'comment', {
+              'multiline-comment': { pattern: /###[\s\S]+?###/, alias: 'comment' },
+              'block-regex': { pattern: /\/{3}[\s\S]*?\/{3}/, alias: 'regex', inside: { comment: t, interpolation: n } },
+            }),
+            e.languages.insertBefore('coffeescript', 'string', {
+              'inline-javascript': {
+                pattern: /`(?:\\[\s\S]|[^\\`])*`/,
+                inside: {
+                  delimiter: { pattern: /^`|`$/, alias: 'punctuation' },
+                  script: { pattern: /[\s\S]+/, alias: 'language-javascript', inside: e.languages.javascript },
+                },
+              },
+              'multiline-string': [
+                { pattern: /'''[\s\S]*?'''/, greedy: !0, alias: 'string' },
+                { pattern: /"""[\s\S]*?"""/, greedy: !0, alias: 'string', inside: { interpolation: n } },
+              ],
+            }),
+            e.languages.insertBefore('coffeescript', 'keyword', { property: /(?!\d)\w+(?=\s*:(?!:))/ }),
+            delete e.languages.coffeescript['template-string'],
+            (e.languages.coffee = e.languages.coffeescript);
+        })(P),
+        (function (e) {
+          var t = (e.languages.javadoclike = {
+            parameter: { pattern: /(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m, lookbehind: !0 },
+            keyword: { pattern: /(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m, lookbehind: !0 },
+            punctuation: /[{}]/,
+          });
+          Object.defineProperty(t, 'addSupport', {
+            value: function (t, n) {
+              (t = 'string' == typeof t ? [t] : t).forEach(function (t) {
+                var r = function (e) {
+                    e.inside || (e.inside = {}), (e.inside.rest = n);
+                  },
+                  a = 'doc-comment';
+                if ((o = e.languages[t])) {
+                  var o,
+                    i = o[a];
+                  if (
+                    ((i =
+                      i ||
+                      (o = e.languages.insertBefore(t, 'comment', {
+                        'doc-comment': { pattern: /(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/, lookbehind: !0, alias: 'comment' },
+                      }))[a]) instanceof RegExp && (i = o[a] = { pattern: i }),
+                    Array.isArray(i))
+                  )
+                    for (var l = 0, s = i.length; l < s; l++) i[l] instanceof RegExp && (i[l] = { pattern: i[l] }), r(i[l]);
+                  else r(i);
+                }
+              });
+            },
+          }),
+            t.addSupport(['java', 'javascript', 'php'], t);
+        })(P),
+        (function (e) {
+          var t = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+          (t =
+            ((e.languages.css = {
+              comment: /\/\*[\s\S]*?\*\//,
+              atrule: {
+                pattern: RegExp('@[\\w-](?:' + /[^;{\s"']|\s+(?!\s)/.source + '|' + t.source + ')*?' + /(?:;|(?=\s*\{))/.source),
+                inside: {
+                  rule: /^@[\w-]+/,
+                  'selector-function-argument': {
+                    pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+                    lookbehind: !0,
+                    alias: 'selector',
+                  },
+                  keyword: { pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/, lookbehind: !0 },
+                },
+              },
+              url: {
+                pattern: RegExp('\\burl\\((?:' + t.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)', 'i'),
+                greedy: !0,
+                inside: {
+                  function: /^url/i,
+                  punctuation: /^\(|\)$/,
+                  string: { pattern: RegExp('^' + t.source + '$'), alias: 'url' },
+                },
+              },
+              selector: {
+                pattern: RegExp('(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|' + t.source + ')*(?=\\s*\\{)'),
+                lookbehind: !0,
+              },
+              string: { pattern: t, greedy: !0 },
+              property: {
+                pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+                lookbehind: !0,
+              },
+              important: /!important\b/i,
+              function: { pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i, lookbehind: !0 },
+              punctuation: /[(){};:,]/,
+            }),
+            (e.languages.css.atrule.inside.rest = e.languages.css),
+            e.languages.markup)) && (t.tag.addInlined('style', 'css'), t.tag.addAttribute('style', 'css'));
+        })(P),
+        (function (e) {
+          var t = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+            n =
+              ((t =
+                ((e.languages.css.selector = {
+                  pattern: e.languages.css.selector.pattern,
+                  lookbehind: !0,
+                  inside: (t = {
+                    'pseudo-element': /:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,
+                    'pseudo-class': /:[-\w]+/,
+                    class: /\.[-\w]+/,
+                    id: /#[-\w]+/,
+                    attribute: {
+                      pattern: RegExp('\\[(?:[^[\\]"\']|' + t.source + ')*\\]'),
+                      greedy: !0,
+                      inside: {
+                        punctuation: /^\[|\]$/,
+                        'case-sensitivity': { pattern: /(\s)[si]$/i, lookbehind: !0, alias: 'keyword' },
+                        namespace: {
+                          pattern: /^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,
+                          lookbehind: !0,
+                          inside: { punctuation: /\|$/ },
+                        },
+                        'attr-name': { pattern: /^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/, lookbehind: !0 },
+                        'attr-value': [t, { pattern: /(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/, lookbehind: !0 }],
+                        operator: /[|~*^$]?=/,
+                      },
+                    },
+                    'n-th': [
+                      {
+                        pattern: /(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,
+                        lookbehind: !0,
+                        inside: { number: /[\dn]+/, operator: /[+-]/ },
+                      },
+                      { pattern: /(\(\s*)(?:even|odd)(?=\s*\))/i, lookbehind: !0 },
+                    ],
+                    combinator: />|\+|~|\|\|/,
+                    punctuation: /[(),]/,
+                  }),
+                }),
+                (e.languages.css.atrule.inside['selector-function-argument'].inside = t),
+                e.languages.insertBefore('css', 'property', {
+                  variable: {
+                    pattern: /(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,
+                    lookbehind: !0,
+                  },
+                }),
+                { pattern: /(\b\d+)(?:%|[a-z]+(?![\w-]))/, lookbehind: !0 })),
+              { pattern: /(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/, lookbehind: !0 });
+          e.languages.insertBefore('css', 'function', {
+            operator: { pattern: /(\s)[+\-*\/](?=\s)/, lookbehind: !0 },
+            hexcode: { pattern: /\B#[\da-f]{3,8}\b/i, alias: 'color' },
+            color: [
+              {
+                pattern:
+                  /(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,
+                lookbehind: !0,
+              },
+              {
+                pattern:
+                  /\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,
+                inside: { unit: t, number: n, function: /[\w-]+(?=\()/, punctuation: /[(),]/ },
+              },
+            ],
+            entity: /\\[\da-f]{1,8}/i,
+            unit: t,
+            number: n,
+          });
+        })(P),
+        (function (e) {
+          var t = /[*&][^\s[\]{},]+/,
+            n = /!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,
+            r = '(?:' + n.source + '(?:[ \t]+' + t.source + ')?|' + t.source + '(?:[ \t]+' + n.source + ')?)',
+            a =
+              /(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*/.source.replace(
+                /<PLAIN>/g,
+                function () {
+                  return /[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source;
+                },
+              ),
+            o = /"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;
+          function i(e, t) {
+            t = (t || '').replace(/m/g, '') + 'm';
+            var n = /([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source
+              .replace(/<<prop>>/g, function () {
+                return r;
+              })
+              .replace(/<<value>>/g, function () {
+                return e;
+              });
+            return RegExp(n, t);
+          }
+          (e.languages.yaml = {
+            scalar: {
+              pattern: RegExp(
+                /([\-:]\s*(?:\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(
+                  /<<prop>>/g,
+                  function () {
+                    return r;
+                  },
+                ),
+              ),
+              lookbehind: !0,
+              alias: 'string',
+            },
+            comment: /#.*/,
+            key: {
+              pattern: RegExp(
+                /((?:^|[:\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\s*:\s)/.source
+                  .replace(/<<prop>>/g, function () {
+                    return r;
+                  })
+                  .replace(/<<key>>/g, function () {
+                    return '(?:' + a + '|' + o + ')';
+                  }),
+              ),
+              lookbehind: !0,
+              greedy: !0,
+              alias: 'atrule',
+            },
+            directive: { pattern: /(^[ \t]*)%.+/m, lookbehind: !0, alias: 'important' },
+            datetime: {
+              pattern: i(
+                /\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/
+                  .source,
+              ),
+              lookbehind: !0,
+              alias: 'number',
+            },
+            boolean: { pattern: i(/false|true/.source, 'i'), lookbehind: !0, alias: 'important' },
+            null: { pattern: i(/null|~/.source, 'i'), lookbehind: !0, alias: 'important' },
+            string: { pattern: i(o), lookbehind: !0, greedy: !0 },
+            number: {
+              pattern: i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source, 'i'),
+              lookbehind: !0,
+            },
+            tag: n,
+            important: t,
+            punctuation: /---|[:[\]{}\-,|>?]|\.\.\./,
+          }),
+            (e.languages.yml = e.languages.yaml);
+        })(P),
+        (function (e) {
+          var t = /(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;
+          function n(e) {
+            return (
+              (e = e.replace(/<inner>/g, function () {
+                return t;
+              })),
+              RegExp(/((?:^|[^\\])(?:\\{2})*)/.source + '(?:' + e + ')')
+            );
+          }
+          var r = /(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,
+            a = /\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g, function () {
+              return r;
+            }),
+            o = /\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,
+            i =
+              ((e.languages.markdown = e.languages.extend('markup', {})),
+              e.languages.insertBefore('markdown', 'prolog', {
+                'front-matter-block': {
+                  pattern: /(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,
+                  lookbehind: !0,
+                  greedy: !0,
+                  inside: {
+                    punctuation: /^---|---$/,
+                    'front-matter': { pattern: /\S+(?:\s+\S+)*/, alias: ['yaml', 'language-yaml'], inside: e.languages.yaml },
+                  },
+                },
+                blockquote: { pattern: /^>(?:[\t ]*>)*/m, alias: 'punctuation' },
+                table: {
+                  pattern: RegExp('^' + a + o + '(?:' + a + ')*', 'm'),
+                  inside: {
+                    'table-data-rows': {
+                      pattern: RegExp('^(' + a + o + ')(?:' + a + ')*$'),
+                      lookbehind: !0,
+                      inside: { 'table-data': { pattern: RegExp(r), inside: e.languages.markdown }, punctuation: /\|/ },
+                    },
+                    'table-line': {
+                      pattern: RegExp('^(' + a + ')' + o + '$'),
+                      lookbehind: !0,
+                      inside: { punctuation: /\||:?-{3,}:?/ },
+                    },
+                    'table-header-row': {
+                      pattern: RegExp('^' + a + '$'),
+                      inside: {
+                        'table-header': { pattern: RegExp(r), alias: 'important', inside: e.languages.markdown },
+                        punctuation: /\|/,
+                      },
+                    },
+                  },
+                },
+                code: [
+                  {
+                    pattern: /((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,
+                    lookbehind: !0,
+                    alias: 'keyword',
+                  },
+                  {
+                    pattern: /^```[\s\S]*?^```$/m,
+                    greedy: !0,
+                    inside: {
+                      'code-block': { pattern: /^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m, lookbehind: !0 },
+                      'code-language': { pattern: /^(```).+/, lookbehind: !0 },
+                      punctuation: /```/,
+                    },
+                  },
+                ],
+                title: [
+                  {
+                    pattern: /\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,
+                    alias: 'important',
+                    inside: { punctuation: /==+$|--+$/ },
+                  },
+                  { pattern: /(^\s*)#.+/m, lookbehind: !0, alias: 'important', inside: { punctuation: /^#+|#+$/ } },
+                ],
+                hr: { pattern: /(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m, lookbehind: !0, alias: 'punctuation' },
+                list: { pattern: /(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m, lookbehind: !0, alias: 'punctuation' },
+                'url-reference': {
+                  pattern:
+                    /!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,
+                  inside: {
+                    variable: { pattern: /^(!?\[)[^\]]+/, lookbehind: !0 },
+                    string: /(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,
+                    punctuation: /^[\[\]!:]|[<>]/,
+                  },
+                  alias: 'url',
+                },
+                bold: {
+                  pattern: n(
+                    /\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source,
+                  ),
+                  lookbehind: !0,
+                  greedy: !0,
+                  inside: { content: { pattern: /(^..)[\s\S]+(?=..$)/, lookbehind: !0, inside: {} }, punctuation: /\*\*|__/ },
+                },
+                italic: {
+                  pattern: n(
+                    /\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source,
+                  ),
+                  lookbehind: !0,
+                  greedy: !0,
+                  inside: { content: { pattern: /(^.)[\s\S]+(?=.$)/, lookbehind: !0, inside: {} }, punctuation: /[*_]/ },
+                },
+                strike: {
+                  pattern: n(/(~~?)(?:(?!~)<inner>)+\2/.source),
+                  lookbehind: !0,
+                  greedy: !0,
+                  inside: { content: { pattern: /(^~~?)[\s\S]+(?=\1$)/, lookbehind: !0, inside: {} }, punctuation: /~~?/ },
+                },
+                'code-snippet': {
+                  pattern: /(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,
+                  lookbehind: !0,
+                  greedy: !0,
+                  alias: ['code', 'keyword'],
+                },
+                url: {
+                  pattern: n(
+                    /!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source,
+                  ),
+                  lookbehind: !0,
+                  greedy: !0,
+                  inside: {
+                    operator: /^!/,
+                    content: { pattern: /(^\[)[^\]]+(?=\])/, lookbehind: !0, inside: {} },
+                    variable: { pattern: /(^\][ \t]?\[)[^\]]+(?=\]$)/, lookbehind: !0 },
+                    url: { pattern: /(^\]\()[^\s)]+/, lookbehind: !0 },
+                    string: { pattern: /(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/, lookbehind: !0 },
+                  },
+                },
+              }),
+              ['url', 'bold', 'italic', 'strike'].forEach(function (t) {
+                ['url', 'bold', 'italic', 'strike', 'code-snippet'].forEach(function (n) {
+                  t !== n && (e.languages.markdown[t].inside.content.inside[n] = e.languages.markdown[n]);
+                });
+              }),
+              e.hooks.add('after-tokenize', function (e) {
+                ('markdown' !== e.language && 'md' !== e.language) ||
+                  (function e(t) {
+                    if (t && 'string' != typeof t)
+                      for (var n = 0, r = t.length; n < r; n++) {
+                        var a,
+                          o = t[n];
+                        'code' !== o.type
+                          ? e(o.content)
+                          : ((a = o.content[1]),
+                            (o = o.content[3]),
+                            a &&
+                              o &&
+                              'code-language' === a.type &&
+                              'code-block' === o.type &&
+                              'string' == typeof a.content &&
+                              ((a = a.content.replace(/\b#/g, 'sharp').replace(/\b\+\+/g, 'pp')),
+                              (a = 'language-' + (a = (/[a-z][\w-]*/i.exec(a) || [''])[0].toLowerCase())),
+                              o.alias
+                                ? 'string' == typeof o.alias
+                                  ? (o.alias = [o.alias, a])
+                                  : o.alias.push(a)
+                                : (o.alias = [a])));
+                      }
+                  })(e.tokens);
+              }),
+              e.hooks.add('wrap', function (t) {
+                if ('code-block' === t.type) {
+                  for (var n = '', r = 0, a = t.classes.length; r < a; r++) {
+                    var o = t.classes[r];
+                    if ((o = /language-(.+)/.exec(o))) {
+                      n = o[1];
+                      break;
+                    }
+                  }
+                  var c,
+                    u = e.languages[n];
+                  u
+                    ? (t.content = e.highlight(
+                        t.content.replace(i, '').replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi, function (e, t) {
+                          var n;
+                          return '#' === (t = t.toLowerCase())[0]
+                            ? ((n = 'x' === t[1] ? parseInt(t.slice(2), 16) : Number(t.slice(1))), s(n))
+                            : l[t] || e;
+                        }),
+                        u,
+                        n,
+                      ))
+                    : n &&
+                      'none' !== n &&
+                      e.plugins.autoloader &&
+                      ((c = 'md-' + new Date().valueOf() + '-' + Math.floor(1e16 * Math.random())),
+                      (t.attributes.id = c),
+                      e.plugins.autoloader.loadLanguages(n, function () {
+                        var t = document.getElementById(c);
+                        t && (t.innerHTML = e.highlight(t.textContent, e.languages[n], n));
+                      }));
+                }
+              }),
+              RegExp(e.languages.markup.tag.pattern.source, 'gi')),
+            l = { amp: '&', lt: '<', gt: '>', quot: '"' },
+            s = String.fromCodePoint || String.fromCharCode;
+          e.languages.md = e.languages.markdown;
+        })(P),
+        (P.languages.graphql = {
+          comment: /#.*/,
+          description: {
+            pattern: /(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,
+            greedy: !0,
+            alias: 'string',
+            inside: {
+              'language-markdown': { pattern: /(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/, lookbehind: !0, inside: P.languages.markdown },
+            },
+          },
+          string: { pattern: /"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/, greedy: !0 },
+          number: /(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
+          boolean: /\b(?:false|true)\b/,
+          variable: /\$[a-z_]\w*/i,
+          directive: { pattern: /@[a-z_]\w*/i, alias: 'function' },
+          'attr-name': { pattern: /\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i, greedy: !0 },
+          'atom-input': { pattern: /\b[A-Z]\w*Input\b/, alias: 'class-name' },
+          scalar: /\b(?:Boolean|Float|ID|Int|String)\b/,
+          constant: /\b[A-Z][A-Z_\d]*\b/,
+          'class-name': {
+            pattern: /(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,
+            lookbehind: !0,
+          },
+          fragment: { pattern: /(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/, lookbehind: !0, alias: 'function' },
+          'definition-mutation': { pattern: /(\bmutation\s+)[a-zA-Z_]\w*/, lookbehind: !0, alias: 'function' },
+          'definition-query': { pattern: /(\bquery\s+)[a-zA-Z_]\w*/, lookbehind: !0, alias: 'function' },
+          keyword:
+            /\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,
+          operator: /[!=|&]|\.{3}/,
+          'property-query': /\w+(?=\s*\()/,
+          object: /\w+(?=\s*\{)/,
+          punctuation: /[!(){}\[\]:=,]/,
+          property: /\w+/,
+        }),
+        P.hooks.add('after-tokenize', function (e) {
+          if ('graphql' === e.language)
+            for (
+              var t = e.tokens.filter(function (e) {
+                  return 'string' != typeof e && 'comment' !== e.type && 'scalar' !== e.type;
+                }),
+                n = 0;
+              n < t.length;
+
+            ) {
+              var r = t[n++];
+              if ('keyword' === r.type && 'mutation' === r.content) {
+                var a = [];
+                if (d(['definition-mutation', 'punctuation']) && '(' === u(1).content) {
+                  n += 2;
+                  var o = p(/^\($/, /^\)$/);
+                  if (-1 === o) continue;
+                  for (; n < o; n++) {
+                    var i = u(0);
+                    'variable' === i.type && (f(i, 'variable-input'), a.push(i.content));
+                  }
+                  n = o + 1;
+                }
+                if (
+                  d(['punctuation', 'property-query']) &&
+                  '{' === u(0).content &&
+                  (n++, f(u(0), 'property-mutation'), 0 < a.length)
+                ) {
+                  var l = p(/^\{$/, /^\}$/);
+                  if (-1 !== l)
+                    for (var s = n; s < l; s++) {
+                      var c = t[s];
+                      'variable' === c.type && 0 <= a.indexOf(c.content) && f(c, 'variable-input');
+                    }
+                }
+              }
+            }
+          function u(e) {
+            return t[n + e];
+          }
+          function d(e, t) {
+            t = t || 0;
+            for (var n = 0; n < e.length; n++) {
+              var r = u(n + t);
+              if (!r || r.type !== e[n]) return;
+            }
+            return 1;
+          }
+          function p(e, r) {
+            for (var a = 1, o = n; o < t.length; o++) {
+              var i = t[o],
+                l = i.content;
+              if ('punctuation' === i.type && 'string' == typeof l)
+                if (e.test(l)) a++;
+                else if (r.test(l) && 0 == --a) return o;
+            }
+            return -1;
+          }
+          function f(e, t) {
+            var n = e.alias;
+            n ? Array.isArray(n) || (e.alias = n = [n]) : (e.alias = n = []), n.push(t);
+          }
+        }),
+        (P.languages.sql = {
+          comment: { pattern: /(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/, lookbehind: !0 },
+          variable: [{ pattern: /@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/, greedy: !0 }, /@[\w.$]+/],
+          string: { pattern: /(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/, greedy: !0, lookbehind: !0 },
+          identifier: {
+            pattern: /(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,
+            greedy: !0,
+            lookbehind: !0,
+            inside: { punctuation: /^`|`$/ },
+          },
+          function: /\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,
+          keyword:
+            /\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,
+          boolean: /\b(?:FALSE|NULL|TRUE)\b/i,
+          number: /\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,
+          operator:
+            /[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,
+          punctuation: /[;[\]()`,.]/,
+        }),
+        (function (e) {
+          var t = e.languages.javascript['template-string'],
+            n = t.pattern.source,
+            r = t.inside.interpolation,
+            a = r.inside['interpolation-punctuation'],
+            o = r.pattern.source;
+          function i(t, r) {
+            if (e.languages[t])
+              return {
+                pattern: RegExp('((?:' + r + ')\\s*)' + n),
+                lookbehind: !0,
+                greedy: !0,
+                inside: {
+                  'template-punctuation': { pattern: /^`|`$/, alias: 'string' },
+                  'embedded-code': { pattern: /[\s\S]+/, alias: t },
+                },
+              };
+          }
+          function l(t, n, r) {
+            return (
+              (t = { code: t, grammar: n, language: r }),
+              e.hooks.run('before-tokenize', t),
+              (t.tokens = e.tokenize(t.code, t.grammar)),
+              e.hooks.run('after-tokenize', t),
+              t.tokens
+            );
+          }
+          function s(t, n, i) {
+            var s = e.tokenize(t, { interpolation: { pattern: RegExp(o), lookbehind: !0 } }),
+              c = 0,
+              u = {},
+              d =
+                ((s = l(
+                  s
+                    .map(function (e) {
+                      if ('string' == typeof e) return e;
+                      var n, r;
+                      for (e = e.content; -1 !== t.indexOf(((r = c++), (n = '___' + i.toUpperCase() + '_' + r + '___'))); );
+                      return (u[n] = e), n;
+                    })
+                    .join(''),
+                  n,
+                  i,
+                )),
+                Object.keys(u));
+            return (
+              (c = 0),
+              (function t(n) {
+                for (var o = 0; o < n.length; o++) {
+                  if (c >= d.length) return;
+                  var i,
+                    s,
+                    p,
+                    f,
+                    m,
+                    h,
+                    g,
+                    y = n[o];
+                  'string' == typeof y || 'string' == typeof y.content
+                    ? ((i = d[c]),
+                      -1 !== (g = (h = 'string' == typeof y ? y : y.content).indexOf(i)) &&
+                        (++c,
+                        (s = h.substring(0, g)),
+                        (m = u[i]),
+                        (p = void 0),
+                        ((f = {})['interpolation-punctuation'] = a),
+                        3 === (f = e.tokenize(m, f)).length &&
+                          ((p = [1, 1]).push.apply(p, l(f[1], e.languages.javascript, 'javascript')), f.splice.apply(f, p)),
+                        (p = new e.Token('interpolation', f, r.alias, m)),
+                        (f = h.substring(g + i.length)),
+                        (m = []),
+                        s && m.push(s),
+                        m.push(p),
+                        f && (t((h = [f])), m.push.apply(m, h)),
+                        'string' == typeof y ? (n.splice.apply(n, [o, 1].concat(m)), (o += m.length - 1)) : (y.content = m)))
+                    : ((g = y.content), Array.isArray(g) ? t(g) : t([g]));
+                }
+              })(s),
+              new e.Token(i, s, 'language-' + i, t)
+            );
+          }
+          e.languages.javascript['template-string'] = [
+            i(
+              'css',
+              /\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/
+                .source,
+            ),
+            i('html', /\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),
+            i('svg', /\bsvg/.source),
+            i('markdown', /\b(?:markdown|md)/.source),
+            i('graphql', /\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),
+            i('sql', /\bsql/.source),
+            t,
+          ].filter(Boolean);
+          var c = { javascript: !0, js: !0, typescript: !0, ts: !0, jsx: !0, tsx: !0 };
+          function u(e) {
+            return 'string' == typeof e ? e : Array.isArray(e) ? e.map(u).join('') : u(e.content);
+          }
+          e.hooks.add('after-tokenize', function (t) {
+            t.language in c &&
+              (function t(n) {
+                for (var r = 0, a = n.length; r < a; r++) {
+                  var o,
+                    i,
+                    l,
+                    c = n[r];
+                  'string' != typeof c &&
+                    ((o = c.content),
+                    Array.isArray(o)
+                      ? 'template-string' === c.type
+                        ? ((c = o[1]),
+                          3 === o.length &&
+                            'string' != typeof c &&
+                            'embedded-code' === c.type &&
+                            ((i = u(c)), (c = c.alias), (c = Array.isArray(c) ? c[0] : c), (l = e.languages[c])) &&
+                            (o[1] = s(i, l, c)))
+                        : t(o)
+                      : 'string' != typeof o && t([o]));
+                }
+              })(t.tokens);
+          });
+        })(P),
+        (function (e) {
+          (e.languages.typescript = e.languages.extend('javascript', {
+            'class-name': {
+              pattern:
+                /(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,
+              lookbehind: !0,
+              greedy: !0,
+              inside: null,
+            },
+            builtin: /\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/,
+          })),
+            e.languages.typescript.keyword.push(
+              /\b(?:abstract|declare|is|keyof|readonly|require)\b/,
+              /\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,
+              /\btype\b(?=\s*(?:[\{*]|$))/,
+            ),
+            delete e.languages.typescript.parameter,
+            delete e.languages.typescript['literal-property'];
+          var t = e.languages.extend('typescript', {});
+          delete t['class-name'],
+            (e.languages.typescript['class-name'].inside = t),
+            e.languages.insertBefore('typescript', 'function', {
+              decorator: {
+                pattern: /@[$\w\xA0-\uFFFF]+/,
+                inside: { at: { pattern: /^@/, alias: 'operator' }, function: /^[\s\S]+/ },
+              },
+              'generic-function': {
+                pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,
+                greedy: !0,
+                inside: {
+                  function: /^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,
+                  generic: { pattern: /<[\s\S]+/, alias: 'class-name', inside: t },
+                },
+              },
+            }),
+            (e.languages.ts = e.languages.typescript);
+        })(P),
+        (function (e) {
+          var t = e.languages.javascript,
+            n = /\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,
+            r = '(@(?:arg|argument|param|property)\\s+(?:' + n + '\\s+)?)';
+          (e.languages.jsdoc = e.languages.extend('javadoclike', {
+            parameter: {
+              pattern: RegExp(r + /(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),
+              lookbehind: !0,
+              inside: { punctuation: /\./ },
+            },
+          })),
+            e.languages.insertBefore('jsdoc', 'keyword', {
+              'optional-parameter': {
+                pattern: RegExp(r + /\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),
+                lookbehind: !0,
+                inside: {
+                  parameter: { pattern: /(^\[)[$\w\xA0-\uFFFF\.]+/, lookbehind: !0, inside: { punctuation: /\./ } },
+                  code: { pattern: /(=)[\s\S]*(?=\]$)/, lookbehind: !0, inside: t, alias: 'language-javascript' },
+                  punctuation: /[=[\]]/,
+                },
+              },
+              'class-name': [
+                {
+                  pattern: RegExp(
+                    /(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:<TYPE>\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(
+                      /<TYPE>/g,
+                      function () {
+                        return n;
+                      },
+                    ),
+                  ),
+                  lookbehind: !0,
+                  inside: { punctuation: /\./ },
+                },
+                {
+                  pattern: RegExp('(@[a-z]+\\s+)' + n),
+                  lookbehind: !0,
+                  inside: {
+                    string: t.string,
+                    number: t.number,
+                    boolean: t.boolean,
+                    keyword: e.languages.typescript.keyword,
+                    operator: /=>|\.\.\.|[&|?:*]/,
+                    punctuation: /[.,;=<>{}()[\]]/,
+                  },
+                },
+              ],
+              example: {
+                pattern: /(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,
+                lookbehind: !0,
+                inside: {
+                  code: { pattern: /^([\t ]*(?:\*\s*)?)\S.*$/m, lookbehind: !0, inside: t, alias: 'language-javascript' },
+                },
+              },
+            }),
+            e.languages.javadoclike.addSupport('javascript', e.languages.jsdoc);
+        })(P),
+        (function (e) {
+          (e.languages.flow = e.languages.extend('javascript', {})),
+            e.languages.insertBefore('flow', 'keyword', {
+              type: [
+                { pattern: /\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/, alias: 'class-name' },
+              ],
+            }),
+            (e.languages.flow['function-variable'].pattern =
+              /(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i),
+            delete e.languages.flow.parameter,
+            e.languages.insertBefore('flow', 'operator', { 'flow-punctuation': { pattern: /\{\||\|\}/, alias: 'punctuation' } }),
+            Array.isArray(e.languages.flow.keyword) || (e.languages.flow.keyword = [e.languages.flow.keyword]),
+            e.languages.flow.keyword.unshift(
+              { pattern: /(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/, lookbehind: !0 },
+              {
+                pattern: /(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,
+                lookbehind: !0,
+              },
+            );
+        })(P),
+        (P.languages.n4js = P.languages.extend('javascript', {
+          keyword:
+            /\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,
+        })),
+        P.languages.insertBefore('n4js', 'constant', { annotation: { pattern: /@+\w+/, alias: 'operator' } }),
+        (P.languages.n4jsd = P.languages.n4js),
+        (function (e) {
+          function t(e, t) {
+            return RegExp(
+              e.replace(/<ID>/g, function () {
+                return /(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source;
+              }),
+              t,
+            );
+          }
+          e.languages.insertBefore('javascript', 'function-variable', {
+            'method-variable': {
+              pattern: RegExp('(\\.\\s*)' + e.languages.javascript['function-variable'].pattern.source),
+              lookbehind: !0,
+              alias: ['function-variable', 'method', 'function', 'property-access'],
+            },
+          }),
+            e.languages.insertBefore('javascript', 'function', {
+              method: {
+                pattern: RegExp('(\\.\\s*)' + e.languages.javascript.function.source),
+                lookbehind: !0,
+                alias: ['function', 'property-access'],
+              },
+            }),
+            e.languages.insertBefore('javascript', 'constant', {
+              'known-class-name': [
+                {
+                  pattern:
+                    /\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,
+                  alias: 'class-name',
+                },
+                { pattern: /\b(?:[A-Z]\w*)Error\b/, alias: 'class-name' },
+              ],
+            }),
+            e.languages.insertBefore('javascript', 'keyword', {
+              imports: {
+                pattern: t(
+                  /(\bimport\b\s*)(?:<ID>(?:\s*,\s*(?:\*\s*as\s+<ID>|\{[^{}]*\}))?|\*\s*as\s+<ID>|\{[^{}]*\})(?=\s*\bfrom\b)/
+                    .source,
+                ),
+                lookbehind: !0,
+                inside: e.languages.javascript,
+              },
+              exports: {
+                pattern: t(/(\bexport\b\s*)(?:\*(?:\s*as\s+<ID>)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),
+                lookbehind: !0,
+                inside: e.languages.javascript,
+              },
+            }),
+            e.languages.javascript.keyword.unshift(
+              { pattern: /\b(?:as|default|export|from|import)\b/, alias: 'module' },
+              {
+                pattern: /\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,
+                alias: 'control-flow',
+              },
+              { pattern: /\bnull\b/, alias: ['null', 'nil'] },
+              { pattern: /\bundefined\b/, alias: 'nil' },
+            ),
+            e.languages.insertBefore('javascript', 'operator', {
+              spread: { pattern: /\.{3}/, alias: 'operator' },
+              arrow: { pattern: /=>/, alias: 'operator' },
+            }),
+            e.languages.insertBefore('javascript', 'punctuation', {
+              'property-access': { pattern: t(/(\.\s*)#?<ID>/.source), lookbehind: !0 },
+              'maybe-class-name': { pattern: /(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/, lookbehind: !0 },
+              dom: {
+                pattern: /\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,
+                alias: 'variable',
+              },
+              console: { pattern: /\bconsole(?=\s*\.)/, alias: 'class-name' },
+            });
+          for (
+            var n = ['function', 'function-variable', 'method', 'method-variable', 'property-access'], r = 0;
+            r < n.length;
+            r++
+          ) {
+            var a = n[r],
+              o = e.languages.javascript[a];
+            a = (o = 'RegExp' === e.util.type(o) ? (e.languages.javascript[a] = { pattern: o }) : o).inside || {};
+            (o.inside = a)['maybe-class-name'] = /^[A-Z][\s\S]*/;
+          }
+        })(P),
+        (function (e) {
+          var t = e.util.clone(e.languages.javascript),
+            n = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,
+            r = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,
+            a = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
+          function o(e, t) {
+            return (
+              (e = e
+                .replace(/<S>/g, function () {
+                  return n;
+                })
+                .replace(/<BRACES>/g, function () {
+                  return r;
+                })
+                .replace(/<SPREAD>/g, function () {
+                  return a;
+                })),
+              RegExp(e, t)
+            );
+          }
+          function i(t) {
+            for (var n = [], r = 0; r < t.length; r++) {
+              var a = t[r],
+                o = !1;
+              'string' != typeof a &&
+                ('tag' === a.type && a.content[0] && 'tag' === a.content[0].type
+                  ? '</' === a.content[0].content[0].content
+                    ? 0 < n.length && n[n.length - 1].tagName === l(a.content[0].content[1]) && n.pop()
+                    : '/>' !== a.content[a.content.length - 1].content &&
+                      n.push({ tagName: l(a.content[0].content[1]), openedBraces: 0 })
+                  : 0 < n.length && 'punctuation' === a.type && '{' === a.content
+                    ? n[n.length - 1].openedBraces++
+                    : 0 < n.length && 0 < n[n.length - 1].openedBraces && 'punctuation' === a.type && '}' === a.content
+                      ? n[n.length - 1].openedBraces--
+                      : (o = !0)),
+                (o || 'string' == typeof a) &&
+                  0 < n.length &&
+                  0 === n[n.length - 1].openedBraces &&
+                  ((o = l(a)),
+                  r < t.length - 1 &&
+                    ('string' == typeof t[r + 1] || 'plain-text' === t[r + 1].type) &&
+                    ((o += l(t[r + 1])), t.splice(r + 1, 1)),
+                  0 < r &&
+                    ('string' == typeof t[r - 1] || 'plain-text' === t[r - 1].type) &&
+                    ((o = l(t[r - 1]) + o), t.splice(r - 1, 1), r--),
+                  (t[r] = new e.Token('plain-text', o, null, o))),
+                a.content && 'string' != typeof a.content && i(a.content);
+            }
+          }
+          (a = o(a).source),
+            (e.languages.jsx = e.languages.extend('markup', t)),
+            (e.languages.jsx.tag.pattern = o(
+              /<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/
+                .source,
+            )),
+            (e.languages.jsx.tag.inside.tag.pattern = /^<\/?[^\s>\/]*/),
+            (e.languages.jsx.tag.inside['attr-value'].pattern =
+              /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/),
+            (e.languages.jsx.tag.inside.tag.inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/),
+            (e.languages.jsx.tag.inside.comment = t.comment),
+            e.languages.insertBefore(
+              'inside',
+              'attr-name',
+              { spread: { pattern: o(/<SPREAD>/.source), inside: e.languages.jsx } },
+              e.languages.jsx.tag,
+            ),
+            e.languages.insertBefore(
+              'inside',
+              'special-attr',
+              {
+                script: {
+                  pattern: o(/=<BRACES>/.source),
+                  alias: 'language-javascript',
+                  inside: { 'script-punctuation': { pattern: /^=(?=\{)/, alias: 'punctuation' }, rest: e.languages.jsx },
+                },
+              },
+              e.languages.jsx.tag,
+            );
+          var l = function (e) {
+            return e ? ('string' == typeof e ? e : 'string' == typeof e.content ? e.content : e.content.map(l).join('')) : '';
+          };
+          e.hooks.add('after-tokenize', function (e) {
+            ('jsx' !== e.language && 'tsx' !== e.language) || i(e.tokens);
+          });
+        })(P),
+        (function (e) {
+          var t = e.util.clone(e.languages.typescript);
+          ((t =
+            ((e.languages.tsx = e.languages.extend('jsx', t)),
+            delete e.languages.tsx.parameter,
+            delete e.languages.tsx['literal-property'],
+            e.languages.tsx.tag)).pattern = RegExp(
+            /(^|[^\w$]|(?=<\/))/.source + '(?:' + t.pattern.source + ')',
+            t.pattern.flags,
+          )),
+            (t.lookbehind = !0);
+        })(P),
+        (P.languages.swift = {
+          comment: {
+            pattern: /(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,
+            lookbehind: !0,
+            greedy: !0,
+          },
+          'string-literal': [
+            {
+              pattern: RegExp(
+                /(^|[^"#])/.source +
+                  '(?:' +
+                  /"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source +
+                  '|' +
+                  /"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source +
+                  ')' +
+                  /(?!["#])/.source,
+              ),
+              lookbehind: !0,
+              greedy: !0,
+              inside: {
+                interpolation: { pattern: /(\\\()(?:[^()]|\([^()]*\))*(?=\))/, lookbehind: !0, inside: null },
+                'interpolation-punctuation': { pattern: /^\)|\\\($/, alias: 'punctuation' },
+                punctuation: /\\(?=[\r\n])/,
+                string: /[\s\S]+/,
+              },
+            },
+            {
+              pattern: RegExp(
+                /(^|[^"#])(#+)/.source +
+                  '(?:' +
+                  /"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source +
+                  '|' +
+                  /"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source +
+                  ')\\2',
+              ),
+              lookbehind: !0,
+              greedy: !0,
+              inside: {
+                interpolation: { pattern: /(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/, lookbehind: !0, inside: null },
+                'interpolation-punctuation': { pattern: /^\)|\\#+\($/, alias: 'punctuation' },
+                string: /[\s\S]+/,
+              },
+            },
+          ],
+          directive: {
+            pattern: RegExp(
+              /#/.source +
+                '(?:' +
+                /(?:elseif|if)\b/.source +
+                '(?:[ \t]*' +
+                /(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/
+                  .source +
+                ')+|' +
+                /(?:else|endif)\b/.source +
+                ')',
+            ),
+            alias: 'property',
+            inside: {
+              'directive-name': /^#\w+/,
+              boolean: /\b(?:false|true)\b/,
+              number: /\b\d+(?:\.\d+)*\b/,
+              operator: /!|&&|\|\||[<>]=?/,
+              punctuation: /[(),]/,
+            },
+          },
+          literal: {
+            pattern: /#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,
+            alias: 'constant',
+          },
+          'other-directive': { pattern: /#\w+\b/, alias: 'property' },
+          attribute: { pattern: /@\w+/, alias: 'atrule' },
+          'function-definition': { pattern: /(\bfunc\s+)\w+/, lookbehind: !0, alias: 'function' },
+          label: {
+            pattern: /\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,
+            lookbehind: !0,
+            alias: 'important',
+          },
+          keyword:
+            /\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,
+          boolean: /\b(?:false|true)\b/,
+          nil: { pattern: /\bnil\b/, alias: 'constant' },
+          'short-argument': /\$\d+\b/,
+          omit: { pattern: /\b_\b/, alias: 'keyword' },
+          number: /\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,
+          'class-name': /\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,
+          function: /\b[a-z_]\w*(?=\s*\()/i,
+          constant: /\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,
+          operator: /[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,
+          punctuation: /[{}[\]();,.:\\]/,
+        }),
+        P.languages.swift['string-literal'].forEach(function (e) {
+          e.inside.interpolation.inside = P.languages.swift;
+        }),
+        (function (e) {
+          (e.languages.kotlin = e.languages.extend('clike', {
+            keyword: {
+              pattern:
+                /(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,
+              lookbehind: !0,
+            },
+            function: [
+              { pattern: /(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/, greedy: !0 },
+              { pattern: /(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/, lookbehind: !0, greedy: !0 },
+            ],
+            number:
+              /\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,
+            operator: /\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/,
+          })),
+            delete e.languages.kotlin['class-name'];
+          var t = {
+            'interpolation-punctuation': { pattern: /^\$\{?|\}$/, alias: 'punctuation' },
+            expression: { pattern: /[\s\S]+/, inside: e.languages.kotlin },
+          };
+          e.languages.insertBefore('kotlin', 'string', {
+            'string-literal': [
+              {
+                pattern: /"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,
+                alias: 'multiline',
+                inside: { interpolation: { pattern: /\$(?:[a-z_]\w*|\{[^{}]*\})/i, inside: t }, string: /[\s\S]+/ },
+              },
+              {
+                pattern: /"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,
+                alias: 'singleline',
+                inside: {
+                  interpolation: { pattern: /((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i, lookbehind: !0, inside: t },
+                  string: /[\s\S]+/,
+                },
+              },
+            ],
+            char: { pattern: /'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/, greedy: !0 },
+          }),
+            delete e.languages.kotlin.string,
+            e.languages.insertBefore('kotlin', 'keyword', {
+              annotation: { pattern: /\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/, alias: 'builtin' },
+            }),
+            e.languages.insertBefore('kotlin', 'function', { label: { pattern: /\b\w+@|@\w+\b/, alias: 'symbol' } }),
+            (e.languages.kt = e.languages.kotlin),
+            (e.languages.kts = e.languages.kotlin);
+        })(P),
+        (P.languages.c = P.languages.extend('clike', {
+          comment: { pattern: /\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/, greedy: !0 },
+          string: { pattern: /"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/, greedy: !0 },
+          'class-name': {
+            pattern: /(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,
+            lookbehind: !0,
+          },
+          keyword:
+            /\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,
+          function: /\b[a-z_]\w*(?=\s*\()/i,
+          number:
+            /(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,
+          operator: />>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/,
+        })),
+        P.languages.insertBefore('c', 'string', { char: { pattern: /'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/, greedy: !0 } }),
+        P.languages.insertBefore('c', 'string', {
+          macro: {
+            pattern: /(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,
+            lookbehind: !0,
+            greedy: !0,
+            alias: 'property',
+            inside: {
+              string: [{ pattern: /^(#\s*include\s*)<[^>]+>/, lookbehind: !0 }, P.languages.c.string],
+              char: P.languages.c.char,
+              comment: P.languages.c.comment,
+              'macro-name': [
+                { pattern: /(^#\s*define\s+)\w+\b(?!\()/i, lookbehind: !0 },
+                { pattern: /(^#\s*define\s+)\w+\b(?=\()/i, lookbehind: !0, alias: 'function' },
+              ],
+              directive: { pattern: /^(#\s*)[a-z]+/, lookbehind: !0, alias: 'keyword' },
+              'directive-hash': /^#/,
+              punctuation: /##|\\(?=[\r\n])/,
+              expression: { pattern: /\S[\s\S]*/, inside: P.languages.c },
+            },
+          },
+        }),
+        P.languages.insertBefore('c', 'function', {
+          constant:
+            /\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/,
+        }),
+        delete P.languages.c.boolean,
+        (P.languages.objectivec = P.languages.extend('c', {
+          string: { pattern: /@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/, greedy: !0 },
+          keyword:
+            /\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,
+          operator: /-[->]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/@]/,
+        })),
+        delete P.languages.objectivec['class-name'],
+        (P.languages.objc = P.languages.objectivec),
+        (P.languages.reason = P.languages.extend('clike', {
+          string: { pattern: /"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/, greedy: !0 },
+          'class-name': /\b[A-Z]\w*/,
+          keyword:
+            /\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,
+          operator: /\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/,
+        })),
+        P.languages.insertBefore('reason', 'class-name', {
+          char: { pattern: /'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/, greedy: !0 },
+          constructor: /\b[A-Z]\w*\b(?!\s*\.)/,
+          label: { pattern: /\b[a-z]\w*(?=::)/, alias: 'symbol' },
+        }),
+        delete P.languages.reason.function,
+        (function (e) {
+          for (var t = /\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|<self>)*\*\//.source, n = 0; n < 2; n++)
+            t = t.replace(/<self>/g, function () {
+              return t;
+            });
+          (t = t.replace(/<self>/g, function () {
+            return /[^\s\S]/.source;
+          })),
+            (e.languages.rust = {
+              comment: [
+                { pattern: RegExp(/(^|[^\\])/.source + t), lookbehind: !0, greedy: !0 },
+                { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 },
+              ],
+              string: { pattern: /b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/, greedy: !0 },
+              char: { pattern: /b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/, greedy: !0 },
+              attribute: {
+                pattern: /#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,
+                greedy: !0,
+                alias: 'attr-name',
+                inside: { string: null },
+              },
+              'closure-params': {
+                pattern: /([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,
+                lookbehind: !0,
+                greedy: !0,
+                inside: { 'closure-punctuation': { pattern: /^\||\|$/, alias: 'punctuation' }, rest: null },
+              },
+              'lifetime-annotation': { pattern: /'\w+/, alias: 'symbol' },
+              'fragment-specifier': { pattern: /(\$\w+:)[a-z]+/, lookbehind: !0, alias: 'punctuation' },
+              variable: /\$\w+/,
+              'function-definition': { pattern: /(\bfn\s+)\w+/, lookbehind: !0, alias: 'function' },
+              'type-definition': { pattern: /(\b(?:enum|struct|trait|type|union)\s+)\w+/, lookbehind: !0, alias: 'class-name' },
+              'module-declaration': [
+                { pattern: /(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/, lookbehind: !0, alias: 'namespace' },
+                {
+                  pattern: /(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,
+                  lookbehind: !0,
+                  alias: 'namespace',
+                  inside: { punctuation: /::/ },
+                },
+              ],
+              keyword: [
+                /\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,
+                /\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/,
+              ],
+              function: /\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,
+              macro: { pattern: /\b\w+!/, alias: 'property' },
+              constant: /\b[A-Z_][A-Z_\d]+\b/,
+              'class-name': /\b[A-Z]\w*\b/,
+              namespace: { pattern: /(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/, inside: { punctuation: /::/ } },
+              number:
+                /\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,
+              boolean: /\b(?:false|true)\b/,
+              punctuation: /->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,
+              operator: /[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<<?=?|>>?=?|[@?]/,
+            }),
+            (e.languages.rust['closure-params'].inside.rest = e.languages.rust),
+            (e.languages.rust.attribute.inside.string = e.languages.rust.string);
+        })(P),
+        (P.languages.go = P.languages.extend('clike', {
+          string: { pattern: /(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/, lookbehind: !0, greedy: !0 },
+          keyword:
+            /\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,
+          boolean: /\b(?:_|false|iota|nil|true)\b/,
+          number: [
+            /\b0(?:b[01_]+|o[0-7_]+)i?\b/i,
+            /\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,
+            /(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i,
+          ],
+          operator: /[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,
+          builtin:
+            /\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/,
+        })),
+        P.languages.insertBefore('go', 'string', { char: { pattern: /'(?:\\.|[^'\\\r\n]){0,10}'/, greedy: !0 } }),
+        delete P.languages.go['class-name'],
+        (function (e) {
+          var t =
+              /\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,
+            n = /\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g, function () {
+              return t.source;
+            });
+          (e.languages.cpp = e.languages.extend('c', {
+            'class-name': [
+              {
+                pattern: RegExp(
+                  /(\b(?:class|concept|enum|struct|typename)\s+)(?!<keyword>)\w+/.source.replace(/<keyword>/g, function () {
+                    return t.source;
+                  }),
+                ),
+                lookbehind: !0,
+              },
+              /\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,
+              /\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,
+              /\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/,
+            ],
+            keyword: t,
+            number: {
+              pattern:
+                /(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,
+              greedy: !0,
+            },
+            operator:
+              />>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,
+            boolean: /\b(?:false|true)\b/,
+          })),
+            e.languages.insertBefore('cpp', 'string', {
+              module: {
+                pattern: RegExp(
+                  /(\b(?:import|module)\s+)/.source +
+                    '(?:' +
+                    /"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source +
+                    '|' +
+                    /<mod-name>(?:\s*:\s*<mod-name>)?|:\s*<mod-name>/.source.replace(/<mod-name>/g, function () {
+                      return n;
+                    }) +
+                    ')',
+                ),
+                lookbehind: !0,
+                greedy: !0,
+                inside: { string: /^[<"][\s\S]+/, operator: /:/, punctuation: /\./ },
+              },
+              'raw-string': { pattern: /R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/, alias: 'string', greedy: !0 },
+            }),
+            e.languages.insertBefore('cpp', 'keyword', {
+              'generic-function': {
+                pattern: /\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,
+                inside: { function: /^\w+/, generic: { pattern: /<[\s\S]+/, alias: 'class-name', inside: e.languages.cpp } },
+              },
+            }),
+            e.languages.insertBefore('cpp', 'operator', { 'double-colon': { pattern: /::/, alias: 'punctuation' } }),
+            e.languages.insertBefore('cpp', 'class-name', {
+              'base-clause': {
+                pattern: /(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,
+                lookbehind: !0,
+                greedy: !0,
+                inside: e.languages.extend('cpp', {}),
+              },
+            }),
+            e.languages.insertBefore(
+              'inside',
+              'double-colon',
+              { 'class-name': /\b[a-z_]\w*\b(?!\s*::)/i },
+              e.languages.cpp['base-clause'],
+            );
+        })(P),
+        (P.languages.python = {
+          comment: { pattern: /(^|[^\\])#.*/, lookbehind: !0, greedy: !0 },
+          'string-interpolation': {
+            pattern: /(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,
+            greedy: !0,
+            inside: {
+              interpolation: {
+                pattern: /((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,
+                lookbehind: !0,
+                inside: {
+                  'format-spec': { pattern: /(:)[^:(){}]+(?=\}$)/, lookbehind: !0 },
+                  'conversion-option': { pattern: /![sra](?=[:}]$)/, alias: 'punctuation' },
+                  rest: null,
+                },
+              },
+              string: /[\s\S]+/,
+            },
+          },
+          'triple-quoted-string': { pattern: /(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i, greedy: !0, alias: 'string' },
+          string: { pattern: /(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i, greedy: !0 },
+          function: { pattern: /((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g, lookbehind: !0 },
+          'class-name': { pattern: /(\bclass\s+)\w+/i, lookbehind: !0 },
+          decorator: {
+            pattern: /(^[\t ]*)@\w+(?:\.\w+)*/m,
+            lookbehind: !0,
+            alias: ['annotation', 'punctuation'],
+            inside: { punctuation: /\./ },
+          },
+          keyword:
+            /\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,
+          builtin:
+            /\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
+          boolean: /\b(?:False|None|True)\b/,
+          number:
+            /\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,
+          operator: /[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,
+          punctuation: /[{}[\];(),.:]/,
+        }),
+        (P.languages.python['string-interpolation'].inside.interpolation.inside.rest = P.languages.python),
+        (P.languages.py = P.languages.python);
+      ((e, t) => {
+        for (var n in t) f(e, n, { get: t[n], enumerable: !0 });
+      })(
+        {},
+        {
+          dracula: () => T,
+          duotoneDark: () => A,
+          duotoneLight: () => L,
+          github: () => j,
+          jettwaveDark: () => q,
+          jettwaveLight: () => Z,
+          nightOwl: () => R,
+          nightOwlLight: () => I,
+          oceanicNext: () => D,
+          okaidia: () => F,
+          oneDark: () => G,
+          oneLight: () => W,
+          palenight: () => M,
+          shadesOfPurple: () => B,
+          synthwave84: () => z,
+          ultramin: () => $,
+          vsDark: () => U,
+          vsLight: () => H,
+        },
+      );
+      var T = {
+          plain: { color: '#F8F8F2', backgroundColor: '#282A36' },
+          styles: [
+            { types: ['prolog', 'constant', 'builtin'], style: { color: 'rgb(189, 147, 249)' } },
+            { types: ['inserted', 'function'], style: { color: 'rgb(80, 250, 123)' } },
+            { types: ['deleted'], style: { color: 'rgb(255, 85, 85)' } },
+            { types: ['changed'], style: { color: 'rgb(255, 184, 108)' } },
+            { types: ['punctuation', 'symbol'], style: { color: 'rgb(248, 248, 242)' } },
+            { types: ['string', 'char', 'tag', 'selector'], style: { color: 'rgb(255, 121, 198)' } },
+            { types: ['keyword', 'variable'], style: { color: 'rgb(189, 147, 249)', fontStyle: 'italic' } },
+            { types: ['comment'], style: { color: 'rgb(98, 114, 164)' } },
+            { types: ['attr-name'], style: { color: 'rgb(241, 250, 140)' } },
+          ],
+        },
+        A = {
+          plain: { backgroundColor: '#2a2734', color: '#9a86fd' },
+          styles: [
+            { types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'], style: { color: '#6c6783' } },
+            { types: ['namespace'], style: { opacity: 0.7 } },
+            { types: ['tag', 'operator', 'number'], style: { color: '#e09142' } },
+            { types: ['property', 'function'], style: { color: '#9a86fd' } },
+            { types: ['tag-id', 'selector', 'atrule-id'], style: { color: '#eeebff' } },
+            { types: ['attr-name'], style: { color: '#c4b9fe' } },
+            {
+              types: [
+                'boolean',
+                'string',
+                'entity',
+                'url',
+                'attr-value',
+                'keyword',
+                'control',
+                'directive',
+                'unit',
+                'statement',
+                'regex',
+                'atrule',
+                'placeholder',
+                'variable',
+              ],
+              style: { color: '#ffcc99' },
+            },
+            { types: ['deleted'], style: { textDecorationLine: 'line-through' } },
+            { types: ['inserted'], style: { textDecorationLine: 'underline' } },
+            { types: ['italic'], style: { fontStyle: 'italic' } },
+            { types: ['important', 'bold'], style: { fontWeight: 'bold' } },
+            { types: ['important'], style: { color: '#c4b9fe' } },
+          ],
+        },
+        L = {
+          plain: { backgroundColor: '#faf8f5', color: '#728fcb' },
+          styles: [
+            { types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'], style: { color: '#b6ad9a' } },
+            { types: ['namespace'], style: { opacity: 0.7 } },
+            { types: ['tag', 'operator', 'number'], style: { color: '#063289' } },
+            { types: ['property', 'function'], style: { color: '#b29762' } },
+            { types: ['tag-id', 'selector', 'atrule-id'], style: { color: '#2d2006' } },
+            { types: ['attr-name'], style: { color: '#896724' } },
+            {
+              types: [
+                'boolean',
+                'string',
+                'entity',
+                'url',
+                'attr-value',
+                'keyword',
+                'control',
+                'directive',
+                'unit',
+                'statement',
+                'regex',
+                'atrule',
+              ],
+              style: { color: '#728fcb' },
+            },
+            { types: ['placeholder', 'variable'], style: { color: '#93abdc' } },
+            { types: ['deleted'], style: { textDecorationLine: 'line-through' } },
+            { types: ['inserted'], style: { textDecorationLine: 'underline' } },
+            { types: ['italic'], style: { fontStyle: 'italic' } },
+            { types: ['important', 'bold'], style: { fontWeight: 'bold' } },
+            { types: ['important'], style: { color: '#896724' } },
+          ],
+        },
+        j = {
+          plain: { color: '#393A34', backgroundColor: '#f6f8fa' },
+          styles: [
+            { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: '#999988', fontStyle: 'italic' } },
+            { types: ['namespace'], style: { opacity: 0.7 } },
+            { types: ['string', 'attr-value'], style: { color: '#e3116c' } },
+            { types: ['punctuation', 'operator'], style: { color: '#393A34' } },
+            {
+              types: ['entity', 'url', 'symbol', 'number', 'boolean', 'variable', 'constant', 'property', 'regex', 'inserted'],
+              style: { color: '#36acaa' },
+            },
+            { types: ['atrule', 'keyword', 'attr-name', 'selector'], style: { color: '#00a4db' } },
+            { types: ['function', 'deleted', 'tag'], style: { color: '#d73a49' } },
+            { types: ['function-variable'], style: { color: '#6f42c1' } },
+            { types: ['tag', 'selector', 'keyword'], style: { color: '#00009f' } },
+          ],
+        },
+        R = {
+          plain: { color: '#d6deeb', backgroundColor: '#011627' },
+          styles: [
+            { types: ['changed'], style: { color: 'rgb(162, 191, 252)', fontStyle: 'italic' } },
+            { types: ['deleted'], style: { color: 'rgba(239, 83, 80, 0.56)', fontStyle: 'italic' } },
+            { types: ['inserted', 'attr-name'], style: { color: 'rgb(173, 219, 103)', fontStyle: 'italic' } },
+            { types: ['comment'], style: { color: 'rgb(99, 119, 119)', fontStyle: 'italic' } },
+            { types: ['string', 'url'], style: { color: 'rgb(173, 219, 103)' } },
+            { types: ['variable'], style: { color: 'rgb(214, 222, 235)' } },
+            { types: ['number'], style: { color: 'rgb(247, 140, 108)' } },
+            { types: ['builtin', 'char', 'constant', 'function'], style: { color: 'rgb(130, 170, 255)' } },
+            { types: ['punctuation'], style: { color: 'rgb(199, 146, 234)' } },
+            { types: ['selector', 'doctype'], style: { color: 'rgb(199, 146, 234)', fontStyle: 'italic' } },
+            { types: ['class-name'], style: { color: 'rgb(255, 203, 139)' } },
+            { types: ['tag', 'operator', 'keyword'], style: { color: 'rgb(127, 219, 202)' } },
+            { types: ['boolean'], style: { color: 'rgb(255, 88, 116)' } },
+            { types: ['property'], style: { color: 'rgb(128, 203, 196)' } },
+            { types: ['namespace'], style: { color: 'rgb(178, 204, 214)' } },
+          ],
+        },
+        I = {
+          plain: { color: '#403f53', backgroundColor: '#FBFBFB' },
+          styles: [
+            { types: ['changed'], style: { color: 'rgb(162, 191, 252)', fontStyle: 'italic' } },
+            { types: ['deleted'], style: { color: 'rgba(239, 83, 80, 0.56)', fontStyle: 'italic' } },
+            { types: ['inserted', 'attr-name'], style: { color: 'rgb(72, 118, 214)', fontStyle: 'italic' } },
+            { types: ['comment'], style: { color: 'rgb(152, 159, 177)', fontStyle: 'italic' } },
+            { types: ['string', 'builtin', 'char', 'constant', 'url'], style: { color: 'rgb(72, 118, 214)' } },
+            { types: ['variable'], style: { color: 'rgb(201, 103, 101)' } },
+            { types: ['number'], style: { color: 'rgb(170, 9, 130)' } },
+            { types: ['punctuation'], style: { color: 'rgb(153, 76, 195)' } },
+            { types: ['function', 'selector', 'doctype'], style: { color: 'rgb(153, 76, 195)', fontStyle: 'italic' } },
+            { types: ['class-name'], style: { color: 'rgb(17, 17, 17)' } },
+            { types: ['tag'], style: { color: 'rgb(153, 76, 195)' } },
+            { types: ['operator', 'property', 'keyword', 'namespace'], style: { color: 'rgb(12, 150, 155)' } },
+            { types: ['boolean'], style: { color: 'rgb(188, 84, 84)' } },
+          ],
+        },
+        N = '#c5a5c5',
+        O = '#8dc891',
+        D = {
+          plain: { backgroundColor: '#282c34', color: '#ffffff' },
+          styles: [
+            { types: ['attr-name'], style: { color: N } },
+            { types: ['attr-value'], style: { color: O } },
+            { types: ['comment', 'block-comment', 'prolog', 'doctype', 'cdata', 'shebang'], style: { color: '#999999' } },
+            { types: ['property', 'number', 'function-name', 'constant', 'symbol', 'deleted'], style: { color: '#5a9bcf' } },
+            { types: ['boolean'], style: { color: '#ff8b50' } },
+            { types: ['tag'], style: { color: '#fc929e' } },
+            { types: ['string'], style: { color: O } },
+            { types: ['punctuation'], style: { color: O } },
+            { types: ['selector', 'char', 'builtin', 'inserted'], style: { color: '#D8DEE9' } },
+            { types: ['function'], style: { color: '#79b6f2' } },
+            { types: ['operator', 'entity', 'url', 'variable'], style: { color: '#d7deea' } },
+            { types: ['keyword'], style: { color: N } },
+            { types: ['atrule', 'class-name'], style: { color: '#FAC863' } },
+            { types: ['important'], style: { fontWeight: '400' } },
+            { types: ['bold'], style: { fontWeight: 'bold' } },
+            { types: ['italic'], style: { fontStyle: 'italic' } },
+            { types: ['namespace'], style: { opacity: 0.7 } },
+          ],
+        },
+        F = {
+          plain: { color: '#f8f8f2', backgroundColor: '#272822' },
+          styles: [
+            { types: ['changed'], style: { color: 'rgb(162, 191, 252)', fontStyle: 'italic' } },
+            { types: ['deleted'], style: { color: '#f92672', fontStyle: 'italic' } },
+            { types: ['inserted'], style: { color: 'rgb(173, 219, 103)', fontStyle: 'italic' } },
+            { types: ['comment'], style: { color: '#8292a2', fontStyle: 'italic' } },
+            { types: ['string', 'url'], style: { color: '#a6e22e' } },
+            { types: ['variable'], style: { color: '#f8f8f2' } },
+            { types: ['number'], style: { color: '#ae81ff' } },
+            { types: ['builtin', 'char', 'constant', 'function', 'class-name'], style: { color: '#e6db74' } },
+            { types: ['punctuation'], style: { color: '#f8f8f2' } },
+            { types: ['selector', 'doctype'], style: { color: '#a6e22e', fontStyle: 'italic' } },
+            { types: ['tag', 'operator', 'keyword'], style: { color: '#66d9ef' } },
+            { types: ['boolean'], style: { color: '#ae81ff' } },
+            { types: ['namespace'], style: { color: 'rgb(178, 204, 214)', opacity: 0.7 } },
+            { types: ['tag', 'property'], style: { color: '#f92672' } },
+            { types: ['attr-name'], style: { color: '#a6e22e !important' } },
+            { types: ['doctype'], style: { color: '#8292a2' } },
+            { types: ['rule'], style: { color: '#e6db74' } },
+          ],
+        },
+        M = {
+          plain: { color: '#bfc7d5', backgroundColor: '#292d3e' },
+          styles: [
+            { types: ['comment'], style: { color: 'rgb(105, 112, 152)', fontStyle: 'italic' } },
+            { types: ['string', 'inserted'], style: { color: 'rgb(195, 232, 141)' } },
+            { types: ['number'], style: { color: 'rgb(247, 140, 108)' } },
+            { types: ['builtin', 'char', 'constant', 'function'], style: { color: 'rgb(130, 170, 255)' } },
+            { types: ['punctuation', 'selector'], style: { color: 'rgb(199, 146, 234)' } },
+            { types: ['variable'], style: { color: 'rgb(191, 199, 213)' } },
+            { types: ['class-name', 'attr-name'], style: { color: 'rgb(255, 203, 107)' } },
+            { types: ['tag', 'deleted'], style: { color: 'rgb(255, 85, 114)' } },
+            { types: ['operator'], style: { color: 'rgb(137, 221, 255)' } },
+            { types: ['boolean'], style: { color: 'rgb(255, 88, 116)' } },
+            { types: ['keyword'], style: { fontStyle: 'italic' } },
+            { types: ['doctype'], style: { color: 'rgb(199, 146, 234)', fontStyle: 'italic' } },
+            { types: ['namespace'], style: { color: 'rgb(178, 204, 214)' } },
+            { types: ['url'], style: { color: 'rgb(221, 221, 221)' } },
+          ],
+        },
+        B = {
+          plain: { color: '#9EFEFF', backgroundColor: '#2D2A55' },
+          styles: [
+            { types: ['changed'], style: { color: 'rgb(255, 238, 128)' } },
+            { types: ['deleted'], style: { color: 'rgba(239, 83, 80, 0.56)' } },
+            { types: ['inserted'], style: { color: 'rgb(173, 219, 103)' } },
+            { types: ['comment'], style: { color: 'rgb(179, 98, 255)', fontStyle: 'italic' } },
+            { types: ['punctuation'], style: { color: 'rgb(255, 255, 255)' } },
+            { types: ['constant'], style: { color: 'rgb(255, 98, 140)' } },
+            { types: ['string', 'url'], style: { color: 'rgb(165, 255, 144)' } },
+            { types: ['variable'], style: { color: 'rgb(255, 238, 128)' } },
+            { types: ['number', 'boolean'], style: { color: 'rgb(255, 98, 140)' } },
+            { types: ['attr-name'], style: { color: 'rgb(255, 180, 84)' } },
+            {
+              types: ['keyword', 'operator', 'property', 'namespace', 'tag', 'selector', 'doctype'],
+              style: { color: 'rgb(255, 157, 0)' },
+            },
+            { types: ['builtin', 'char', 'constant', 'function', 'class-name'], style: { color: 'rgb(250, 208, 0)' } },
+          ],
+        },
+        z = {
+          plain: {
+            backgroundColor: 'linear-gradient(to bottom, #2a2139 75%, #34294f)',
+            backgroundImage: '#34294f',
+            color: '#f92aad',
+            textShadow: '0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3',
+          },
+          styles: [
+            {
+              types: ['comment', 'block-comment', 'prolog', 'doctype', 'cdata'],
+              style: { color: '#495495', fontStyle: 'italic' },
+            },
+            { types: ['punctuation'], style: { color: '#ccc' } },
+            { types: ['tag', 'attr-name', 'namespace', 'number', 'unit', 'hexcode', 'deleted'], style: { color: '#e2777a' } },
+            {
+              types: ['property', 'selector'],
+              style: { color: '#72f1b8', textShadow: '0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475' },
+            },
+            { types: ['function-name'], style: { color: '#6196cc' } },
+            {
+              types: ['boolean', 'selector-id', 'function'],
+              style: { color: '#fdfdfd', textShadow: '0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975' },
+            },
+            {
+              types: ['class-name', 'maybe-class-name', 'builtin'],
+              style: { color: '#fff5f6', textShadow: '0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75' },
+            },
+            {
+              types: ['constant', 'symbol'],
+              style: { color: '#f92aad', textShadow: '0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3' },
+            },
+            {
+              types: ['important', 'atrule', 'keyword', 'selector-class'],
+              style: { color: '#f4eee4', textShadow: '0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575' },
+            },
+            { types: ['string', 'char', 'attr-value', 'regex', 'variable'], style: { color: '#f87c32' } },
+            { types: ['parameter'], style: { fontStyle: 'italic' } },
+            { types: ['entity', 'url'], style: { color: '#67cdcc' } },
+            { types: ['operator'], style: { color: 'ffffffee' } },
+            { types: ['important', 'bold'], style: { fontWeight: 'bold' } },
+            { types: ['italic'], style: { fontStyle: 'italic' } },
+            { types: ['entity'], style: { cursor: 'help' } },
+            { types: ['inserted'], style: { color: 'green' } },
+          ],
+        },
+        $ = {
+          plain: { color: '#282a2e', backgroundColor: '#ffffff' },
+          styles: [
+            { types: ['comment'], style: { color: 'rgb(197, 200, 198)' } },
+            { types: ['string', 'number', 'builtin', 'variable'], style: { color: 'rgb(150, 152, 150)' } },
+            { types: ['class-name', 'function', 'tag', 'attr-name'], style: { color: 'rgb(40, 42, 46)' } },
+          ],
+        },
+        U = {
+          plain: { color: '#9CDCFE', backgroundColor: '#1E1E1E' },
+          styles: [
+            { types: ['prolog'], style: { color: 'rgb(0, 0, 128)' } },
+            { types: ['comment'], style: { color: 'rgb(106, 153, 85)' } },
+            { types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'], style: { color: 'rgb(86, 156, 214)' } },
+            { types: ['number', 'inserted'], style: { color: 'rgb(181, 206, 168)' } },
+            { types: ['constant'], style: { color: 'rgb(100, 102, 149)' } },
+            { types: ['attr-name', 'variable'], style: { color: 'rgb(156, 220, 254)' } },
+            { types: ['deleted', 'string', 'attr-value', 'template-punctuation'], style: { color: 'rgb(206, 145, 120)' } },
+            { types: ['selector'], style: { color: 'rgb(215, 186, 125)' } },
+            { types: ['tag'], style: { color: 'rgb(78, 201, 176)' } },
+            { types: ['tag'], languages: ['markup'], style: { color: 'rgb(86, 156, 214)' } },
+            { types: ['punctuation', 'operator'], style: { color: 'rgb(212, 212, 212)' } },
+            { types: ['punctuation'], languages: ['markup'], style: { color: '#808080' } },
+            { types: ['function'], style: { color: 'rgb(220, 220, 170)' } },
+            { types: ['class-name'], style: { color: 'rgb(78, 201, 176)' } },
+            { types: ['char'], style: { color: 'rgb(209, 105, 105)' } },
+          ],
+        },
+        H = {
+          plain: { color: '#000000', backgroundColor: '#ffffff' },
+          styles: [
+            { types: ['comment'], style: { color: 'rgb(0, 128, 0)' } },
+            { types: ['builtin'], style: { color: 'rgb(0, 112, 193)' } },
+            { types: ['number', 'variable', 'inserted'], style: { color: 'rgb(9, 134, 88)' } },
+            { types: ['operator'], style: { color: 'rgb(0, 0, 0)' } },
+            { types: ['constant', 'char'], style: { color: 'rgb(129, 31, 63)' } },
+            { types: ['tag'], style: { color: 'rgb(128, 0, 0)' } },
+            { types: ['attr-name'], style: { color: 'rgb(255, 0, 0)' } },
+            { types: ['deleted', 'string'], style: { color: 'rgb(163, 21, 21)' } },
+            { types: ['changed', 'punctuation'], style: { color: 'rgb(4, 81, 165)' } },
+            { types: ['function', 'keyword'], style: { color: 'rgb(0, 0, 255)' } },
+            { types: ['class-name'], style: { color: 'rgb(38, 127, 153)' } },
+          ],
+        },
+        q = {
+          plain: { color: '#f8fafc', backgroundColor: '#011627' },
+          styles: [
+            { types: ['prolog'], style: { color: '#000080' } },
+            { types: ['comment'], style: { color: '#6A9955' } },
+            { types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'], style: { color: '#569CD6' } },
+            { types: ['number', 'inserted'], style: { color: '#B5CEA8' } },
+            { types: ['constant'], style: { color: '#f8fafc' } },
+            { types: ['attr-name', 'variable'], style: { color: '#9CDCFE' } },
+            { types: ['deleted', 'string', 'attr-value', 'template-punctuation'], style: { color: '#cbd5e1' } },
+            { types: ['selector'], style: { color: '#D7BA7D' } },
+            { types: ['tag'], style: { color: '#0ea5e9' } },
+            { types: ['tag'], languages: ['markup'], style: { color: '#0ea5e9' } },
+            { types: ['punctuation', 'operator'], style: { color: '#D4D4D4' } },
+            { types: ['punctuation'], languages: ['markup'], style: { color: '#808080' } },
+            { types: ['function'], style: { color: '#7dd3fc' } },
+            { types: ['class-name'], style: { color: '#0ea5e9' } },
+            { types: ['char'], style: { color: '#D16969' } },
+          ],
+        },
+        Z = {
+          plain: { color: '#0f172a', backgroundColor: '#f1f5f9' },
+          styles: [
+            { types: ['prolog'], style: { color: '#000080' } },
+            { types: ['comment'], style: { color: '#6A9955' } },
+            { types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'], style: { color: '#0c4a6e' } },
+            { types: ['number', 'inserted'], style: { color: '#B5CEA8' } },
+            { types: ['constant'], style: { color: '#0f172a' } },
+            { types: ['attr-name', 'variable'], style: { color: '#0c4a6e' } },
+            { types: ['deleted', 'string', 'attr-value', 'template-punctuation'], style: { color: '#64748b' } },
+            { types: ['selector'], style: { color: '#D7BA7D' } },
+            { types: ['tag'], style: { color: '#0ea5e9' } },
+            { types: ['tag'], languages: ['markup'], style: { color: '#0ea5e9' } },
+            { types: ['punctuation', 'operator'], style: { color: '#475569' } },
+            { types: ['punctuation'], languages: ['markup'], style: { color: '#808080' } },
+            { types: ['function'], style: { color: '#0e7490' } },
+            { types: ['class-name'], style: { color: '#0ea5e9' } },
+            { types: ['char'], style: { color: '#D16969' } },
+          ],
+        },
+        G = {
+          plain: { backgroundColor: 'hsl(220, 13%, 18%)', color: 'hsl(220, 14%, 71%)', textShadow: '0 1px rgba(0, 0, 0, 0.3)' },
+          styles: [
+            { types: ['comment', 'prolog', 'cdata'], style: { color: 'hsl(220, 10%, 40%)' } },
+            { types: ['doctype', 'punctuation', 'entity'], style: { color: 'hsl(220, 14%, 71%)' } },
+            {
+              types: ['attr-name', 'class-name', 'maybe-class-name', 'boolean', 'constant', 'number', 'atrule'],
+              style: { color: 'hsl(29, 54%, 61%)' },
+            },
+            { types: ['keyword'], style: { color: 'hsl(286, 60%, 67%)' } },
+            { types: ['property', 'tag', 'symbol', 'deleted', 'important'], style: { color: 'hsl(355, 65%, 65%)' } },
+            {
+              types: ['selector', 'string', 'char', 'builtin', 'inserted', 'regex', 'attr-value'],
+              style: { color: 'hsl(95, 38%, 62%)' },
+            },
+            { types: ['variable', 'operator', 'function'], style: { color: 'hsl(207, 82%, 66%)' } },
+            { types: ['url'], style: { color: 'hsl(187, 47%, 55%)' } },
+            { types: ['deleted'], style: { textDecorationLine: 'line-through' } },
+            { types: ['inserted'], style: { textDecorationLine: 'underline' } },
+            { types: ['italic'], style: { fontStyle: 'italic' } },
+            { types: ['important', 'bold'], style: { fontWeight: 'bold' } },
+            { types: ['important'], style: { color: 'hsl(220, 14%, 71%)' } },
+          ],
+        },
+        W = {
+          plain: { backgroundColor: 'hsl(230, 1%, 98%)', color: 'hsl(230, 8%, 24%)' },
+          styles: [
+            { types: ['comment', 'prolog', 'cdata'], style: { color: 'hsl(230, 4%, 64%)' } },
+            { types: ['doctype', 'punctuation', 'entity'], style: { color: 'hsl(230, 8%, 24%)' } },
+            {
+              types: ['attr-name', 'class-name', 'boolean', 'constant', 'number', 'atrule'],
+              style: { color: 'hsl(35, 99%, 36%)' },
+            },
+            { types: ['keyword'], style: { color: 'hsl(301, 63%, 40%)' } },
+            { types: ['property', 'tag', 'symbol', 'deleted', 'important'], style: { color: 'hsl(5, 74%, 59%)' } },
+            {
+              types: ['selector', 'string', 'char', 'builtin', 'inserted', 'regex', 'attr-value', 'punctuation'],
+              style: { color: 'hsl(119, 34%, 47%)' },
+            },
+            { types: ['variable', 'operator', 'function'], style: { color: 'hsl(221, 87%, 60%)' } },
+            { types: ['url'], style: { color: 'hsl(198, 99%, 37%)' } },
+            { types: ['deleted'], style: { textDecorationLine: 'line-through' } },
+            { types: ['inserted'], style: { textDecorationLine: 'underline' } },
+            { types: ['italic'], style: { fontStyle: 'italic' } },
+            { types: ['important', 'bold'], style: { fontWeight: 'bold' } },
+            { types: ['important'], style: { color: 'hsl(230, 8%, 24%)' } },
+          ],
+        },
+        V = (e, t) => {
+          const { plain: n } = e,
+            r = e.styles.reduce((e, n) => {
+              const { languages: r, style: a } = n;
+              return (
+                (r && !r.includes(t)) ||
+                  n.types.forEach(t => {
+                    const n = x(x({}, e[t]), a);
+                    e[t] = n;
+                  }),
+                e
+              );
+            }, {});
+          return (r.root = n), (r.plain = E(x({}, n), { backgroundColor: void 0 })), r;
+        },
+        Q = /\r\n|\r|\n/,
+        K = e => {
+          0 === e.length
+            ? e.push({ types: ['plain'], content: '\n', empty: !0 })
+            : 1 === e.length && '' === e[0].content && ((e[0].content = '\n'), (e[0].empty = !0));
+        },
+        Y = (e, t) => {
+          const n = e.length;
+          return n > 0 && e[n - 1] === t ? e : e.concat(t);
+        },
+        X = e => {
+          const t = [[]],
+            n = [e],
+            r = [0],
+            a = [e.length];
+          let o = 0,
+            i = 0,
+            l = [];
+          const s = [l];
+          for (; i > -1; ) {
+            for (; (o = r[i]++) < a[i]; ) {
+              let e,
+                c = t[i];
+              const u = n[i][o];
+              if (
+                ('string' == typeof u
+                  ? ((c = i > 0 ? c : ['plain']), (e = u))
+                  : ((c = Y(c, u.type)), u.alias && (c = Y(c, u.alias)), (e = u.content)),
+                'string' != typeof e)
+              ) {
+                i++, t.push(c), n.push(e), r.push(0), a.push(e.length);
+                continue;
+              }
+              const d = e.split(Q),
+                p = d.length;
+              l.push({ types: c, content: d[0] });
+              for (let t = 1; t < p; t++) K(l), s.push((l = [])), l.push({ types: c, content: d[t] });
+            }
+            i--, t.pop(), n.pop(), r.pop(), a.pop();
+          }
+          return K(l), s;
+        },
+        J = ({ children: e, language: t, code: n, theme: r, prism: a }) => {
+          const o = t.toLowerCase(),
+            i = ((e, t) => {
+              const [n, r] = (0, u.useState)(V(t, e)),
+                a = (0, u.useRef)(),
+                o = (0, u.useRef)();
+              return (
+                (0, u.useEffect)(() => {
+                  (t === a.current && e === o.current) || ((a.current = t), (o.current = e), r(V(t, e)));
+                }, [e, t]),
+                n
+              );
+            })(o, r),
+            l = (e =>
+              (0, u.useCallback)(
+                t => {
+                  var n = t,
+                    { className: r, style: a, line: o } = n,
+                    i = C(n, ['className', 'style', 'line']);
+                  const l = E(x({}, i), { className: (0, d.Z)('token-line', r) });
+                  return (
+                    'object' == typeof e && 'plain' in e && (l.style = e.plain),
+                    'object' == typeof a && (l.style = x(x({}, l.style || {}), a)),
+                    l
+                  );
+                },
+                [e],
+              ))(i),
+            s = (e => {
+              const t = (0, u.useCallback)(
+                ({ types: t, empty: n }) => {
+                  if (null != e)
+                    return 1 === t.length && 'plain' === t[0]
+                      ? null != n
+                        ? { display: 'inline-block' }
+                        : void 0
+                      : 1 === t.length && null != n
+                        ? e[t[0]]
+                        : Object.assign(null != n ? { display: 'inline-block' } : {}, ...t.map(t => e[t]));
+                },
+                [e],
+              );
+              return (0, u.useCallback)(
+                e => {
+                  var n = e,
+                    { token: r, className: a, style: o } = n,
+                    i = C(n, ['token', 'className', 'style']);
+                  const l = E(x({}, i), { className: (0, d.Z)('token', ...r.types, a), children: r.content, style: t(r) });
+                  return null != o && (l.style = x(x({}, l.style || {}), o)), l;
+                },
+                [t],
+              );
+            })(i),
+            c = (({ prism: e, code: t, grammar: n, language: r }) => {
+              const a = (0, u.useRef)(e);
+              return (0, u.useMemo)(() => {
+                if (null == n) return X([t]);
+                const e = { code: t, grammar: n, language: r, tokens: [] };
+                return (
+                  a.current.hooks.run('before-tokenize', e),
+                  (e.tokens = a.current.tokenize(t, n)),
+                  a.current.hooks.run('after-tokenize', e),
+                  X(e.tokens)
+                );
+              }, [t, n, r]);
+            })({ prism: a, language: o, code: n, grammar: a.languages[o] });
+          return e({
+            tokens: c,
+            className: `prism-code language-${o}`,
+            style: null != i ? i.root : {},
+            getLineProps: l,
+            getTokenProps: s,
+          });
+        },
+        ee = e =>
+          (0, u.createElement)(J, E(x({}, e), { prism: e.prism || P, theme: e.theme || U, code: e.code, language: e.language }));
+    },
+    8776: (e, t, n) => {
+      'use strict';
+      n.d(t, { Z: () => o });
+      var r = !0,
+        a = 'Invariant failed';
+      function o(e, t) {
+        if (!e) {
+          if (r) throw new Error(a);
+          var n = 'function' == typeof t ? t() : t,
+            o = n ? ''.concat(a, ': ').concat(n) : a;
+          throw new Error(o);
+        }
+      }
+    },
+    7529: e => {
+      'use strict';
+      e.exports = {};
+    },
+    6887: e => {
+      'use strict';
+      e.exports = JSON.parse(
+        '{"/reanimated-color-picker/docs-08c":{"__comp":"5e95c892","__context":{"plugin":"ef3214ef"}},"/reanimated-color-picker/docs-1ce":{"__comp":"a7bd4aaa","version":"935f2afb"},"/reanimated-color-picker/docs-c34":{"__comp":"a94703ab"},"/reanimated-color-picker/docs/API/ColorPicker-3ec":{"__comp":"17896441","content":"efeb2804"},"/reanimated-color-picker/docs/API/Panels/Panel1-6de":{"__comp":"17896441","content":"a44a6861"},"/reanimated-color-picker/docs/API/Panels/Panel2-9e0":{"__comp":"17896441","content":"2de8a64b"},"/reanimated-color-picker/docs/API/Panels/Panel3-e86":{"__comp":"17896441","content":"63def8f5"},"/reanimated-color-picker/docs/API/Panels/Panel4-c32":{"__comp":"17896441","content":"c23bd39a"},"/reanimated-color-picker/docs/API/Panels/Panel5-82a":{"__comp":"17896441","content":"8771582a"},"/reanimated-color-picker/docs/API/Preview/-42a":{"__comp":"17896441","content":"56316f3f"},"/reanimated-color-picker/docs/API/Preview/ExtraThumb-028":{"__comp":"17896441","content":"90e27583"},"/reanimated-color-picker/docs/API/Preview/InputWidget-68e":{"__comp":"17896441","content":"2b9ac54a"},"/reanimated-color-picker/docs/API/Preview/PreviewText-2fe":{"__comp":"17896441","content":"126391be"},"/reanimated-color-picker/docs/API/Preview/Swatches-b61":{"__comp":"17896441","content":"7166dec0"},"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider-341":{"__comp":"17896441","content":"79d873be"},"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider-709":{"__comp":"17896441","content":"e0d6e6dc"},"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider-6ef":{"__comp":"17896441","content":"8d402cb0"},"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular-866":{"__comp":"17896441","content":"e73706c6"},"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider-4c1":{"__comp":"17896441","content":"ba30bb47"},"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular-a31":{"__comp":"17896441","content":"9180b37b"},"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider-a97":{"__comp":"17896441","content":"140a8099"},"/reanimated-color-picker/docs/API/Sliders/OpacitySlider-cfb":{"__comp":"17896441","content":"94e8e772"},"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider-bb4":{"__comp":"17896441","content":"932438b4"},"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider-0bf":{"__comp":"17896441","content":"9edb15d8"},"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider-c15":{"__comp":"17896441","content":"58a57edf"},"/reanimated-color-picker/docs/category/api-c69":{"__comp":"14eb3368","categoryGeneratedIndex":"702bc698"},"/reanimated-color-picker/docs/category/hsb-bfa":{"__comp":"14eb3368","categoryGeneratedIndex":"d779562e"},"/reanimated-color-picker/docs/category/hsl-988":{"__comp":"14eb3368","categoryGeneratedIndex":"739c95ba"},"/reanimated-color-picker/docs/category/hue-848":{"__comp":"14eb3368","categoryGeneratedIndex":"be41ce4f"},"/reanimated-color-picker/docs/category/panels-15b":{"__comp":"14eb3368","categoryGeneratedIndex":"c098eb0d"},"/reanimated-color-picker/docs/category/preview-32f":{"__comp":"14eb3368","categoryGeneratedIndex":"4bdabec4"},"/reanimated-color-picker/docs/category/rgb-90c":{"__comp":"14eb3368","categoryGeneratedIndex":"5de8bf0b"},"/reanimated-color-picker/docs/category/sliders-69c":{"__comp":"14eb3368","categoryGeneratedIndex":"c7c5d45f"},"/reanimated-color-picker/docs/ColorKit-e87":{"__comp":"17896441","content":"2fc6c5ee"},"/reanimated-color-picker/docs/Examples-e49":{"__comp":"17896441","content":"8bf99691"},"/reanimated-color-picker/docs/Installation-aff":{"__comp":"17896441","content":"39eaec8f"},"/reanimated-color-picker/docs/intro-3bf":{"__comp":"17896441","content":"f8409a7e"},"/reanimated-color-picker/docs/Usage-8c3":{"__comp":"17896441","content":"bf417703"},"/reanimated-color-picker/-ee5":{"__comp":"c4f5d8e4","__context":{"plugin":"359ca393"},"config":"5e9f5e1a"}}',
+      );
+    },
+  },
+  e => {
+    e.O(0, [532], () => {
+      return (t = 7221), e((e.s = t));
+      var t;
+    });
+    e.O();
+  },
+]);
diff --git a/docs/build/assets/js/main.f7645bf4.js.LICENSE.txt b/docs/build/assets/js/main.a2c80363.js.LICENSE.txt
similarity index 62%
rename from docs/build/assets/js/main.f7645bf4.js.LICENSE.txt
rename to docs/build/assets/js/main.a2c80363.js.LICENSE.txt
index 4c963e4..91dc894 100644
--- a/docs/build/assets/js/main.f7645bf4.js.LICENSE.txt
+++ b/docs/build/assets/js/main.a2c80363.js.LICENSE.txt
@@ -1,21 +1,24 @@
 /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
  * @license MIT */
 
-/**
- * @license React
- * react-dom-client.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+/*! Bundled license information:
+
+prismjs/prism.js:
+  (**
+   * Prism: Lightweight, robust, elegant syntax highlighting
+   *
+   * @license MIT <https://opensource.org/licenses/MIT>
+   * @author Lea Verou <https://lea.verou.me>
+   * @namespace
+   * @public
+   *)
+*/
 
 /**
  * @license React
- * react-dom.production.js
+ * react-dom.production.min.js
  *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -23,9 +26,9 @@
 
 /**
  * @license React
- * react-jsx-runtime.production.js
+ * react-jsx-runtime.production.min.js
  *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -33,9 +36,9 @@
 
 /**
  * @license React
- * react.production.js
+ * react.production.min.js
  *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,9 +46,9 @@
 
 /**
  * @license React
- * scheduler.production.js
+ * scheduler.production.min.js
  *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
diff --git a/docs/build/assets/js/main.f7645bf4.js b/docs/build/assets/js/main.f7645bf4.js
deleted file mode 100644
index 749856c..0000000
--- a/docs/build/assets/js/main.f7645bf4.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see main.f7645bf4.js.LICENSE.txt */
-(self.webpackChunkmy_docs=self.webpackChunkmy_docs||[]).push([[792],{115:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,r="function"==typeof Set,a="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function o(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var l,s,c,u;if(Array.isArray(e)){if((l=e.length)!=i.length)return!1;for(s=l;0!==s--;)if(!o(e[s],i[s]))return!1;return!0}if(n&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!i.has(s.value[0]))return!1;for(u=e.entries();!(s=u.next()).done;)if(!o(s.value[1],i.get(s.value[0])))return!1;return!0}if(r&&e instanceof Set&&i instanceof Set){if(e.size!==i.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!i.has(s.value[0]))return!1;return!0}if(a&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((l=e.length)!=i.length)return!1;for(s=l;0!==s--;)if(e[s]!==i[s])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof i.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof i.toString)return e.toString()===i.toString();if((l=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(s=l;0!==s--;)if(!Object.prototype.hasOwnProperty.call(i,c[s]))return!1;if(t&&e instanceof Element)return!1;for(s=l;0!==s--;)if(("_owner"!==c[s]&&"__v"!==c[s]&&"__o"!==c[s]||!e.$$typeof)&&!o(e[c[s]],i[c[s]]))return!1;return!0}return e!=e&&i!=i}e.exports=function(e,t){try{return o(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},119:(e,t,n)=>{"use strict";n.r(t)},205:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540);const a=n(8193).A.canUseDOM?r.useLayoutEffect:r.useEffect},253:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){if(t.cause)return[t,...e(t.cause)];return[t]}},311:e=>{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,i,l],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},418:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});const r=()=>null},440:(e,t,n)=>{"use strict";t.rA=t.Ks=void 0;const r=n(1635);var a=n(2983);Object.defineProperty(t,"Ks",{enumerable:!0,get:function(){return r.__importDefault(a).default}});var o=n(2566);var i=n(253);Object.defineProperty(t,"rA",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},545:(e,t,n)=>{"use strict";n.d(t,{mg:()=>J,vd:()=>G});var r=n(6540),a=n(5556),o=n.n(a),i=n(115),l=n.n(i),s=n(311),c=n.n(s),u=n(2833),d=n.n(u);function p(){return p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p.apply(this,arguments)}function f(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,m(e,t)}function m(e,t){return m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},m(e,t)}function h(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}var g={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},y={rel:["amphtml","canonical","alternate"]},b={type:["application/ld+json"]},v={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},w=Object.keys(g).map((function(e){return g[e]})),k={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},S=Object.keys(k).reduce((function(e,t){return e[k[t]]=t,e}),{}),x=function(e,t){for(var n=e.length-1;n>=0;n-=1){var r=e[n];if(Object.prototype.hasOwnProperty.call(r,t))return r[t]}return null},E=function(e){var t=x(e,g.TITLE),n=x(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,(function(){return t}));var r=x(e,"defaultTitle");return t||r||void 0},A=function(e){return x(e,"onChangeClientState")||function(){}},_=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return p({},e,t)}),{})},C=function(e,t){return t.filter((function(e){return void 0!==e[g.BASE]})).map((function(e){return e[g.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),a=0;a<r.length;a+=1){var o=r[a].toLowerCase();if(-1!==e.indexOf(o)&&n[o])return t.concat(n)}return t}),[])},P=function(e,t,n){var r={};return n.filter((function(t){return!!Array.isArray(t[e])||(void 0!==t[e]&&console&&"function"==typeof console.warn&&console.warn("Helmet: "+e+' should be of type "Array". Instead found type "'+typeof t[e]+'"'),!1)})).map((function(t){return t[e]})).reverse().reduce((function(e,n){var a={};n.filter((function(e){for(var n,o=Object.keys(e),i=0;i<o.length;i+=1){var l=o[i],s=l.toLowerCase();-1===t.indexOf(s)||"rel"===n&&"canonical"===e[n].toLowerCase()||"rel"===s&&"stylesheet"===e[s].toLowerCase()||(n=s),-1===t.indexOf(l)||"innerHTML"!==l&&"cssText"!==l&&"itemprop"!==l||(n=l)}if(!n||!e[n])return!1;var c=e[n].toLowerCase();return r[n]||(r[n]={}),a[n]||(a[n]={}),!r[n][c]&&(a[n][c]=!0,!0)})).reverse().forEach((function(t){return e.push(t)}));for(var o=Object.keys(a),i=0;i<o.length;i+=1){var l=o[i],s=p({},r[l],a[l]);r[l]=s}return e}),[]).reverse()},T=function(e,t){if(Array.isArray(e)&&e.length)for(var n=0;n<e.length;n+=1)if(e[n][t])return!0;return!1},j=function(e){return Array.isArray(e)?e.join(""):e},L=function(e,t){return Array.isArray(e)?e.reduce((function(e,n){return function(e,t){for(var n=Object.keys(e),r=0;r<n.length;r+=1)if(t[n[r]]&&t[n[r]].includes(e[n[r]]))return!0;return!1}(n,t)?e.priority.push(n):e.default.push(n),e}),{priority:[],default:[]}):{default:e}},N=function(e,t){var n;return p({},e,((n={})[t]=void 0,n))},O=[g.NOSCRIPT,g.SCRIPT,g.STYLE],R=function(e,t){return void 0===t&&(t=!0),!1===t?String(e):String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")},I=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},D=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce((function(t,n){return t[k[n]||n]=e[n],t}),t)},F=function(e,t){return t.map((function(t,n){var a,o=((a={key:n})["data-rh"]=!0,a);return Object.keys(t).forEach((function(e){var n=k[e]||e;"innerHTML"===n||"cssText"===n?o.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:o[n]=t[e]})),r.createElement(e,o)}))},M=function(e,t,n){switch(e){case g.TITLE:return{toComponent:function(){return n=t.titleAttributes,(a={key:e=t.title})["data-rh"]=!0,o=D(n,a),[r.createElement(g.TITLE,o,e)];var e,n,a,o},toString:function(){return function(e,t,n,r){var a=I(n),o=j(t);return a?"<"+e+' data-rh="true" '+a+">"+R(o,r)+"</"+e+">":"<"+e+' data-rh="true">'+R(o,r)+"</"+e+">"}(e,t.title,t.titleAttributes,n)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return D(t)},toString:function(){return I(t)}};default:return{toComponent:function(){return F(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var a=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,t){var a=void 0===r[t]?t:t+'="'+R(r[t],n)+'"';return e?e+" "+a:a}),""),o=r.innerHTML||r.cssText||"",i=-1===O.indexOf(e);return t+"<"+e+' data-rh="true" '+a+(i?"/>":">"+o+"</"+e+">")}),"")}(e,t,n)}}}},z=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,a=e.htmlAttributes,o=e.noscriptTags,i=e.styleTags,l=e.title,s=void 0===l?"":l,c=e.titleAttributes,u=e.linkTags,d=e.metaTags,p=e.scriptTags,f={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var m=function(e){var t=e.linkTags,n=e.scriptTags,r=e.encode,a=L(e.metaTags,v),o=L(t,y),i=L(n,b);return{priorityMethods:{toComponent:function(){return[].concat(F(g.META,a.priority),F(g.LINK,o.priority),F(g.SCRIPT,i.priority))},toString:function(){return M(g.META,a.priority,r)+" "+M(g.LINK,o.priority,r)+" "+M(g.SCRIPT,i.priority,r)}},metaTags:a.default,linkTags:o.default,scriptTags:i.default}}(e);f=m.priorityMethods,u=m.linkTags,d=m.metaTags,p=m.scriptTags}return{priority:f,base:M(g.BASE,t,r),bodyAttributes:M("bodyAttributes",n,r),htmlAttributes:M("htmlAttributes",a,r),link:M(g.LINK,u,r),meta:M(g.META,d,r),noscript:M(g.NOSCRIPT,o,r),script:M(g.SCRIPT,p,r),style:M(g.STYLE,i,r),title:M(g.TITLE,{title:s,titleAttributes:c},r)}},B=[],$=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?B:n.instances},add:function(e){(n.canUseDOM?B:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?B:n.instances).indexOf(e);(n.canUseDOM?B:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=z({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},U=r.createContext({}),H=o().shape({setHelmet:o().func,helmetInstances:o().shape({get:o().func,add:o().func,remove:o().func})}),q="undefined"!=typeof document,G=function(e){function t(n){var r;return(r=e.call(this,n)||this).helmetData=new $(r.props.context,t.canUseDOM),r}return f(t,e),t.prototype.render=function(){return r.createElement(U.Provider,{value:this.helmetData.value},this.props.children)},t}(r.Component);G.canUseDOM=q,G.propTypes={context:o().shape({helmet:o().shape()}),children:o().node.isRequired},G.defaultProps={context:{}},G.displayName="HelmetProvider";var V=function(e,t){var n,r=document.head||document.querySelector(g.HEAD),a=r.querySelectorAll(e+"[data-rh]"),o=[].slice.call(a),i=[];return t&&t.length&&t.forEach((function(t){var r=document.createElement(e);for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&("innerHTML"===a?r.innerHTML=t.innerHTML:"cssText"===a?r.styleSheet?r.styleSheet.cssText=t.cssText:r.appendChild(document.createTextNode(t.cssText)):r.setAttribute(a,void 0===t[a]?"":t[a]));r.setAttribute("data-rh","true"),o.some((function(e,t){return n=t,r.isEqualNode(e)}))?o.splice(n,1):i.push(r)})),o.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:o,newTags:i}},W=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute("data-rh"),a=r?r.split(","):[],o=[].concat(a),i=Object.keys(t),l=0;l<i.length;l+=1){var s=i[l],c=t[s]||"";n.getAttribute(s)!==c&&n.setAttribute(s,c),-1===a.indexOf(s)&&a.push(s);var u=o.indexOf(s);-1!==u&&o.splice(u,1)}for(var d=o.length-1;d>=0;d-=1)n.removeAttribute(o[d]);a.length===o.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==i.join(",")&&n.setAttribute("data-rh",i.join(","))}},K=function(e,t){var n=e.baseTag,r=e.htmlAttributes,a=e.linkTags,o=e.metaTags,i=e.noscriptTags,l=e.onChangeClientState,s=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;W(g.BODY,e.bodyAttributes),W(g.HTML,r),function(e,t){void 0!==e&&document.title!==e&&(document.title=j(e)),W(g.TITLE,t)}(u,d);var p={baseTag:V(g.BASE,n),linkTags:V(g.LINK,a),metaTags:V(g.META,o),noscriptTags:V(g.NOSCRIPT,i),scriptTags:V(g.SCRIPT,s),styleTags:V(g.STYLE,c)},f={},m={};Object.keys(p).forEach((function(e){var t=p[e],n=t.newTags,r=t.oldTags;n.length&&(f[e]=n),r.length&&(m[e]=p[e].oldTags)})),t&&t(),l(e,f,m)},Q=null,Y=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];return(t=e.call.apply(e,[this].concat(r))||this).rendered=!1,t}f(t,e);var n=t.prototype;return n.shouldComponentUpdate=function(e){return!d()(e,this.props)},n.componentDidUpdate=function(){this.emitChange()},n.componentWillUnmount=function(){this.props.context.helmetInstances.remove(this),this.emitChange()},n.emitChange=function(){var e,t,n=this.props.context,r=n.setHelmet,a=null,o=(e=n.helmetInstances.get().map((function(e){var t=p({},e.props);return delete t.context,t})),{baseTag:C(["href"],e),bodyAttributes:_("bodyAttributes",e),defer:x(e,"defer"),encode:x(e,"encodeSpecialCharacters"),htmlAttributes:_("htmlAttributes",e),linkTags:P(g.LINK,["rel","href"],e),metaTags:P(g.META,["name","charset","http-equiv","property","itemprop"],e),noscriptTags:P(g.NOSCRIPT,["innerHTML"],e),onChangeClientState:A(e),scriptTags:P(g.SCRIPT,["src","innerHTML"],e),styleTags:P(g.STYLE,["cssText"],e),title:E(e),titleAttributes:_("titleAttributes",e),prioritizeSeoTags:T(e,"prioritizeSeoTags")});G.canUseDOM?(t=o,Q&&cancelAnimationFrame(Q),t.defer?Q=requestAnimationFrame((function(){K(t,(function(){Q=null}))})):(K(t),Q=null)):z&&(a=z(o)),r(a)},n.init=function(){this.rendered||(this.rendered=!0,this.props.context.helmetInstances.add(this),this.emitChange())},n.render=function(){return this.init(),null},t}(r.Component);Y.propTypes={context:H.isRequired},Y.displayName="HelmetDispatcher";var X=["children"],Z=["children"],J=function(e){function t(){return e.apply(this,arguments)||this}f(t,e);var n=t.prototype;return n.shouldComponentUpdate=function(e){return!l()(N(this.props,"helmetData"),N(e,"helmetData"))},n.mapNestedChildrenToProps=function(e,t){if(!t)return null;switch(e.type){case g.SCRIPT:case g.NOSCRIPT:return{innerHTML:t};case g.STYLE:return{cssText:t};default:throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")}},n.flattenArrayTypeChildren=function(e){var t,n=e.child,r=e.arrayTypeChildren;return p({},r,((t={})[n.type]=[].concat(r[n.type]||[],[p({},e.newChildProps,this.mapNestedChildrenToProps(n,e.nestedChildren))]),t))},n.mapObjectTypeChildren=function(e){var t,n,r=e.child,a=e.newProps,o=e.newChildProps,i=e.nestedChildren;switch(r.type){case g.TITLE:return p({},a,((t={})[r.type]=i,t.titleAttributes=p({},o),t));case g.BODY:return p({},a,{bodyAttributes:p({},o)});case g.HTML:return p({},a,{htmlAttributes:p({},o)});default:return p({},a,((n={})[r.type]=p({},o),n))}},n.mapArrayTypeChildrenToProps=function(e,t){var n=p({},t);return Object.keys(e).forEach((function(t){var r;n=p({},n,((r={})[t]=e[t],r))})),n},n.warnOnInvalidChildren=function(e,t){return c()(w.some((function(t){return e.type===t})),"function"==typeof e.type?"You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+w.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some((function(e){return"string"!=typeof e})),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``}</"+e.type+"> ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,a={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,o=r.children,i=h(r,X),l=Object.keys(i).reduce((function(e,t){return e[S[t]||t]=i[t],e}),{}),s=e.type;switch("symbol"==typeof s?s=s.toString():n.warnOnInvalidChildren(e,o),s){case g.FRAGMENT:t=n.mapChildrenToProps(o,t);break;case g.LINK:case g.META:case g.NOSCRIPT:case g.SCRIPT:case g.STYLE:a=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:a,newChildProps:l,nestedChildren:o});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:l,nestedChildren:o})}}})),this.mapArrayTypeChildrenToProps(a,t)},n.render=function(){var e=this.props,t=e.children,n=h(e,Z),a=p({},n),o=n.helmetData;return t&&(a=this.mapChildrenToProps(t,a)),!o||o instanceof $||(o=new $(o.context,o.instances)),o?r.createElement(Y,p({},a,{context:o.value,helmetData:void 0})):r.createElement(U.Consumer,null,(function(e){return r.createElement(Y,p({},a,{context:e}))}))},t}(r.Component);J.propTypes={base:o().object,bodyAttributes:o().object,children:o().oneOfType([o().arrayOf(o().node),o().node]),defaultTitle:o().string,defer:o().bool,encodeSpecialCharacters:o().bool,htmlAttributes:o().object,link:o().arrayOf(o().object),meta:o().arrayOf(o().object),noscript:o().arrayOf(o().object),onChangeClientState:o().func,script:o().arrayOf(o().object),style:o().arrayOf(o().object),title:o().string,titleAttributes:o().object,titleTemplate:o().string,prioritizeSeoTags:o().bool,helmetData:o().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},609:(e,t,n)=>{"use strict";n.d(t,{V:()=>s,t:()=>c});var r=n(6540),a=n(9532),o=n(4848);const i=Symbol("EmptyContext"),l=r.createContext(i);function s({children:e,name:t,items:n}){const a=(0,r.useMemo)((()=>t&&n?{name:t,items:n}:null),[t,n]);return(0,o.jsx)(l.Provider,{value:a,children:e})}function c(){const e=(0,r.useContext)(l);if(e===i)throw new a.dV("DocsSidebarProvider");return e}},679:(e,t,n)=>{"use strict";n.d(t,{Wf:()=>u,Dv:()=>d});var r=n(6540);const a=JSON.parse('{"N":"localStorage","M":""}'),o=a.N;function i({key:e,oldValue:t,newValue:n,storage:r}){if(t===n)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,e,t,n,window.location.href,r),window.dispatchEvent(a)}function l(e=o){if("undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,s||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),s=!0),null}var t}let s=!1;const c={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function u(e,t){const n=`${e}${a.M}`;if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);const r=l(t?.persistence);return null===r?c:{get:()=>{try{return r.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{const t=r.getItem(n);r.setItem(n,e),i({key:n,oldValue:t,newValue:e,storage:r})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{const e=r.getItem(n);r.removeItem(n),i({key:n,oldValue:e,newValue:null,storage:r})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{const t=t=>{t.storageArea===r&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(t){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,t),()=>{}}}}}function d(e,t){const[n]=(0,r.useState)((()=>null===e?c:u(e,t))),a=(0,r.useCallback)((e=>"undefined"==typeof window?()=>{}:n.listen(e)),[n]);return[(0,r.useSyncExternalStore)(a,(()=>n.get()),(()=>null)),n]}},961:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(6221)},1043:(e,t,n)=>{"use strict";n.r(t)},1107:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(4164),a=n(1312),o=n(6342),i=n(8774),l=n(3427);const s={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(4848);function u({as:e,id:t,...n}){const u=(0,l.A)(),{navbar:{hideOnScroll:d}}=(0,o.p)();if("h1"===e||!t)return(0,c.jsx)(e,{...n,id:void 0});u.collectAnchor(t);const p=(0,a.T)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof n.children?n.children:t});return(0,c.jsxs)(e,{...n,className:(0,r.A)("anchor",d?s.anchorWithHideOnScrollNavbar:s.anchorWithStickyNavbar,n.className),id:t,children:[n.children,(0,c.jsx)(i.A,{className:"hash-link",to:`#${t}`,"aria-label":p,title:p,children:"\u200b"})]})}},1122:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});var r=n(6540),a=n(4164),o=n(2303),i=n(5293);const l={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var s=n(4848);function c({className:e,children:t}){const n=(0,o.A)(),{colorMode:c}=(0,i.G)();return(0,s.jsx)(s.Fragment,{children:(n?"dark"===c?["dark"]:["light"]:["light","dark"]).map((n=>{const o=t({theme:n,className:(0,a.A)(e,l.themedComponent,l[`themedComponent--${n}`])});return(0,s.jsx)(r.Fragment,{children:o},n)}))})}function u(e){const{sources:t,className:n,alt:r,...a}=e;return(0,s.jsx)(c,{className:n,children:({theme:e,className:n})=>(0,s.jsx)("img",{src:t[e],alt:r,className:n,...a})})}},1247:(e,t,n)=>{"use strict";var r=n(9982),a=n(6540),o=n(961);function i(e){var t="https://react.dev/errors/"+e;if(1<arguments.length){t+="?args[]="+encodeURIComponent(arguments[1]);for(var n=2;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n])}return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function l(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType)}function s(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{!!(4098&(t=e).flags)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function c(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function u(e){if(s(e)!==e)throw Error(i(188))}function d(e){var t=e.tag;if(5===t||26===t||27===t||6===t)return e;for(e=e.child;null!==e;){if(null!==(t=d(e)))return t;e=e.sibling}return null}var p=Object.assign,f=Symbol.for("react.element"),m=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),y=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),v=Symbol.for("react.provider"),w=Symbol.for("react.consumer"),k=Symbol.for("react.context"),S=Symbol.for("react.forward_ref"),x=Symbol.for("react.suspense"),E=Symbol.for("react.suspense_list"),A=Symbol.for("react.memo"),_=Symbol.for("react.lazy");Symbol.for("react.scope");var C=Symbol.for("react.activity");Symbol.for("react.legacy_hidden"),Symbol.for("react.tracing_marker");var P=Symbol.for("react.memo_cache_sentinel");Symbol.for("react.view_transition");var T=Symbol.iterator;function j(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=T&&e[T]||e["@@iterator"])?e:null}var L=Symbol.for("react.client.reference");function N(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===L?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case g:return"Fragment";case b:return"Profiler";case y:return"StrictMode";case x:return"Suspense";case E:return"SuspenseList";case C:return"Activity"}if("object"==typeof e)switch(e.$$typeof){case h:return"Portal";case k:return(e.displayName||"Context")+".Provider";case w:return(e._context.displayName||"Context")+".Consumer";case S:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case A:return null!==(t=e.displayName||null)?t:N(e.type)||"Memo";case _:t=e._payload,e=e._init;try{return N(e(t))}catch(n){}}return null}var O=Array.isArray,R=a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=o.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D={pending:!1,data:null,method:null,action:null},F=[],M=-1;function z(e){return{current:e}}function B(e){0>M||(e.current=F[M],F[M]=null,M--)}function $(e,t){M++,F[M]=e.current,e.current=t}var U=z(null),H=z(null),q=z(null),G=z(null);function V(e,t){switch($(q,t),$(H,e),$(U,null),t.nodeType){case 9:case 11:e=(e=t.documentElement)&&(e=e.namespaceURI)?ad(e):0;break;default:if(e=t.tagName,t=t.namespaceURI)e=od(t=ad(t),e);else switch(e){case"svg":e=1;break;case"math":e=2;break;default:e=0}}B(U),$(U,e)}function W(){B(U),B(H),B(q)}function K(e){null!==e.memoizedState&&$(G,e);var t=U.current,n=od(t,e.type);t!==n&&($(H,e),$(U,n))}function Q(e){H.current===e&&(B(U),B(H)),G.current===e&&(B(G),Kd._currentValue=D)}var Y=Object.prototype.hasOwnProperty,X=r.unstable_scheduleCallback,Z=r.unstable_cancelCallback,J=r.unstable_shouldYield,ee=r.unstable_requestPaint,te=r.unstable_now,ne=r.unstable_getCurrentPriorityLevel,re=r.unstable_ImmediatePriority,ae=r.unstable_UserBlockingPriority,oe=r.unstable_NormalPriority,ie=r.unstable_LowPriority,le=r.unstable_IdlePriority,se=r.log,ce=r.unstable_setDisableYieldValue,ue=null,de=null;function pe(e){if("function"==typeof se&&ce(e),de&&"function"==typeof de.setStrictMode)try{de.setStrictMode(ue,e)}catch(t){}}var fe=Math.clz32?Math.clz32:function(e){return 0===(e>>>=0)?32:31-(me(e)/he|0)|0},me=Math.log,he=Math.LN2;var ge=256,ye=4194304;function be(e){var t=42&e;if(0!==t)return t;switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194048&e;case 4194304:case 8388608:case 16777216:case 33554432:return 62914560&e;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return e}}function ve(e,t,n){var r=e.pendingLanes;if(0===r)return 0;var a=0,o=e.suspendedLanes,i=e.pingedLanes;e=e.warmLanes;var l=134217727&r;return 0!==l?0!==(r=l&~o)?a=be(r):0!==(i&=l)?a=be(i):n||0!==(n=l&~e)&&(a=be(n)):0!==(l=r&~o)?a=be(l):0!==i?a=be(i):n||0!==(n=r&~e)&&(a=be(n)),0===a?0:0!==t&&t!==a&&0===(t&o)&&((o=a&-a)>=(n=t&-t)||32===o&&4194048&n)?t:a}function we(e,t){return 0===(e.pendingLanes&~(e.suspendedLanes&~e.pingedLanes)&t)}function ke(e,t){switch(e){case 1:case 2:case 4:case 8:case 64:return t+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return t+5e3;default:return-1}}function Se(){var e=ge;return!(4194048&(ge<<=1))&&(ge=256),e}function xe(){var e=ye;return!(62914560&(ye<<=1))&&(ye=4194304),e}function Ee(e){for(var t=[],n=0;31>n;n++)t.push(e);return t}function Ae(e,t){e.pendingLanes|=t,268435456!==t&&(e.suspendedLanes=0,e.pingedLanes=0,e.warmLanes=0)}function _e(e,t,n){e.pendingLanes|=t,e.suspendedLanes&=~t;var r=31-fe(t);e.entangledLanes|=t,e.entanglements[r]=1073741824|e.entanglements[r]|4194090&n}function Ce(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var r=31-fe(n),a=1<<r;a&t|e[r]&t&&(e[r]|=t),n&=~a}}function Pe(e){switch(e){case 2:e=1;break;case 8:e=4;break;case 32:e=16;break;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:e=128;break;case 268435456:e=134217728;break;default:e=0}return e}function Te(e){return 2<(e&=-e)?8<e?134217727&e?32:268435456:8:2}function je(){var e=I.p;return 0!==e?e:void 0===(e=window.event)?32:cp(e.type)}var Le=Math.random().toString(36).slice(2),Ne="__reactFiber$"+Le,Oe="__reactProps$"+Le,Re="__reactContainer$"+Le,Ie="__reactEvents$"+Le,De="__reactListeners$"+Le,Fe="__reactHandles$"+Le,Me="__reactResources$"+Le,ze="__reactMarker$"+Le;function Be(e){delete e[Ne],delete e[Oe],delete e[Ie],delete e[De],delete e[Fe]}function $e(e){var t=e[Ne];if(t)return t;for(var n=e.parentNode;n;){if(t=n[Re]||n[Ne]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=vd(e);null!==e;){if(n=e[Ne])return n;e=vd(e)}return t}n=(e=n).parentNode}return null}function Ue(e){if(e=e[Ne]||e[Re]){var t=e.tag;if(5===t||6===t||13===t||26===t||27===t||3===t)return e}return null}function He(e){var t=e.tag;if(5===t||26===t||27===t||6===t)return e.stateNode;throw Error(i(33))}function qe(e){var t=e[Me];return t||(t=e[Me]={hoistableStyles:new Map,hoistableScripts:new Map}),t}function Ge(e){e[ze]=!0}var Ve=new Set,We={};function Ke(e,t){Qe(e,t),Qe(e+"Capture",t)}function Qe(e,t){for(We[e]=t,e=0;e<t.length;e++)Ve.add(t[e])}var Ye,Xe,Ze=RegExp("^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$"),Je={},et={};function tt(e,t,n){if(a=t,Y.call(et,a)||!Y.call(Je,a)&&(Ze.test(a)?et[a]=!0:(Je[a]=!0,0)))if(null===n)e.removeAttribute(t);else{switch(typeof n){case"undefined":case"function":case"symbol":return void e.removeAttribute(t);case"boolean":var r=t.toLowerCase().slice(0,5);if("data-"!==r&&"aria-"!==r)return void e.removeAttribute(t)}e.setAttribute(t,""+n)}var a}function nt(e,t,n){if(null===n)e.removeAttribute(t);else{switch(typeof n){case"undefined":case"function":case"symbol":case"boolean":return void e.removeAttribute(t)}e.setAttribute(t,""+n)}}function rt(e,t,n,r){if(null===r)e.removeAttribute(n);else{switch(typeof r){case"undefined":case"function":case"symbol":case"boolean":return void e.removeAttribute(n)}e.setAttributeNS(t,n,""+r)}}function at(e){if(void 0===Ye)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( *(at )?)/);Ye=t&&t[1]||"",Xe=-1<n.stack.indexOf("\n    at")?" (<anonymous>)":-1<n.stack.indexOf("@")?"@unknown:0:0":""}return"\n"+Ye+e+Xe}var ot=!1;function it(e,t){if(!e||ot)return"";ot=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var r={DetermineComponentFrameRoot:function(){try{if(t){var n=function(){throw Error()};if(Object.defineProperty(n.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(n,[])}catch(a){var r=a}Reflect.construct(e,[],n)}else{try{n.call()}catch(o){r=o}e.call(n.prototype)}}else{try{throw Error()}catch(i){r=i}(n=e())&&"function"==typeof n.catch&&n.catch((function(){}))}}catch(l){if(l&&r&&"string"==typeof l.stack)return[l.stack,r.stack]}return[null,null]}};r.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var a=Object.getOwnPropertyDescriptor(r.DetermineComponentFrameRoot,"name");a&&a.configurable&&Object.defineProperty(r.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var o=r.DetermineComponentFrameRoot(),i=o[0],l=o[1];if(i&&l){var s=i.split("\n"),c=l.split("\n");for(a=r=0;r<s.length&&!s[r].includes("DetermineComponentFrameRoot");)r++;for(;a<c.length&&!c[a].includes("DetermineComponentFrameRoot");)a++;if(r===s.length||a===c.length)for(r=s.length-1,a=c.length-1;1<=r&&0<=a&&s[r]!==c[a];)a--;for(;1<=r&&0<=a;r--,a--)if(s[r]!==c[a]){if(1!==r||1!==a)do{if(r--,0>--a||s[r]!==c[a]){var u="\n"+s[r].replace(" at new "," at ");return e.displayName&&u.includes("<anonymous>")&&(u=u.replace("<anonymous>",e.displayName)),u}}while(1<=r&&0<=a);break}}}finally{ot=!1,Error.prepareStackTrace=n}return(n=e?e.displayName||e.name:"")?at(n):""}function lt(e){switch(e.tag){case 26:case 27:case 5:return at(e.type);case 16:return at("Lazy");case 13:return at("Suspense");case 19:return at("SuspenseList");case 0:case 15:return it(e.type,!1);case 11:return it(e.type.render,!1);case 1:return it(e.type,!0);case 31:return at("Activity");default:return""}}function st(e){try{var t="";do{t+=lt(e),e=e.return}while(e);return t}catch(n){return"\nError generating stack: "+n.message+"\n"+n.stack}}function ct(e){switch(typeof e){case"bigint":case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function ut(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function dt(e){e._valueTracker||(e._valueTracker=function(e){var t=ut(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var a=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return a.call(this)},set:function(e){r=""+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function pt(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=ut(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function ft(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}var mt=/[\n"\\]/g;function ht(e){return e.replace(mt,(function(e){return"\\"+e.charCodeAt(0).toString(16)+" "}))}function gt(e,t,n,r,a,o,i,l){e.name="",null!=i&&"function"!=typeof i&&"symbol"!=typeof i&&"boolean"!=typeof i?e.type=i:e.removeAttribute("type"),null!=t?"number"===i?(0===t&&""===e.value||e.value!=t)&&(e.value=""+ct(t)):e.value!==""+ct(t)&&(e.value=""+ct(t)):"submit"!==i&&"reset"!==i||e.removeAttribute("value"),null!=t?bt(e,i,ct(t)):null!=n?bt(e,i,ct(n)):null!=r&&e.removeAttribute("value"),null==a&&null!=o&&(e.defaultChecked=!!o),null!=a&&(e.checked=a&&"function"!=typeof a&&"symbol"!=typeof a),null!=l&&"function"!=typeof l&&"symbol"!=typeof l&&"boolean"!=typeof l?e.name=""+ct(l):e.removeAttribute("name")}function yt(e,t,n,r,a,o,i,l){if(null!=o&&"function"!=typeof o&&"symbol"!=typeof o&&"boolean"!=typeof o&&(e.type=o),null!=t||null!=n){if(("submit"===o||"reset"===o)&&null==t)return;n=null!=n?""+ct(n):"",t=null!=t?""+ct(t):n,l||t===e.value||(e.value=t),e.defaultValue=t}r="function"!=typeof(r=null!=r?r:a)&&"symbol"!=typeof r&&!!r,e.checked=l?e.checked:!!r,e.defaultChecked=!!r,null!=i&&"function"!=typeof i&&"symbol"!=typeof i&&"boolean"!=typeof i&&(e.name=i)}function bt(e,t,n){"number"===t&&ft(e.ownerDocument)===e||e.defaultValue===""+n||(e.defaultValue=""+n)}function vt(e,t,n,r){if(e=e.options,t){t={};for(var a=0;a<n.length;a++)t["$"+n[a]]=!0;for(n=0;n<e.length;n++)a=t.hasOwnProperty("$"+e[n].value),e[n].selected!==a&&(e[n].selected=a),a&&r&&(e[n].defaultSelected=!0)}else{for(n=""+ct(n),t=null,a=0;a<e.length;a++){if(e[a].value===n)return e[a].selected=!0,void(r&&(e[a].defaultSelected=!0));null!==t||e[a].disabled||(t=e[a])}null!==t&&(t.selected=!0)}}function wt(e,t,n){null==t||((t=""+ct(t))!==e.value&&(e.value=t),null!=n)?e.defaultValue=null!=n?""+ct(n):"":e.defaultValue!==t&&(e.defaultValue=t)}function kt(e,t,n,r){if(null==t){if(null!=r){if(null!=n)throw Error(i(92));if(O(r)){if(1<r.length)throw Error(i(93));r=r[0]}n=r}null==n&&(n=""),t=n}n=ct(t),e.defaultValue=n,(r=e.textContent)===n&&""!==r&&null!==r&&(e.value=r)}function St(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var xt=new Set("animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth boxFlex boxFlexGroup boxOrdinalGroup columnCount columns flex flexGrow flexPositive flexShrink flexNegative flexOrder gridArea gridRow gridRowEnd gridRowSpan gridRowStart gridColumn gridColumnEnd gridColumnSpan gridColumnStart fontWeight lineClamp lineHeight opacity order orphans scale tabSize widows zIndex zoom fillOpacity floodOpacity stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth MozAnimationIterationCount MozBoxFlex MozBoxFlexGroup MozLineClamp msAnimationIterationCount msFlex msZoom msFlexGrow msFlexNegative msFlexOrder msFlexPositive msFlexShrink msGridColumn msGridColumnSpan msGridRow msGridRowSpan WebkitAnimationIterationCount WebkitBoxFlex WebKitBoxFlexGroup WebkitBoxOrdinalGroup WebkitColumnCount WebkitColumns WebkitFlex WebkitFlexGrow WebkitFlexPositive WebkitFlexShrink WebkitLineClamp".split(" "));function Et(e,t,n){var r=0===t.indexOf("--");null==n||"boolean"==typeof n||""===n?r?e.setProperty(t,""):"float"===t?e.cssFloat="":e[t]="":r?e.setProperty(t,n):"number"!=typeof n||0===n||xt.has(t)?"float"===t?e.cssFloat=n:e[t]=(""+n).trim():e[t]=n+"px"}function At(e,t,n){if(null!=t&&"object"!=typeof t)throw Error(i(62));if(e=e.style,null!=n){for(var r in n)!n.hasOwnProperty(r)||null!=t&&t.hasOwnProperty(r)||(0===r.indexOf("--")?e.setProperty(r,""):"float"===r?e.cssFloat="":e[r]="");for(var a in t)r=t[a],t.hasOwnProperty(a)&&n[a]!==r&&Et(e,a,r)}else for(var o in t)t.hasOwnProperty(o)&&Et(e,o,t[o])}function _t(e){if(-1===e.indexOf("-"))return!1;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var Ct=new Map([["acceptCharset","accept-charset"],["htmlFor","for"],["httpEquiv","http-equiv"],["crossOrigin","crossorigin"],["accentHeight","accent-height"],["alignmentBaseline","alignment-baseline"],["arabicForm","arabic-form"],["baselineShift","baseline-shift"],["capHeight","cap-height"],["clipPath","clip-path"],["clipRule","clip-rule"],["colorInterpolation","color-interpolation"],["colorInterpolationFilters","color-interpolation-filters"],["colorProfile","color-profile"],["colorRendering","color-rendering"],["dominantBaseline","dominant-baseline"],["enableBackground","enable-background"],["fillOpacity","fill-opacity"],["fillRule","fill-rule"],["floodColor","flood-color"],["floodOpacity","flood-opacity"],["fontFamily","font-family"],["fontSize","font-size"],["fontSizeAdjust","font-size-adjust"],["fontStretch","font-stretch"],["fontStyle","font-style"],["fontVariant","font-variant"],["fontWeight","font-weight"],["glyphName","glyph-name"],["glyphOrientationHorizontal","glyph-orientation-horizontal"],["glyphOrientationVertical","glyph-orientation-vertical"],["horizAdvX","horiz-adv-x"],["horizOriginX","horiz-origin-x"],["imageRendering","image-rendering"],["letterSpacing","letter-spacing"],["lightingColor","lighting-color"],["markerEnd","marker-end"],["markerMid","marker-mid"],["markerStart","marker-start"],["overlinePosition","overline-position"],["overlineThickness","overline-thickness"],["paintOrder","paint-order"],["panose-1","panose-1"],["pointerEvents","pointer-events"],["renderingIntent","rendering-intent"],["shapeRendering","shape-rendering"],["stopColor","stop-color"],["stopOpacity","stop-opacity"],["strikethroughPosition","strikethrough-position"],["strikethroughThickness","strikethrough-thickness"],["strokeDasharray","stroke-dasharray"],["strokeDashoffset","stroke-dashoffset"],["strokeLinecap","stroke-linecap"],["strokeLinejoin","stroke-linejoin"],["strokeMiterlimit","stroke-miterlimit"],["strokeOpacity","stroke-opacity"],["strokeWidth","stroke-width"],["textAnchor","text-anchor"],["textDecoration","text-decoration"],["textRendering","text-rendering"],["transformOrigin","transform-origin"],["underlinePosition","underline-position"],["underlineThickness","underline-thickness"],["unicodeBidi","unicode-bidi"],["unicodeRange","unicode-range"],["unitsPerEm","units-per-em"],["vAlphabetic","v-alphabetic"],["vHanging","v-hanging"],["vIdeographic","v-ideographic"],["vMathematical","v-mathematical"],["vectorEffect","vector-effect"],["vertAdvY","vert-adv-y"],["vertOriginX","vert-origin-x"],["vertOriginY","vert-origin-y"],["wordSpacing","word-spacing"],["writingMode","writing-mode"],["xmlnsXlink","xmlns:xlink"],["xHeight","x-height"]]),Pt=/^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;function Tt(e){return Pt.test(""+e)?"javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')":e}var jt=null;function Lt(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var Nt=null,Ot=null;function Rt(e){var t=Ue(e);if(t&&(e=t.stateNode)){var n=e[Oe]||null;e:switch(e=t.stateNode,t.type){case"input":if(gt(e,n.value,n.defaultValue,n.defaultValue,n.checked,n.defaultChecked,n.type,n.name),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll('input[name="'+ht(""+t)+'"][type="radio"]'),t=0;t<n.length;t++){var r=n[t];if(r!==e&&r.form===e.form){var a=r[Oe]||null;if(!a)throw Error(i(90));gt(r,a.value,a.defaultValue,a.defaultValue,a.checked,a.defaultChecked,a.type,a.name)}}for(t=0;t<n.length;t++)(r=n[t]).form===e.form&&pt(r)}break e;case"textarea":wt(e,n.value,n.defaultValue);break e;case"select":null!=(t=n.value)&&vt(e,!!n.multiple,t,!1)}}}var It=!1;function Dt(e,t,n){if(It)return e(t,n);It=!0;try{return e(t)}finally{if(It=!1,(null!==Nt||null!==Ot)&&($c(),Nt&&(t=Nt,e=Ot,Ot=Nt=null,Rt(t),e)))for(t=0;t<e.length;t++)Rt(e[t])}}function Ft(e,t){var n=e.stateNode;if(null===n)return null;var r=n[Oe]||null;if(null===r)return null;n=r[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(r=!r.disabled)||(r=!("button"===(e=e.type)||"input"===e||"select"===e||"textarea"===e)),e=!r;break e;default:e=!1}if(e)return null;if(n&&"function"!=typeof n)throw Error(i(231,t,typeof n));return n}var Mt=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),zt=!1;if(Mt)try{var Bt={};Object.defineProperty(Bt,"passive",{get:function(){zt=!0}}),window.addEventListener("test",Bt,Bt),window.removeEventListener("test",Bt,Bt)}catch(Op){zt=!1}var $t=null,Ut=null,Ht=null;function qt(){if(Ht)return Ht;var e,t,n=Ut,r=n.length,a="value"in $t?$t.value:$t.textContent,o=a.length;for(e=0;e<r&&n[e]===a[e];e++);var i=r-e;for(t=1;t<=i&&n[r-t]===a[o-t];t++);return Ht=a.slice(e,1<t?1-t:void 0)}function Gt(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}function Vt(){return!0}function Wt(){return!1}function Kt(e){function t(t,n,r,a,o){for(var i in this._reactName=t,this._targetInst=r,this.type=n,this.nativeEvent=a,this.target=o,this.currentTarget=null,e)e.hasOwnProperty(i)&&(t=e[i],this[i]=t?t(a):a[i]);return this.isDefaultPrevented=(null!=a.defaultPrevented?a.defaultPrevented:!1===a.returnValue)?Vt:Wt,this.isPropagationStopped=Wt,this}return p(t.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=Vt)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=Vt)},persist:function(){},isPersistent:Vt}),t}var Qt,Yt,Xt,Zt={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},Jt=Kt(Zt),en=p({},Zt,{view:0,detail:0}),tn=Kt(en),nn=p({},en,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:mn,button:0,buttons:0,relatedTarget:function(e){return void 0===e.relatedTarget?e.fromElement===e.srcElement?e.toElement:e.fromElement:e.relatedTarget},movementX:function(e){return"movementX"in e?e.movementX:(e!==Xt&&(Xt&&"mousemove"===e.type?(Qt=e.screenX-Xt.screenX,Yt=e.screenY-Xt.screenY):Yt=Qt=0,Xt=e),Qt)},movementY:function(e){return"movementY"in e?e.movementY:Yt}}),rn=Kt(nn),an=Kt(p({},nn,{dataTransfer:0})),on=Kt(p({},en,{relatedTarget:0})),ln=Kt(p({},Zt,{animationName:0,elapsedTime:0,pseudoElement:0})),sn=Kt(p({},Zt,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}})),cn=Kt(p({},Zt,{data:0})),un={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},dn={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},pn={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function fn(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=pn[e])&&!!t[e]}function mn(){return fn}var hn=Kt(p({},en,{key:function(e){if(e.key){var t=un[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=Gt(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?dn[e.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:mn,charCode:function(e){return"keypress"===e.type?Gt(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?Gt(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}})),gn=Kt(p({},nn,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),yn=Kt(p({},en,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:mn})),bn=Kt(p({},Zt,{propertyName:0,elapsedTime:0,pseudoElement:0})),vn=Kt(p({},nn,{deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:0,deltaMode:0})),wn=Kt(p({},Zt,{newState:0,oldState:0})),kn=[9,13,27,32],Sn=Mt&&"CompositionEvent"in window,xn=null;Mt&&"documentMode"in document&&(xn=document.documentMode);var En=Mt&&"TextEvent"in window&&!xn,An=Mt&&(!Sn||xn&&8<xn&&11>=xn),_n=String.fromCharCode(32),Cn=!1;function Pn(e,t){switch(e){case"keyup":return-1!==kn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Tn(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var jn=!1;var Ln={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Nn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!Ln[e.type]:"textarea"===t}function On(e,t,n,r){Nt?Ot?Ot.push(r):Ot=[r]:Nt=r,0<(t=qu(t,"onChange")).length&&(n=new Jt("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Rn=null,In=null;function Dn(e){Du(e,0)}function Fn(e){if(pt(He(e)))return e}function Mn(e,t){if("change"===e)return t}var zn=!1;if(Mt){var Bn;if(Mt){var $n="oninput"in document;if(!$n){var Un=document.createElement("div");Un.setAttribute("oninput","return;"),$n="function"==typeof Un.oninput}Bn=$n}else Bn=!1;zn=Bn&&(!document.documentMode||9<document.documentMode)}function Hn(){Rn&&(Rn.detachEvent("onpropertychange",qn),In=Rn=null)}function qn(e){if("value"===e.propertyName&&Fn(In)){var t=[];On(t,In,e,Lt(e)),Dt(Dn,t)}}function Gn(e,t,n){"focusin"===e?(Hn(),In=n,(Rn=t).attachEvent("onpropertychange",qn)):"focusout"===e&&Hn()}function Vn(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return Fn(In)}function Wn(e,t){if("click"===e)return Fn(t)}function Kn(e,t){if("input"===e||"change"===e)return Fn(t)}var Qn="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t};function Yn(e,t){if(Qn(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(r=0;r<n.length;r++){var a=n[r];if(!Y.call(t,a)||!Qn(e[a],t[a]))return!1}return!0}function Xn(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function Zn(e,t){var n,r=Xn(e);for(e=0;r;){if(3===r.nodeType){if(n=e+r.textContent.length,e<=t&&n>=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=Xn(r)}}function Jn(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?Jn(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function er(e){for(var t=ft((e=null!=e&&null!=e.ownerDocument&&null!=e.ownerDocument.defaultView?e.ownerDocument.defaultView:window).document);t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=ft((e=t.contentWindow).document)}return t}function tr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}var nr=Mt&&"documentMode"in document&&11>=document.documentMode,rr=null,ar=null,or=null,ir=!1;function lr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;ir||null==rr||rr!==ft(r)||("selectionStart"in(r=rr)&&tr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},or&&Yn(or,r)||(or=r,0<(r=qu(ar,"onSelect")).length&&(t=new Jt("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=rr)))}function sr(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var cr={animationend:sr("Animation","AnimationEnd"),animationiteration:sr("Animation","AnimationIteration"),animationstart:sr("Animation","AnimationStart"),transitionrun:sr("Transition","TransitionRun"),transitionstart:sr("Transition","TransitionStart"),transitioncancel:sr("Transition","TransitionCancel"),transitionend:sr("Transition","TransitionEnd")},ur={},dr={};function pr(e){if(ur[e])return ur[e];if(!cr[e])return e;var t,n=cr[e];for(t in n)if(n.hasOwnProperty(t)&&t in dr)return ur[e]=n[t];return e}Mt&&(dr=document.createElement("div").style,"AnimationEvent"in window||(delete cr.animationend.animation,delete cr.animationiteration.animation,delete cr.animationstart.animation),"TransitionEvent"in window||delete cr.transitionend.transition);var fr=pr("animationend"),mr=pr("animationiteration"),hr=pr("animationstart"),gr=pr("transitionrun"),yr=pr("transitionstart"),br=pr("transitioncancel"),vr=pr("transitionend"),wr=new Map,kr="abort auxClick beforeToggle cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function Sr(e,t){wr.set(e,t),Ke(t,[e])}kr.push("scrollEnd");var xr=new WeakMap;function Er(e,t){if("object"==typeof e&&null!==e){var n=xr.get(e);return void 0!==n?n:(t={value:e,source:t,stack:st(t)},xr.set(e,t),t)}return{value:e,source:t,stack:st(t)}}var Ar=[],_r=0,Cr=0;function Pr(){for(var e=_r,t=Cr=_r=0;t<e;){var n=Ar[t];Ar[t++]=null;var r=Ar[t];Ar[t++]=null;var a=Ar[t];Ar[t++]=null;var o=Ar[t];if(Ar[t++]=null,null!==r&&null!==a){var i=r.pending;null===i?a.next=a:(a.next=i.next,i.next=a),r.pending=a}0!==o&&Nr(n,a,o)}}function Tr(e,t,n,r){Ar[_r++]=e,Ar[_r++]=t,Ar[_r++]=n,Ar[_r++]=r,Cr|=r,e.lanes|=r,null!==(e=e.alternate)&&(e.lanes|=r)}function jr(e,t,n,r){return Tr(e,t,n,r),Or(e)}function Lr(e,t){return Tr(e,null,null,t),Or(e)}function Nr(e,t,n){e.lanes|=n;var r=e.alternate;null!==r&&(r.lanes|=n);for(var a=!1,o=e.return;null!==o;)o.childLanes|=n,null!==(r=o.alternate)&&(r.childLanes|=n),22===o.tag&&(null===(e=o.stateNode)||1&e._visibility||(a=!0)),e=o,o=o.return;return 3===e.tag?(o=e.stateNode,a&&null!==t&&(a=31-fe(n),null===(r=(e=o.hiddenUpdates)[a])?e[a]=[t]:r.push(t),t.lane=536870912|n),o):null}function Or(e){if(50<Nc)throw Nc=0,Oc=null,Error(i(185));for(var t=e.return;null!==t;)t=(e=t).return;return 3===e.tag?e.stateNode:null}var Rr={};function Ir(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.refCleanup=this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Dr(e,t,n,r){return new Ir(e,t,n,r)}function Fr(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Mr(e,t){var n=e.alternate;return null===n?((n=Dr(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=65011712&e.flags,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n.refCleanup=e.refCleanup,n}function zr(e,t){e.flags&=65011714;var n=e.alternate;return null===n?(e.childLanes=0,e.lanes=t,e.child=null,e.subtreeFlags=0,e.memoizedProps=null,e.memoizedState=null,e.updateQueue=null,e.dependencies=null,e.stateNode=null):(e.childLanes=n.childLanes,e.lanes=n.lanes,e.child=n.child,e.subtreeFlags=0,e.deletions=null,e.memoizedProps=n.memoizedProps,e.memoizedState=n.memoizedState,e.updateQueue=n.updateQueue,e.type=n.type,t=n.dependencies,e.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext}),e}function Br(e,t,n,r,a,o){var l=0;if(r=e,"function"==typeof e)Fr(e)&&(l=1);else if("string"==typeof e)l=function(e,t,n){if(1===n||null!=t.itemProp)return!1;switch(e){case"meta":case"title":return!0;case"style":if("string"!=typeof t.precedence||"string"!=typeof t.href||""===t.href)break;return!0;case"link":if("string"!=typeof t.rel||"string"!=typeof t.href||""===t.href||t.onLoad||t.onError)break;return"stylesheet"!==t.rel||(e=t.disabled,"string"==typeof t.precedence&&null==e);case"script":if(t.async&&"function"!=typeof t.async&&"symbol"!=typeof t.async&&!t.onLoad&&!t.onError&&t.src&&"string"==typeof t.src)return!0}return!1}(e,n,U.current)?26:"html"===e||"head"===e||"body"===e?27:5;else e:switch(e){case C:return(e=Dr(31,n,t,a)).elementType=C,e.lanes=o,e;case g:return $r(n.children,a,o,t);case y:l=8,a|=24;break;case b:return(e=Dr(12,n,t,2|a)).elementType=b,e.lanes=o,e;case x:return(e=Dr(13,n,t,a)).elementType=x,e.lanes=o,e;case E:return(e=Dr(19,n,t,a)).elementType=E,e.lanes=o,e;default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case v:case k:l=10;break e;case w:l=9;break e;case S:l=11;break e;case A:l=14;break e;case _:l=16,r=null;break e}l=29,n=Error(i(130,null===e?"null":typeof e,"")),r=null}return(t=Dr(l,n,t,a)).elementType=e,t.type=r,t.lanes=o,t}function $r(e,t,n,r){return(e=Dr(7,e,r,t)).lanes=n,e}function Ur(e,t,n){return(e=Dr(6,e,null,t)).lanes=n,e}function Hr(e,t,n){return(t=Dr(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}var qr=[],Gr=0,Vr=null,Wr=0,Kr=[],Qr=0,Yr=null,Xr=1,Zr="";function Jr(e,t){qr[Gr++]=Wr,qr[Gr++]=Vr,Vr=e,Wr=t}function ea(e,t,n){Kr[Qr++]=Xr,Kr[Qr++]=Zr,Kr[Qr++]=Yr,Yr=e;var r=Xr;e=Zr;var a=32-fe(r)-1;r&=~(1<<a),n+=1;var o=32-fe(t)+a;if(30<o){var i=a-a%5;o=(r&(1<<i)-1).toString(32),r>>=i,a-=i,Xr=1<<32-fe(t)+a|n<<a|r,Zr=o+e}else Xr=1<<o|n<<a|r,Zr=e}function ta(e){null!==e.return&&(Jr(e,1),ea(e,1,0))}function na(e){for(;e===Vr;)Vr=qr[--Gr],qr[Gr]=null,Wr=qr[--Gr],qr[Gr]=null;for(;e===Yr;)Yr=Kr[--Qr],Kr[Qr]=null,Zr=Kr[--Qr],Kr[Qr]=null,Xr=Kr[--Qr],Kr[Qr]=null}var ra=null,aa=null,oa=!1,ia=null,la=!1,sa=Error(i(519));function ca(e){throw ha(Er(Error(i(418,"")),e)),sa}function ua(e){var t=e.stateNode,n=e.type,r=e.memoizedProps;switch(t[Ne]=e,t[Oe]=r,n){case"dialog":Fu("cancel",t),Fu("close",t);break;case"iframe":case"object":case"embed":Fu("load",t);break;case"video":case"audio":for(n=0;n<Ru.length;n++)Fu(Ru[n],t);break;case"source":Fu("error",t);break;case"img":case"image":case"link":Fu("error",t),Fu("load",t);break;case"details":Fu("toggle",t);break;case"input":Fu("invalid",t),yt(t,r.value,r.defaultValue,r.checked,r.defaultChecked,r.type,r.name,!0),dt(t);break;case"select":Fu("invalid",t);break;case"textarea":Fu("invalid",t),kt(t,r.value,r.defaultValue,r.children),dt(t)}"string"!=typeof(n=r.children)&&"number"!=typeof n&&"bigint"!=typeof n||t.textContent===""+n||!0===r.suppressHydrationWarning||Yu(t.textContent,n)?(null!=r.popover&&(Fu("beforetoggle",t),Fu("toggle",t)),null!=r.onScroll&&Fu("scroll",t),null!=r.onScrollEnd&&Fu("scrollend",t),null!=r.onClick&&(t.onclick=Xu),t=!0):t=!1,t||ca(e)}function da(e){for(ra=e.return;ra;)switch(ra.tag){case 5:case 13:return void(la=!1);case 27:case 3:return void(la=!0);default:ra=ra.return}}function pa(e){if(e!==ra)return!1;if(!oa)return da(e),oa=!0,!1;var t,n=e.tag;if((t=3!==n&&27!==n)&&((t=5===n)&&(t=!("form"!==(t=e.type)&&"button"!==t)||id(e.type,e.memoizedProps)),t=!t),t&&aa&&ca(e),da(e),13===n){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(i(317));e:{for(e=e.nextSibling,n=0;e;){if(8===e.nodeType)if("/$"===(t=e.data)){if(0===n){aa=yd(e.nextSibling);break e}n--}else"$"!==t&&"$!"!==t&&"$?"!==t||n++;e=e.nextSibling}aa=null}}else 27===n?(n=aa,fd(e.type)?(e=bd,bd=null,aa=e):aa=n):aa=ra?yd(e.stateNode.nextSibling):null;return!0}function fa(){aa=ra=null,oa=!1}function ma(){var e=ia;return null!==e&&(null===vc?vc=e:vc.push.apply(vc,e),ia=null),e}function ha(e){null===ia?ia=[e]:ia.push(e)}var ga=z(null),ya=null,ba=null;function va(e,t,n){$(ga,t._currentValue),t._currentValue=n}function wa(e){e._currentValue=ga.current,B(ga)}function ka(e,t,n){for(;null!==e;){var r=e.alternate;if((e.childLanes&t)!==t?(e.childLanes|=t,null!==r&&(r.childLanes|=t)):null!==r&&(r.childLanes&t)!==t&&(r.childLanes|=t),e===n)break;e=e.return}}function Sa(e,t,n,r){var a=e.child;for(null!==a&&(a.return=e);null!==a;){var o=a.dependencies;if(null!==o){var l=a.child;o=o.firstContext;e:for(;null!==o;){var s=o;o=a;for(var c=0;c<t.length;c++)if(s.context===t[c]){o.lanes|=n,null!==(s=o.alternate)&&(s.lanes|=n),ka(o.return,n,e),r||(l=null);break e}o=s.next}}else if(18===a.tag){if(null===(l=a.return))throw Error(i(341));l.lanes|=n,null!==(o=l.alternate)&&(o.lanes|=n),ka(l,n,e),l=null}else l=a.child;if(null!==l)l.return=a;else for(l=a;null!==l;){if(l===e){l=null;break}if(null!==(a=l.sibling)){a.return=l.return,l=a;break}l=l.return}a=l}}function xa(e,t,n,r){e=null;for(var a=t,o=!1;null!==a;){if(!o)if(524288&a.flags)o=!0;else if(262144&a.flags)break;if(10===a.tag){var l=a.alternate;if(null===l)throw Error(i(387));if(null!==(l=l.memoizedProps)){var s=a.type;Qn(a.pendingProps.value,l.value)||(null!==e?e.push(s):e=[s])}}else if(a===G.current){if(null===(l=a.alternate))throw Error(i(387));l.memoizedState.memoizedState!==a.memoizedState.memoizedState&&(null!==e?e.push(Kd):e=[Kd])}a=a.return}null!==e&&Sa(t,e,n,r),t.flags|=262144}function Ea(e){for(e=e.firstContext;null!==e;){if(!Qn(e.context._currentValue,e.memoizedValue))return!0;e=e.next}return!1}function Aa(e){ya=e,ba=null,null!==(e=e.dependencies)&&(e.firstContext=null)}function _a(e){return Pa(ya,e)}function Ca(e,t){return null===ya&&Aa(e),Pa(e,t)}function Pa(e,t){var n=t._currentValue;if(t={context:t,memoizedValue:n,next:null},null===ba){if(null===e)throw Error(i(308));ba=t,e.dependencies={lanes:0,firstContext:t},e.flags|=524288}else ba=ba.next=t;return n}var Ta="undefined"!=typeof AbortController?AbortController:function(){var e=[],t=this.signal={aborted:!1,addEventListener:function(t,n){e.push(n)}};this.abort=function(){t.aborted=!0,e.forEach((function(e){return e()}))}},ja=r.unstable_scheduleCallback,La=r.unstable_NormalPriority,Na={$$typeof:k,Consumer:null,Provider:null,_currentValue:null,_currentValue2:null,_threadCount:0};function Oa(){return{controller:new Ta,data:new Map,refCount:0}}function Ra(e){e.refCount--,0===e.refCount&&ja(La,(function(){e.controller.abort()}))}var Ia=null,Da=0,Fa=0,Ma=null;function za(){if(0===--Da&&null!==Ia){null!==Ma&&(Ma.status="fulfilled");var e=Ia;Ia=null,Fa=0,Ma=null;for(var t=0;t<e.length;t++)(0,e[t])()}}var Ba=R.S;R.S=function(e,t){"object"==typeof t&&null!==t&&"function"==typeof t.then&&function(e,t){if(null===Ia){var n=Ia=[];Da=0,Fa=Tu(),Ma={status:"pending",value:void 0,then:function(e){n.push(e)}}}Da++,t.then(za,za)}(0,t),null!==Ba&&Ba(e,t)};var $a=z(null);function Ua(){var e=$a.current;return null!==e?e:rc.pooledCache}function Ha(e,t){$($a,null===t?$a.current:t.pool)}function qa(){var e=Ua();return null===e?null:{parent:Na._currentValue,pool:e}}var Ga=Error(i(460)),Va=Error(i(474)),Wa=Error(i(542)),Ka={then:function(){}};function Qa(e){return"fulfilled"===(e=e.status)||"rejected"===e}function Ya(){}function Xa(e,t,n){switch(void 0===(n=e[n])?e.push(t):n!==t&&(t.then(Ya,Ya),t=n),t.status){case"fulfilled":return t.value;case"rejected":throw eo(e=t.reason),e;default:if("string"==typeof t.status)t.then(Ya,Ya);else{if(null!==(e=rc)&&100<e.shellSuspendCounter)throw Error(i(482));(e=t).status="pending",e.then((function(e){if("pending"===t.status){var n=t;n.status="fulfilled",n.value=e}}),(function(e){if("pending"===t.status){var n=t;n.status="rejected",n.reason=e}}))}switch(t.status){case"fulfilled":return t.value;case"rejected":throw eo(e=t.reason),e}throw Za=t,Ga}}var Za=null;function Ja(){if(null===Za)throw Error(i(459));var e=Za;return Za=null,e}function eo(e){if(e===Ga||e===Wa)throw Error(i(483))}var to=!1;function no(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,lanes:0,hiddenCallbacks:null},callbacks:null}}function ro(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,callbacks:null})}function ao(e){return{lane:e,tag:0,payload:null,callback:null,next:null}}function oo(e,t,n){var r=e.updateQueue;if(null===r)return null;if(r=r.shared,2&nc){var a=r.pending;return null===a?t.next=t:(t.next=a.next,a.next=t),r.pending=t,t=Or(e),Nr(e,null,n),t}return Tr(e,r,t,n),Or(e)}function io(e,t,n){if(null!==(t=t.updateQueue)&&(t=t.shared,4194048&n)){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,Ce(e,n)}}function lo(e,t){var n=e.updateQueue,r=e.alternate;if(null!==r&&n===(r=r.updateQueue)){var a=null,o=null;if(null!==(n=n.firstBaseUpdate)){do{var i={lane:n.lane,tag:n.tag,payload:n.payload,callback:null,next:null};null===o?a=o=i:o=o.next=i,n=n.next}while(null!==n);null===o?a=o=t:o=o.next=t}else a=o=t;return n={baseState:r.baseState,firstBaseUpdate:a,lastBaseUpdate:o,shared:r.shared,callbacks:r.callbacks},void(e.updateQueue=n)}null===(e=n.lastBaseUpdate)?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}var so=!1;function co(){if(so){if(null!==Ma)throw Ma}}function uo(e,t,n,r){so=!1;var a=e.updateQueue;to=!1;var o=a.firstBaseUpdate,i=a.lastBaseUpdate,l=a.shared.pending;if(null!==l){a.shared.pending=null;var s=l,c=s.next;s.next=null,null===i?o=c:i.next=c,i=s;var u=e.alternate;null!==u&&((l=(u=u.updateQueue).lastBaseUpdate)!==i&&(null===l?u.firstBaseUpdate=c:l.next=c,u.lastBaseUpdate=s))}if(null!==o){var d=a.baseState;for(i=0,u=c=s=null,l=o;;){var f=-536870913&l.lane,m=f!==l.lane;if(m?(oc&f)===f:(r&f)===f){0!==f&&f===Fa&&(so=!0),null!==u&&(u=u.next={lane:0,tag:l.tag,payload:l.payload,callback:null,next:null});e:{var h=e,g=l;f=t;var y=n;switch(g.tag){case 1:if("function"==typeof(h=g.payload)){d=h.call(y,d,f);break e}d=h;break e;case 3:h.flags=-65537&h.flags|128;case 0:if(null==(f="function"==typeof(h=g.payload)?h.call(y,d,f):h))break e;d=p({},d,f);break e;case 2:to=!0}}null!==(f=l.callback)&&(e.flags|=64,m&&(e.flags|=8192),null===(m=a.callbacks)?a.callbacks=[f]:m.push(f))}else m={lane:f,tag:l.tag,payload:l.payload,callback:l.callback,next:null},null===u?(c=u=m,s=d):u=u.next=m,i|=f;if(null===(l=l.next)){if(null===(l=a.shared.pending))break;l=(m=l).next,m.next=null,a.lastBaseUpdate=m,a.shared.pending=null}}null===u&&(s=d),a.baseState=s,a.firstBaseUpdate=c,a.lastBaseUpdate=u,null===o&&(a.shared.lanes=0),fc|=i,e.lanes=i,e.memoizedState=d}}function po(e,t){if("function"!=typeof e)throw Error(i(191,e));e.call(t)}function fo(e,t){var n=e.callbacks;if(null!==n)for(e.callbacks=null,e=0;e<n.length;e++)po(n[e],t)}var mo=z(null),ho=z(0);function go(e,t){$(ho,e=dc),$(mo,t),dc=e|t.baseLanes}function yo(){$(ho,dc),$(mo,mo.current)}function bo(){dc=ho.current,B(mo),B(ho)}var vo=0,wo=null,ko=null,So=null,xo=!1,Eo=!1,Ao=!1,_o=0,Co=0,Po=null,To=0;function jo(){throw Error(i(321))}function Lo(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!Qn(e[n],t[n]))return!1;return!0}function No(e,t,n,r,a,o){return vo=o,wo=t,t.memoizedState=null,t.updateQueue=null,t.lanes=0,R.H=null===e||null===e.memoizedState?Vi:Wi,Ao=!1,o=n(r,a),Ao=!1,Eo&&(o=Ro(t,n,r,a)),Oo(e),o}function Oo(e){R.H=Gi;var t=null!==ko&&null!==ko.next;if(vo=0,So=ko=wo=null,xo=!1,Co=0,Po=null,t)throw Error(i(300));null===e||Cl||null!==(e=e.dependencies)&&Ea(e)&&(Cl=!0)}function Ro(e,t,n,r){wo=e;var a=0;do{if(Eo&&(Po=null),Co=0,Eo=!1,25<=a)throw Error(i(301));if(a+=1,So=ko=null,null!=e.updateQueue){var o=e.updateQueue;o.lastEffect=null,o.events=null,o.stores=null,null!=o.memoCache&&(o.memoCache.index=0)}R.H=Ki,o=t(n,r)}while(Eo);return o}function Io(){var e=R.H,t=e.useState()[0];return t="function"==typeof t.then?$o(t):t,e=e.useState()[0],(null!==ko?ko.memoizedState:null)!==e&&(wo.flags|=1024),t}function Do(){var e=0!==_o;return _o=0,e}function Fo(e,t,n){t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~n}function Mo(e){if(xo){for(e=e.memoizedState;null!==e;){var t=e.queue;null!==t&&(t.pending=null),e=e.next}xo=!1}vo=0,So=ko=wo=null,Eo=!1,Co=_o=0,Po=null}function zo(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===So?wo.memoizedState=So=e:So=So.next=e,So}function Bo(){if(null===ko){var e=wo.alternate;e=null!==e?e.memoizedState:null}else e=ko.next;var t=null===So?wo.memoizedState:So.next;if(null!==t)So=t,ko=e;else{if(null===e){if(null===wo.alternate)throw Error(i(467));throw Error(i(310))}e={memoizedState:(ko=e).memoizedState,baseState:ko.baseState,baseQueue:ko.baseQueue,queue:ko.queue,next:null},null===So?wo.memoizedState=So=e:So=So.next=e}return So}function $o(e){var t=Co;return Co+=1,null===Po&&(Po=[]),e=Xa(Po,e,t),t=wo,null===(null===So?t.memoizedState:So.next)&&(t=t.alternate,R.H=null===t||null===t.memoizedState?Vi:Wi),e}function Uo(e){if(null!==e&&"object"==typeof e){if("function"==typeof e.then)return $o(e);if(e.$$typeof===k)return _a(e)}throw Error(i(438,String(e)))}function Ho(e){var t=null,n=wo.updateQueue;if(null!==n&&(t=n.memoCache),null==t){var r=wo.alternate;null!==r&&(null!==(r=r.updateQueue)&&(null!=(r=r.memoCache)&&(t={data:r.data.map((function(e){return e.slice()})),index:0})))}if(null==t&&(t={data:[],index:0}),null===n&&(n={lastEffect:null,events:null,stores:null,memoCache:null},wo.updateQueue=n),n.memoCache=t,void 0===(n=t.data[t.index]))for(n=t.data[t.index]=Array(e),r=0;r<e;r++)n[r]=P;return t.index++,n}function qo(e,t){return"function"==typeof t?t(e):t}function Go(e){return Vo(Bo(),ko,e)}function Vo(e,t,n){var r=e.queue;if(null===r)throw Error(i(311));r.lastRenderedReducer=n;var a=e.baseQueue,o=r.pending;if(null!==o){if(null!==a){var l=a.next;a.next=o.next,o.next=l}t.baseQueue=a=o,r.pending=null}if(o=e.baseState,null===a)e.memoizedState=o;else{var s=l=null,c=null,u=t=a.next,d=!1;do{var p=-536870913&u.lane;if(p!==u.lane?(oc&p)===p:(vo&p)===p){var f=u.revertLane;if(0===f)null!==c&&(c=c.next={lane:0,revertLane:0,action:u.action,hasEagerState:u.hasEagerState,eagerState:u.eagerState,next:null}),p===Fa&&(d=!0);else{if((vo&f)===f){u=u.next,f===Fa&&(d=!0);continue}p={lane:0,revertLane:u.revertLane,action:u.action,hasEagerState:u.hasEagerState,eagerState:u.eagerState,next:null},null===c?(s=c=p,l=o):c=c.next=p,wo.lanes|=f,fc|=f}p=u.action,Ao&&n(o,p),o=u.hasEagerState?u.eagerState:n(o,p)}else f={lane:p,revertLane:u.revertLane,action:u.action,hasEagerState:u.hasEagerState,eagerState:u.eagerState,next:null},null===c?(s=c=f,l=o):c=c.next=f,wo.lanes|=p,fc|=p;u=u.next}while(null!==u&&u!==t);if(null===c?l=o:c.next=s,!Qn(o,e.memoizedState)&&(Cl=!0,d&&null!==(n=Ma)))throw n;e.memoizedState=o,e.baseState=l,e.baseQueue=c,r.lastRenderedState=o}return null===a&&(r.lanes=0),[e.memoizedState,r.dispatch]}function Wo(e){var t=Bo(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var r=n.dispatch,a=n.pending,o=t.memoizedState;if(null!==a){n.pending=null;var l=a=a.next;do{o=e(o,l.action),l=l.next}while(l!==a);Qn(o,t.memoizedState)||(Cl=!0),t.memoizedState=o,null===t.baseQueue&&(t.baseState=o),n.lastRenderedState=o}return[o,r]}function Ko(e,t,n){var r=wo,a=Bo(),o=oa;if(o){if(void 0===n)throw Error(i(407));n=n()}else n=t();var l=!Qn((ko||a).memoizedState,n);if(l&&(a.memoizedState=n,Cl=!0),a=a.queue,yi(2048,8,Xo.bind(null,r,a,e),[e]),a.getSnapshot!==t||l||null!==So&&1&So.memoizedState.tag){if(r.flags|=2048,mi(9,{destroy:void 0,resource:void 0},Yo.bind(null,r,a,n,t),null),null===rc)throw Error(i(349));o||124&vo||Qo(r,t,n)}return n}function Qo(e,t,n){e.flags|=16384,e={getSnapshot:t,value:n},null===(t=wo.updateQueue)?(t={lastEffect:null,events:null,stores:null,memoCache:null},wo.updateQueue=t,t.stores=[e]):null===(n=t.stores)?t.stores=[e]:n.push(e)}function Yo(e,t,n,r){t.value=n,t.getSnapshot=r,Zo(t)&&Jo(e)}function Xo(e,t,n){return n((function(){Zo(t)&&Jo(e)}))}function Zo(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!Qn(e,n)}catch(r){return!0}}function Jo(e){var t=Lr(e,2);null!==t&&Dc(t,e,2)}function ei(e){var t=zo();if("function"==typeof e){var n=e;if(e=n(),Ao){pe(!0);try{n()}finally{pe(!1)}}}return t.memoizedState=t.baseState=e,t.queue={pending:null,lanes:0,dispatch:null,lastRenderedReducer:qo,lastRenderedState:e},t}function ti(e,t,n,r){return e.baseState=n,Vo(e,ko,"function"==typeof r?r:qo)}function ni(e,t,n,r,a){if(Ui(e))throw Error(i(485));if(null!==(e=t.action)){var o={payload:a,action:e,next:null,isTransition:!0,status:"pending",value:null,reason:null,listeners:[],then:function(e){o.listeners.push(e)}};null!==R.T?n(!0):o.isTransition=!1,r(o),null===(n=t.pending)?(o.next=t.pending=o,ri(t,o)):(o.next=n.next,t.pending=n.next=o)}}function ri(e,t){var n=t.action,r=t.payload,a=e.state;if(t.isTransition){var o=R.T,i={};R.T=i;try{var l=n(a,r),s=R.S;null!==s&&s(i,l),ai(e,t,l)}catch(c){ii(e,t,c)}finally{R.T=o}}else try{ai(e,t,o=n(a,r))}catch(u){ii(e,t,u)}}function ai(e,t,n){null!==n&&"object"==typeof n&&"function"==typeof n.then?n.then((function(n){oi(e,t,n)}),(function(n){return ii(e,t,n)})):oi(e,t,n)}function oi(e,t,n){t.status="fulfilled",t.value=n,li(t),e.state=n,null!==(t=e.pending)&&((n=t.next)===t?e.pending=null:(n=n.next,t.next=n,ri(e,n)))}function ii(e,t,n){var r=e.pending;if(e.pending=null,null!==r){r=r.next;do{t.status="rejected",t.reason=n,li(t),t=t.next}while(t!==r)}e.action=null}function li(e){e=e.listeners;for(var t=0;t<e.length;t++)(0,e[t])()}function si(e,t){return t}function ci(e,t){if(oa){var n=rc.formState;if(null!==n){e:{var r=wo;if(oa){if(aa){t:{for(var a=aa,o=la;8!==a.nodeType;){if(!o){a=null;break t}if(null===(a=yd(a.nextSibling))){a=null;break t}}a="F!"===(o=a.data)||"F"===o?a:null}if(a){aa=yd(a.nextSibling),r="F!"===a.data;break e}}ca(r)}r=!1}r&&(t=n[0])}}return(n=zo()).memoizedState=n.baseState=t,r={pending:null,lanes:0,dispatch:null,lastRenderedReducer:si,lastRenderedState:t},n.queue=r,n=zi.bind(null,wo,r),r.dispatch=n,r=ei(!1),o=$i.bind(null,wo,!1,r.queue),a={state:t,dispatch:null,action:e,pending:null},(r=zo()).queue=a,n=ni.bind(null,wo,a,o,n),a.dispatch=n,r.memoizedState=e,[t,n,!1]}function ui(e){return di(Bo(),ko,e)}function di(e,t,n){if(t=Vo(e,t,si)[0],e=Go(qo)[0],"object"==typeof t&&null!==t&&"function"==typeof t.then)try{var r=$o(t)}catch(i){if(i===Ga)throw Wa;throw i}else r=t;var a=(t=Bo()).queue,o=a.dispatch;return n!==t.memoizedState&&(wo.flags|=2048,mi(9,{destroy:void 0,resource:void 0},pi.bind(null,a,n),null)),[r,o,e]}function pi(e,t){e.action=t}function fi(e){var t=Bo(),n=ko;if(null!==n)return di(t,n,e);Bo(),t=t.memoizedState;var r=(n=Bo()).queue.dispatch;return n.memoizedState=e,[t,r,!1]}function mi(e,t,n,r){return e={tag:e,create:n,deps:r,inst:t,next:null},null===(t=wo.updateQueue)&&(t={lastEffect:null,events:null,stores:null,memoCache:null},wo.updateQueue=t),null===(n=t.lastEffect)?t.lastEffect=e.next=e:(r=n.next,n.next=e,e.next=r,t.lastEffect=e),e}function hi(){return Bo().memoizedState}function gi(e,t,n,r){var a=zo();r=void 0===r?null:r,wo.flags|=e,a.memoizedState=mi(1|t,{destroy:void 0,resource:void 0},n,r)}function yi(e,t,n,r){var a=Bo();r=void 0===r?null:r;var o=a.memoizedState.inst;null!==ko&&null!==r&&Lo(r,ko.memoizedState.deps)?a.memoizedState=mi(t,o,n,r):(wo.flags|=e,a.memoizedState=mi(1|t,o,n,r))}function bi(e,t){gi(8390656,8,e,t)}function vi(e,t){yi(2048,8,e,t)}function wi(e,t){return yi(4,2,e,t)}function ki(e,t){return yi(4,4,e,t)}function Si(e,t){if("function"==typeof t){e=e();var n=t(e);return function(){"function"==typeof n?n():t(null)}}if(null!=t)return e=e(),t.current=e,function(){t.current=null}}function xi(e,t,n){n=null!=n?n.concat([e]):null,yi(4,4,Si.bind(null,t,e),n)}function Ei(){}function Ai(e,t){var n=Bo();t=void 0===t?null:t;var r=n.memoizedState;return null!==t&&Lo(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function _i(e,t){var n=Bo();t=void 0===t?null:t;var r=n.memoizedState;if(null!==t&&Lo(t,r[1]))return r[0];if(r=e(),Ao){pe(!0);try{e()}finally{pe(!1)}}return n.memoizedState=[r,t],r}function Ci(e,t,n){return void 0===n||1073741824&vo?e.memoizedState=t:(e.memoizedState=n,e=Ic(),wo.lanes|=e,fc|=e,n)}function Pi(e,t,n,r){return Qn(n,t)?n:null!==mo.current?(e=Ci(e,n,r),Qn(e,t)||(Cl=!0),e):42&vo?(e=Ic(),wo.lanes|=e,fc|=e,t):(Cl=!0,e.memoizedState=n)}function Ti(e,t,n,r,a){var o=I.p;I.p=0!==o&&8>o?o:8;var i,l,s,c=R.T,u={};R.T=u,$i(e,!1,t,n);try{var d=a(),p=R.S;if(null!==p&&p(u,d),null!==d&&"object"==typeof d&&"function"==typeof d.then)Bi(e,t,(i=r,l=[],s={status:"pending",value:null,reason:null,then:function(e){l.push(e)}},d.then((function(){s.status="fulfilled",s.value=i;for(var e=0;e<l.length;e++)(0,l[e])(i)}),(function(e){for(s.status="rejected",s.reason=e,e=0;e<l.length;e++)(0,l[e])(void 0)})),s),Rc());else Bi(e,t,r,Rc())}catch(f){Bi(e,t,{then:function(){},status:"rejected",reason:f},Rc())}finally{I.p=o,R.T=c}}function ji(){}function Li(e,t,n,r){if(5!==e.tag)throw Error(i(476));var a=Ni(e).queue;Ti(e,a,t,D,null===n?ji:function(){return Oi(e),n(r)})}function Ni(e){var t=e.memoizedState;if(null!==t)return t;var n={};return(t={memoizedState:D,baseState:D,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:qo,lastRenderedState:D},next:null}).next={memoizedState:n,baseState:n,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:qo,lastRenderedState:n},next:null},e.memoizedState=t,null!==(e=e.alternate)&&(e.memoizedState=t),t}function Oi(e){Bi(e,Ni(e).next.queue,{},Rc())}function Ri(){return _a(Kd)}function Ii(){return Bo().memoizedState}function Di(){return Bo().memoizedState}function Fi(e){for(var t=e.return;null!==t;){switch(t.tag){case 24:case 3:var n=Rc(),r=oo(t,e=ao(n),n);return null!==r&&(Dc(r,t,n),io(r,t,n)),t={cache:Oa()},void(e.payload=t)}t=t.return}}function Mi(e,t,n){var r=Rc();n={lane:r,revertLane:0,action:n,hasEagerState:!1,eagerState:null,next:null},Ui(e)?Hi(t,n):null!==(n=jr(e,t,n,r))&&(Dc(n,e,r),qi(n,t,r))}function zi(e,t,n){Bi(e,t,n,Rc())}function Bi(e,t,n,r){var a={lane:r,revertLane:0,action:n,hasEagerState:!1,eagerState:null,next:null};if(Ui(e))Hi(t,a);else{var o=e.alternate;if(0===e.lanes&&(null===o||0===o.lanes)&&null!==(o=t.lastRenderedReducer))try{var i=t.lastRenderedState,l=o(i,n);if(a.hasEagerState=!0,a.eagerState=l,Qn(l,i))return Tr(e,t,a,0),null===rc&&Pr(),!1}catch(s){}if(null!==(n=jr(e,t,a,r)))return Dc(n,e,r),qi(n,t,r),!0}return!1}function $i(e,t,n,r){if(r={lane:2,revertLane:Tu(),action:r,hasEagerState:!1,eagerState:null,next:null},Ui(e)){if(t)throw Error(i(479))}else null!==(t=jr(e,n,r,2))&&Dc(t,e,2)}function Ui(e){var t=e.alternate;return e===wo||null!==t&&t===wo}function Hi(e,t){Eo=xo=!0;var n=e.pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function qi(e,t,n){if(4194048&n){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,Ce(e,n)}}var Gi={readContext:_a,use:Uo,useCallback:jo,useContext:jo,useEffect:jo,useImperativeHandle:jo,useLayoutEffect:jo,useInsertionEffect:jo,useMemo:jo,useReducer:jo,useRef:jo,useState:jo,useDebugValue:jo,useDeferredValue:jo,useTransition:jo,useSyncExternalStore:jo,useId:jo,useHostTransitionStatus:jo,useFormState:jo,useActionState:jo,useOptimistic:jo,useMemoCache:jo,useCacheRefresh:jo},Vi={readContext:_a,use:Uo,useCallback:function(e,t){return zo().memoizedState=[e,void 0===t?null:t],e},useContext:_a,useEffect:bi,useImperativeHandle:function(e,t,n){n=null!=n?n.concat([e]):null,gi(4194308,4,Si.bind(null,t,e),n)},useLayoutEffect:function(e,t){return gi(4194308,4,e,t)},useInsertionEffect:function(e,t){gi(4,2,e,t)},useMemo:function(e,t){var n=zo();t=void 0===t?null:t;var r=e();if(Ao){pe(!0);try{e()}finally{pe(!1)}}return n.memoizedState=[r,t],r},useReducer:function(e,t,n){var r=zo();if(void 0!==n){var a=n(t);if(Ao){pe(!0);try{n(t)}finally{pe(!1)}}}else a=t;return r.memoizedState=r.baseState=a,e={pending:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:a},r.queue=e,e=e.dispatch=Mi.bind(null,wo,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},zo().memoizedState=e},useState:function(e){var t=(e=ei(e)).queue,n=zi.bind(null,wo,t);return t.dispatch=n,[e.memoizedState,n]},useDebugValue:Ei,useDeferredValue:function(e,t){return Ci(zo(),e,t)},useTransition:function(){var e=ei(!1);return e=Ti.bind(null,wo,e.queue,!0,!1),zo().memoizedState=e,[!1,e]},useSyncExternalStore:function(e,t,n){var r=wo,a=zo();if(oa){if(void 0===n)throw Error(i(407));n=n()}else{if(n=t(),null===rc)throw Error(i(349));124&oc||Qo(r,t,n)}a.memoizedState=n;var o={value:n,getSnapshot:t};return a.queue=o,bi(Xo.bind(null,r,o,e),[e]),r.flags|=2048,mi(9,{destroy:void 0,resource:void 0},Yo.bind(null,r,o,n,t),null),n},useId:function(){var e=zo(),t=rc.identifierPrefix;if(oa){var n=Zr;t="\xab"+t+"R"+(n=(Xr&~(1<<32-fe(Xr)-1)).toString(32)+n),0<(n=_o++)&&(t+="H"+n.toString(32)),t+="\xbb"}else t="\xab"+t+"r"+(n=To++).toString(32)+"\xbb";return e.memoizedState=t},useHostTransitionStatus:Ri,useFormState:ci,useActionState:ci,useOptimistic:function(e){var t=zo();t.memoizedState=t.baseState=e;var n={pending:null,lanes:0,dispatch:null,lastRenderedReducer:null,lastRenderedState:null};return t.queue=n,t=$i.bind(null,wo,!0,n),n.dispatch=t,[e,t]},useMemoCache:Ho,useCacheRefresh:function(){return zo().memoizedState=Fi.bind(null,wo)}},Wi={readContext:_a,use:Uo,useCallback:Ai,useContext:_a,useEffect:vi,useImperativeHandle:xi,useInsertionEffect:wi,useLayoutEffect:ki,useMemo:_i,useReducer:Go,useRef:hi,useState:function(){return Go(qo)},useDebugValue:Ei,useDeferredValue:function(e,t){return Pi(Bo(),ko.memoizedState,e,t)},useTransition:function(){var e=Go(qo)[0],t=Bo().memoizedState;return["boolean"==typeof e?e:$o(e),t]},useSyncExternalStore:Ko,useId:Ii,useHostTransitionStatus:Ri,useFormState:ui,useActionState:ui,useOptimistic:function(e,t){return ti(Bo(),0,e,t)},useMemoCache:Ho,useCacheRefresh:Di},Ki={readContext:_a,use:Uo,useCallback:Ai,useContext:_a,useEffect:vi,useImperativeHandle:xi,useInsertionEffect:wi,useLayoutEffect:ki,useMemo:_i,useReducer:Wo,useRef:hi,useState:function(){return Wo(qo)},useDebugValue:Ei,useDeferredValue:function(e,t){var n=Bo();return null===ko?Ci(n,e,t):Pi(n,ko.memoizedState,e,t)},useTransition:function(){var e=Wo(qo)[0],t=Bo().memoizedState;return["boolean"==typeof e?e:$o(e),t]},useSyncExternalStore:Ko,useId:Ii,useHostTransitionStatus:Ri,useFormState:fi,useActionState:fi,useOptimistic:function(e,t){var n=Bo();return null!==ko?ti(n,0,e,t):(n.baseState=e,[e,n.queue.dispatch])},useMemoCache:Ho,useCacheRefresh:Di},Qi=null,Yi=0;function Xi(e){var t=Yi;return Yi+=1,null===Qi&&(Qi=[]),Xa(Qi,e,t)}function Zi(e,t){t=t.props.ref,e.ref=void 0!==t?t:null}function Ji(e,t){if(t.$$typeof===f)throw Error(i(525));throw e=Object.prototype.toString.call(t),Error(i(31,"[object Object]"===e?"object with keys {"+Object.keys(t).join(", ")+"}":e))}function el(e){return(0,e._init)(e._payload)}function tl(e){function t(t,n){if(e){var r=t.deletions;null===r?(t.deletions=[n],t.flags|=16):r.push(n)}}function n(n,r){if(!e)return null;for(;null!==r;)t(n,r),r=r.sibling;return null}function r(e){for(var t=new Map;null!==e;)null!==e.key?t.set(e.key,e):t.set(e.index,e),e=e.sibling;return t}function a(e,t){return(e=Mr(e,t)).index=0,e.sibling=null,e}function o(t,n,r){return t.index=r,e?null!==(r=t.alternate)?(r=r.index)<n?(t.flags|=67108866,n):r:(t.flags|=67108866,n):(t.flags|=1048576,n)}function l(t){return e&&null===t.alternate&&(t.flags|=67108866),t}function s(e,t,n,r){return null===t||6!==t.tag?((t=Ur(n,e.mode,r)).return=e,t):((t=a(t,n)).return=e,t)}function c(e,t,n,r){var o=n.type;return o===g?d(e,t,n.props.children,r,n.key):null!==t&&(t.elementType===o||"object"==typeof o&&null!==o&&o.$$typeof===_&&el(o)===t.type)?(Zi(t=a(t,n.props),n),t.return=e,t):(Zi(t=Br(n.type,n.key,n.props,null,e.mode,r),n),t.return=e,t)}function u(e,t,n,r){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Hr(n,e.mode,r)).return=e,t):((t=a(t,n.children||[])).return=e,t)}function d(e,t,n,r,o){return null===t||7!==t.tag?((t=$r(n,e.mode,r,o)).return=e,t):((t=a(t,n)).return=e,t)}function p(e,t,n){if("string"==typeof t&&""!==t||"number"==typeof t||"bigint"==typeof t)return(t=Ur(""+t,e.mode,n)).return=e,t;if("object"==typeof t&&null!==t){switch(t.$$typeof){case m:return Zi(n=Br(t.type,t.key,t.props,null,e.mode,n),t),n.return=e,n;case h:return(t=Hr(t,e.mode,n)).return=e,t;case _:return p(e,t=(0,t._init)(t._payload),n)}if(O(t)||j(t))return(t=$r(t,e.mode,n,null)).return=e,t;if("function"==typeof t.then)return p(e,Xi(t),n);if(t.$$typeof===k)return p(e,Ca(e,t),n);Ji(e,t)}return null}function f(e,t,n,r){var a=null!==t?t.key:null;if("string"==typeof n&&""!==n||"number"==typeof n||"bigint"==typeof n)return null!==a?null:s(e,t,""+n,r);if("object"==typeof n&&null!==n){switch(n.$$typeof){case m:return n.key===a?c(e,t,n,r):null;case h:return n.key===a?u(e,t,n,r):null;case _:return f(e,t,n=(a=n._init)(n._payload),r)}if(O(n)||j(n))return null!==a?null:d(e,t,n,r,null);if("function"==typeof n.then)return f(e,t,Xi(n),r);if(n.$$typeof===k)return f(e,t,Ca(e,n),r);Ji(e,n)}return null}function y(e,t,n,r,a){if("string"==typeof r&&""!==r||"number"==typeof r||"bigint"==typeof r)return s(t,e=e.get(n)||null,""+r,a);if("object"==typeof r&&null!==r){switch(r.$$typeof){case m:return c(t,e=e.get(null===r.key?n:r.key)||null,r,a);case h:return u(t,e=e.get(null===r.key?n:r.key)||null,r,a);case _:return y(e,t,n,r=(0,r._init)(r._payload),a)}if(O(r)||j(r))return d(t,e=e.get(n)||null,r,a,null);if("function"==typeof r.then)return y(e,t,n,Xi(r),a);if(r.$$typeof===k)return y(e,t,n,Ca(t,r),a);Ji(t,r)}return null}function b(s,c,u,d){if("object"==typeof u&&null!==u&&u.type===g&&null===u.key&&(u=u.props.children),"object"==typeof u&&null!==u){switch(u.$$typeof){case m:e:{for(var v=u.key;null!==c;){if(c.key===v){if((v=u.type)===g){if(7===c.tag){n(s,c.sibling),(d=a(c,u.props.children)).return=s,s=d;break e}}else if(c.elementType===v||"object"==typeof v&&null!==v&&v.$$typeof===_&&el(v)===c.type){n(s,c.sibling),Zi(d=a(c,u.props),u),d.return=s,s=d;break e}n(s,c);break}t(s,c),c=c.sibling}u.type===g?((d=$r(u.props.children,s.mode,d,u.key)).return=s,s=d):(Zi(d=Br(u.type,u.key,u.props,null,s.mode,d),u),d.return=s,s=d)}return l(s);case h:e:{for(v=u.key;null!==c;){if(c.key===v){if(4===c.tag&&c.stateNode.containerInfo===u.containerInfo&&c.stateNode.implementation===u.implementation){n(s,c.sibling),(d=a(c,u.children||[])).return=s,s=d;break e}n(s,c);break}t(s,c),c=c.sibling}(d=Hr(u,s.mode,d)).return=s,s=d}return l(s);case _:return b(s,c,u=(v=u._init)(u._payload),d)}if(O(u))return function(a,i,l,s){for(var c=null,u=null,d=i,m=i=0,h=null;null!==d&&m<l.length;m++){d.index>m?(h=d,d=null):h=d.sibling;var g=f(a,d,l[m],s);if(null===g){null===d&&(d=h);break}e&&d&&null===g.alternate&&t(a,d),i=o(g,i,m),null===u?c=g:u.sibling=g,u=g,d=h}if(m===l.length)return n(a,d),oa&&Jr(a,m),c;if(null===d){for(;m<l.length;m++)null!==(d=p(a,l[m],s))&&(i=o(d,i,m),null===u?c=d:u.sibling=d,u=d);return oa&&Jr(a,m),c}for(d=r(d);m<l.length;m++)null!==(h=y(d,a,m,l[m],s))&&(e&&null!==h.alternate&&d.delete(null===h.key?m:h.key),i=o(h,i,m),null===u?c=h:u.sibling=h,u=h);return e&&d.forEach((function(e){return t(a,e)})),oa&&Jr(a,m),c}(s,c,u,d);if(j(u)){if("function"!=typeof(v=j(u)))throw Error(i(150));return function(a,l,s,c){if(null==s)throw Error(i(151));for(var u=null,d=null,m=l,h=l=0,g=null,b=s.next();null!==m&&!b.done;h++,b=s.next()){m.index>h?(g=m,m=null):g=m.sibling;var v=f(a,m,b.value,c);if(null===v){null===m&&(m=g);break}e&&m&&null===v.alternate&&t(a,m),l=o(v,l,h),null===d?u=v:d.sibling=v,d=v,m=g}if(b.done)return n(a,m),oa&&Jr(a,h),u;if(null===m){for(;!b.done;h++,b=s.next())null!==(b=p(a,b.value,c))&&(l=o(b,l,h),null===d?u=b:d.sibling=b,d=b);return oa&&Jr(a,h),u}for(m=r(m);!b.done;h++,b=s.next())null!==(b=y(m,a,h,b.value,c))&&(e&&null!==b.alternate&&m.delete(null===b.key?h:b.key),l=o(b,l,h),null===d?u=b:d.sibling=b,d=b);return e&&m.forEach((function(e){return t(a,e)})),oa&&Jr(a,h),u}(s,c,u=v.call(u),d)}if("function"==typeof u.then)return b(s,c,Xi(u),d);if(u.$$typeof===k)return b(s,c,Ca(s,u),d);Ji(s,u)}return"string"==typeof u&&""!==u||"number"==typeof u||"bigint"==typeof u?(u=""+u,null!==c&&6===c.tag?(n(s,c.sibling),(d=a(c,u)).return=s,s=d):(n(s,c),(d=Ur(u,s.mode,d)).return=s,s=d),l(s)):n(s,c)}return function(e,t,n,r){try{Yi=0;var a=b(e,t,n,r);return Qi=null,a}catch(i){if(i===Ga||i===Wa)throw i;var o=Dr(29,i,null,e.mode);return o.lanes=r,o.return=e,o}}}var nl=tl(!0),rl=tl(!1),al=z(null),ol=null;function il(e){var t=e.alternate;$(ul,1&ul.current),$(al,e),null===ol&&(null===t||null!==mo.current||null!==t.memoizedState)&&(ol=e)}function ll(e){if(22===e.tag){if($(ul,ul.current),$(al,e),null===ol){var t=e.alternate;null!==t&&null!==t.memoizedState&&(ol=e)}}else sl()}function sl(){$(ul,ul.current),$(al,al.current)}function cl(e){B(al),ol===e&&(ol=null),B(ul)}var ul=z(0);function dl(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||gd(n)))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(128&t.flags)return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}function pl(e,t,n,r){n=null==(n=n(r,t=e.memoizedState))?t:p({},t,n),e.memoizedState=n,0===e.lanes&&(e.updateQueue.baseState=n)}var fl={enqueueSetState:function(e,t,n){e=e._reactInternals;var r=Rc(),a=ao(r);a.payload=t,null!=n&&(a.callback=n),null!==(t=oo(e,a,r))&&(Dc(t,e,r),io(t,e,r))},enqueueReplaceState:function(e,t,n){e=e._reactInternals;var r=Rc(),a=ao(r);a.tag=1,a.payload=t,null!=n&&(a.callback=n),null!==(t=oo(e,a,r))&&(Dc(t,e,r),io(t,e,r))},enqueueForceUpdate:function(e,t){e=e._reactInternals;var n=Rc(),r=ao(n);r.tag=2,null!=t&&(r.callback=t),null!==(t=oo(e,r,n))&&(Dc(t,e,n),io(t,e,n))}};function ml(e,t,n,r,a,o,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,o,i):!t.prototype||!t.prototype.isPureReactComponent||(!Yn(n,r)||!Yn(a,o))}function hl(e,t,n,r){e=t.state,"function"==typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),"function"==typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&fl.enqueueReplaceState(t,t.state,null)}function gl(e,t){var n=t;if("ref"in t)for(var r in n={},t)"ref"!==r&&(n[r]=t[r]);if(e=e.defaultProps)for(var a in n===t&&(n=p({},n)),e)void 0===n[a]&&(n[a]=e[a]);return n}var yl="function"==typeof reportError?reportError:function(e){if("object"==typeof window&&"function"==typeof window.ErrorEvent){var t=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:"object"==typeof e&&null!==e&&"string"==typeof e.message?String(e.message):String(e),error:e});if(!window.dispatchEvent(t))return}else if("object"==typeof process&&"function"==typeof process.emit)return void process.emit("uncaughtException",e);console.error(e)};function bl(e){yl(e)}function vl(e){console.error(e)}function wl(e){yl(e)}function kl(e,t){try{(0,e.onUncaughtError)(t.value,{componentStack:t.stack})}catch(n){setTimeout((function(){throw n}))}}function Sl(e,t,n){try{(0,e.onCaughtError)(n.value,{componentStack:n.stack,errorBoundary:1===t.tag?t.stateNode:null})}catch(r){setTimeout((function(){throw r}))}}function xl(e,t,n){return(n=ao(n)).tag=3,n.payload={element:null},n.callback=function(){kl(e,t)},n}function El(e){return(e=ao(e)).tag=3,e}function Al(e,t,n,r){var a=n.type.getDerivedStateFromError;if("function"==typeof a){var o=r.value;e.payload=function(){return a(o)},e.callback=function(){Sl(t,n,r)}}var i=n.stateNode;null!==i&&"function"==typeof i.componentDidCatch&&(e.callback=function(){Sl(t,n,r),"function"!=typeof a&&(null===Ec?Ec=new Set([this]):Ec.add(this));var e=r.stack;this.componentDidCatch(r.value,{componentStack:null!==e?e:""})})}var _l=Error(i(461)),Cl=!1;function Pl(e,t,n,r){t.child=null===e?rl(t,null,n,r):nl(t,e.child,n,r)}function Tl(e,t,n,r,a){n=n.render;var o=t.ref;if("ref"in r){var i={};for(var l in r)"ref"!==l&&(i[l]=r[l])}else i=r;return Aa(t),r=No(e,t,n,i,o,a),l=Do(),null===e||Cl?(oa&&l&&ta(t),t.flags|=1,Pl(e,t,r,a),t.child):(Fo(e,t,a),Ql(e,t,a))}function jl(e,t,n,r,a){if(null===e){var o=n.type;return"function"!=typeof o||Fr(o)||void 0!==o.defaultProps||null!==n.compare?((e=Br(n.type,null,r,t,t.mode,a)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=o,Ll(e,t,o,r,a))}if(o=e.child,!Yl(e,a)){var i=o.memoizedProps;if((n=null!==(n=n.compare)?n:Yn)(i,r)&&e.ref===t.ref)return Ql(e,t,a)}return t.flags|=1,(e=Mr(o,r)).ref=t.ref,e.return=t,t.child=e}function Ll(e,t,n,r,a){if(null!==e){var o=e.memoizedProps;if(Yn(o,r)&&e.ref===t.ref){if(Cl=!1,t.pendingProps=r=o,!Yl(e,a))return t.lanes=e.lanes,Ql(e,t,a);131072&e.flags&&(Cl=!0)}}return Il(e,t,n,r,a)}function Nl(e,t,n){var r=t.pendingProps,a=r.children,o=null!==e?e.memoizedState:null;if("hidden"===r.mode){if(128&t.flags){if(r=null!==o?o.baseLanes|n:n,null!==e){for(a=t.child=e.child,o=0;null!==a;)o=o|a.lanes|a.childLanes,a=a.sibling;t.childLanes=o&~r}else t.childLanes=0,t.child=null;return Ol(e,t,r,n)}if(!(536870912&n))return t.lanes=t.childLanes=536870912,Ol(e,t,null!==o?o.baseLanes|n:n,n);t.memoizedState={baseLanes:0,cachePool:null},null!==e&&Ha(0,null!==o?o.cachePool:null),null!==o?go(t,o):yo(),ll(t)}else null!==o?(Ha(0,o.cachePool),go(t,o),sl(),t.memoizedState=null):(null!==e&&Ha(0,null),yo(),sl());return Pl(e,t,a,n),t.child}function Ol(e,t,n,r){var a=Ua();return a=null===a?null:{parent:Na._currentValue,pool:a},t.memoizedState={baseLanes:n,cachePool:a},null!==e&&Ha(0,null),yo(),ll(t),null!==e&&xa(e,t,r,!0),null}function Rl(e,t){var n=t.ref;if(null===n)null!==e&&null!==e.ref&&(t.flags|=4194816);else{if("function"!=typeof n&&"object"!=typeof n)throw Error(i(284));null!==e&&e.ref===n||(t.flags|=4194816)}}function Il(e,t,n,r,a){return Aa(t),n=No(e,t,n,r,void 0,a),r=Do(),null===e||Cl?(oa&&r&&ta(t),t.flags|=1,Pl(e,t,n,a),t.child):(Fo(e,t,a),Ql(e,t,a))}function Dl(e,t,n,r,a,o){return Aa(t),t.updateQueue=null,n=Ro(t,r,n,a),Oo(e),r=Do(),null===e||Cl?(oa&&r&&ta(t),t.flags|=1,Pl(e,t,n,o),t.child):(Fo(e,t,o),Ql(e,t,o))}function Fl(e,t,n,r,a){if(Aa(t),null===t.stateNode){var o=Rr,i=n.contextType;"object"==typeof i&&null!==i&&(o=_a(i)),o=new n(r,o),t.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,o.updater=fl,t.stateNode=o,o._reactInternals=t,(o=t.stateNode).props=r,o.state=t.memoizedState,o.refs={},no(t),i=n.contextType,o.context="object"==typeof i&&null!==i?_a(i):Rr,o.state=t.memoizedState,"function"==typeof(i=n.getDerivedStateFromProps)&&(pl(t,n,i,r),o.state=t.memoizedState),"function"==typeof n.getDerivedStateFromProps||"function"==typeof o.getSnapshotBeforeUpdate||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||(i=o.state,"function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount(),i!==o.state&&fl.enqueueReplaceState(o,o.state,null),uo(t,r,o,a),co(),o.state=t.memoizedState),"function"==typeof o.componentDidMount&&(t.flags|=4194308),r=!0}else if(null===e){o=t.stateNode;var l=t.memoizedProps,s=gl(n,l);o.props=s;var c=o.context,u=n.contextType;i=Rr,"object"==typeof u&&null!==u&&(i=_a(u));var d=n.getDerivedStateFromProps;u="function"==typeof d||"function"==typeof o.getSnapshotBeforeUpdate,l=t.pendingProps!==l,u||"function"!=typeof o.UNSAFE_componentWillReceiveProps&&"function"!=typeof o.componentWillReceiveProps||(l||c!==i)&&hl(t,o,r,i),to=!1;var p=t.memoizedState;o.state=p,uo(t,r,o,a),co(),c=t.memoizedState,l||p!==c||to?("function"==typeof d&&(pl(t,n,d,r),c=t.memoizedState),(s=to||ml(t,n,s,r,p,c,i))?(u||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||("function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount()),"function"==typeof o.componentDidMount&&(t.flags|=4194308)):("function"==typeof o.componentDidMount&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=c),o.props=r,o.state=c,o.context=i,r=s):("function"==typeof o.componentDidMount&&(t.flags|=4194308),r=!1)}else{o=t.stateNode,ro(e,t),u=gl(n,i=t.memoizedProps),o.props=u,d=t.pendingProps,p=o.context,c=n.contextType,s=Rr,"object"==typeof c&&null!==c&&(s=_a(c)),(c="function"==typeof(l=n.getDerivedStateFromProps)||"function"==typeof o.getSnapshotBeforeUpdate)||"function"!=typeof o.UNSAFE_componentWillReceiveProps&&"function"!=typeof o.componentWillReceiveProps||(i!==d||p!==s)&&hl(t,o,r,s),to=!1,p=t.memoizedState,o.state=p,uo(t,r,o,a),co();var f=t.memoizedState;i!==d||p!==f||to||null!==e&&null!==e.dependencies&&Ea(e.dependencies)?("function"==typeof l&&(pl(t,n,l,r),f=t.memoizedState),(u=to||ml(t,n,u,r,p,f,s)||null!==e&&null!==e.dependencies&&Ea(e.dependencies))?(c||"function"!=typeof o.UNSAFE_componentWillUpdate&&"function"!=typeof o.componentWillUpdate||("function"==typeof o.componentWillUpdate&&o.componentWillUpdate(r,f,s),"function"==typeof o.UNSAFE_componentWillUpdate&&o.UNSAFE_componentWillUpdate(r,f,s)),"function"==typeof o.componentDidUpdate&&(t.flags|=4),"function"==typeof o.getSnapshotBeforeUpdate&&(t.flags|=1024)):("function"!=typeof o.componentDidUpdate||i===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof o.getSnapshotBeforeUpdate||i===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),t.memoizedProps=r,t.memoizedState=f),o.props=r,o.state=f,o.context=s,r=u):("function"!=typeof o.componentDidUpdate||i===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof o.getSnapshotBeforeUpdate||i===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),r=!1)}return o=r,Rl(e,t),r=!!(128&t.flags),o||r?(o=t.stateNode,n=r&&"function"!=typeof n.getDerivedStateFromError?null:o.render(),t.flags|=1,null!==e&&r?(t.child=nl(t,e.child,null,a),t.child=nl(t,null,n,a)):Pl(e,t,n,a),t.memoizedState=o.state,e=t.child):e=Ql(e,t,a),e}function Ml(e,t,n,r){return fa(),t.flags|=256,Pl(e,t,n,r),t.child}var zl={dehydrated:null,treeContext:null,retryLane:0,hydrationErrors:null};function Bl(e){return{baseLanes:e,cachePool:qa()}}function $l(e,t,n){return e=null!==e?e.childLanes&~n:0,t&&(e|=gc),e}function Ul(e,t,n){var r,a=t.pendingProps,o=!1,l=!!(128&t.flags);if((r=l)||(r=(null===e||null!==e.memoizedState)&&!!(2&ul.current)),r&&(o=!0,t.flags&=-129),r=!!(32&t.flags),t.flags&=-33,null===e){if(oa){if(o?il(t):sl(),oa){var s,c=aa;if(s=c){e:{for(s=c,c=la;8!==s.nodeType;){if(!c){c=null;break e}if(null===(s=yd(s.nextSibling))){c=null;break e}}c=s}null!==c?(t.memoizedState={dehydrated:c,treeContext:null!==Yr?{id:Xr,overflow:Zr}:null,retryLane:536870912,hydrationErrors:null},(s=Dr(18,null,null,0)).stateNode=c,s.return=t,t.child=s,ra=t,aa=null,s=!0):s=!1}s||ca(t)}if(null!==(c=t.memoizedState)&&null!==(c=c.dehydrated))return gd(c)?t.lanes=32:t.lanes=536870912,null;cl(t)}return c=a.children,a=a.fallback,o?(sl(),c=ql({mode:"hidden",children:c},o=t.mode),a=$r(a,o,n,null),c.return=t,a.return=t,c.sibling=a,t.child=c,(o=t.child).memoizedState=Bl(n),o.childLanes=$l(e,r,n),t.memoizedState=zl,a):(il(t),Hl(t,c))}if(null!==(s=e.memoizedState)&&null!==(c=s.dehydrated)){if(l)256&t.flags?(il(t),t.flags&=-257,t=Gl(e,t,n)):null!==t.memoizedState?(sl(),t.child=e.child,t.flags|=128,t=null):(sl(),o=a.fallback,c=t.mode,a=ql({mode:"visible",children:a.children},c),(o=$r(o,c,n,null)).flags|=2,a.return=t,o.return=t,a.sibling=o,t.child=a,nl(t,e.child,null,n),(a=t.child).memoizedState=Bl(n),a.childLanes=$l(e,r,n),t.memoizedState=zl,t=o);else if(il(t),gd(c)){if(r=c.nextSibling&&c.nextSibling.dataset)var u=r.dgst;r=u,(a=Error(i(419))).stack="",a.digest=r,ha({value:a,source:null,stack:null}),t=Gl(e,t,n)}else if(Cl||xa(e,t,n,!1),r=0!==(n&e.childLanes),Cl||r){if(null!==(r=rc)&&(0!==(a=0!==((a=42&(a=n&-n)?1:Pe(a))&(r.suspendedLanes|n))?0:a)&&a!==s.retryLane))throw s.retryLane=a,Lr(e,a),Dc(r,e,a),_l;"$?"===c.data||Wc(),t=Gl(e,t,n)}else"$?"===c.data?(t.flags|=192,t.child=e.child,t=null):(e=s.treeContext,aa=yd(c.nextSibling),ra=t,oa=!0,ia=null,la=!1,null!==e&&(Kr[Qr++]=Xr,Kr[Qr++]=Zr,Kr[Qr++]=Yr,Xr=e.id,Zr=e.overflow,Yr=t),(t=Hl(t,a.children)).flags|=4096);return t}return o?(sl(),o=a.fallback,c=t.mode,u=(s=e.child).sibling,(a=Mr(s,{mode:"hidden",children:a.children})).subtreeFlags=65011712&s.subtreeFlags,null!==u?o=Mr(u,o):(o=$r(o,c,n,null)).flags|=2,o.return=t,a.return=t,a.sibling=o,t.child=a,a=o,o=t.child,null===(c=e.child.memoizedState)?c=Bl(n):(null!==(s=c.cachePool)?(u=Na._currentValue,s=s.parent!==u?{parent:u,pool:u}:s):s=qa(),c={baseLanes:c.baseLanes|n,cachePool:s}),o.memoizedState=c,o.childLanes=$l(e,r,n),t.memoizedState=zl,a):(il(t),e=(n=e.child).sibling,(n=Mr(n,{mode:"visible",children:a.children})).return=t,n.sibling=null,null!==e&&(null===(r=t.deletions)?(t.deletions=[e],t.flags|=16):r.push(e)),t.child=n,t.memoizedState=null,n)}function Hl(e,t){return(t=ql({mode:"visible",children:t},e.mode)).return=e,e.child=t}function ql(e,t){return(e=Dr(22,e,null,t)).lanes=0,e.stateNode={_visibility:1,_pendingMarkers:null,_retryCache:null,_transitions:null},e}function Gl(e,t,n){return nl(t,e.child,null,n),(e=Hl(t,t.pendingProps.children)).flags|=2,t.memoizedState=null,e}function Vl(e,t,n){e.lanes|=t;var r=e.alternate;null!==r&&(r.lanes|=t),ka(e.return,t,n)}function Wl(e,t,n,r,a){var o=e.memoizedState;null===o?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:a}:(o.isBackwards=t,o.rendering=null,o.renderingStartTime=0,o.last=r,o.tail=n,o.tailMode=a)}function Kl(e,t,n){var r=t.pendingProps,a=r.revealOrder,o=r.tail;if(Pl(e,t,r.children,n),2&(r=ul.current))r=1&r|2,t.flags|=128;else{if(null!==e&&128&e.flags)e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Vl(e,n,t);else if(19===e.tag)Vl(e,n,t);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}switch($(ul,r),a){case"forwards":for(n=t.child,a=null;null!==n;)null!==(e=n.alternate)&&null===dl(e)&&(a=n),n=n.sibling;null===(n=a)?(a=t.child,t.child=null):(a=n.sibling,n.sibling=null),Wl(t,!1,a,n,o);break;case"backwards":for(n=null,a=t.child,t.child=null;null!==a;){if(null!==(e=a.alternate)&&null===dl(e)){t.child=a;break}e=a.sibling,a.sibling=n,n=a,a=e}Wl(t,!0,n,null,o);break;case"together":Wl(t,!1,null,null,void 0);break;default:t.memoizedState=null}return t.child}function Ql(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),fc|=t.lanes,0===(n&t.childLanes)){if(null===e)return null;if(xa(e,t,n,!1),0===(n&t.childLanes))return null}if(null!==e&&t.child!==e.child)throw Error(i(153));if(null!==t.child){for(n=Mr(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Mr(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Yl(e,t){return 0!==(e.lanes&t)||!(null===(e=e.dependencies)||!Ea(e))}function Xl(e,t,n){if(null!==e)if(e.memoizedProps!==t.pendingProps)Cl=!0;else{if(!(Yl(e,n)||128&t.flags))return Cl=!1,function(e,t,n){switch(t.tag){case 3:V(t,t.stateNode.containerInfo),va(0,Na,e.memoizedState.cache),fa();break;case 27:case 5:K(t);break;case 4:V(t,t.stateNode.containerInfo);break;case 10:va(0,t.type,t.memoizedProps.value);break;case 13:var r=t.memoizedState;if(null!==r)return null!==r.dehydrated?(il(t),t.flags|=128,null):0!==(n&t.child.childLanes)?Ul(e,t,n):(il(t),null!==(e=Ql(e,t,n))?e.sibling:null);il(t);break;case 19:var a=!!(128&e.flags);if((r=0!==(n&t.childLanes))||(xa(e,t,n,!1),r=0!==(n&t.childLanes)),a){if(r)return Kl(e,t,n);t.flags|=128}if(null!==(a=t.memoizedState)&&(a.rendering=null,a.tail=null,a.lastEffect=null),$(ul,ul.current),r)break;return null;case 22:case 23:return t.lanes=0,Nl(e,t,n);case 24:va(0,Na,e.memoizedState.cache)}return Ql(e,t,n)}(e,t,n);Cl=!!(131072&e.flags)}else Cl=!1,oa&&1048576&t.flags&&ea(t,Wr,t.index);switch(t.lanes=0,t.tag){case 16:e:{e=t.pendingProps;var r=t.elementType,a=r._init;if(r=a(r._payload),t.type=r,"function"!=typeof r){if(null!=r){if((a=r.$$typeof)===S){t.tag=11,t=Tl(null,t,r,e,n);break e}if(a===A){t.tag=14,t=jl(null,t,r,e,n);break e}}throw t=N(r)||r,Error(i(306,t,""))}Fr(r)?(e=gl(r,e),t.tag=1,t=Fl(null,t,r,e,n)):(t.tag=0,t=Il(null,t,r,e,n))}return t;case 0:return Il(e,t,t.type,t.pendingProps,n);case 1:return Fl(e,t,r=t.type,a=gl(r,t.pendingProps),n);case 3:e:{if(V(t,t.stateNode.containerInfo),null===e)throw Error(i(387));r=t.pendingProps;var o=t.memoizedState;a=o.element,ro(e,t),uo(t,r,null,n);var l=t.memoizedState;if(r=l.cache,va(0,Na,r),r!==o.cache&&Sa(t,[Na],n,!0),co(),r=l.element,o.isDehydrated){if(o={element:r,isDehydrated:!1,cache:l.cache},t.updateQueue.baseState=o,t.memoizedState=o,256&t.flags){t=Ml(e,t,r,n);break e}if(r!==a){ha(a=Er(Error(i(424)),t)),t=Ml(e,t,r,n);break e}if(9===(e=t.stateNode.containerInfo).nodeType)e=e.body;else e="HTML"===e.nodeName?e.ownerDocument.body:e;for(aa=yd(e.firstChild),ra=t,oa=!0,ia=null,la=!0,n=rl(t,null,r,n),t.child=n;n;)n.flags=-3&n.flags|4096,n=n.sibling}else{if(fa(),r===a){t=Ql(e,t,n);break e}Pl(e,t,r,n)}t=t.child}return t;case 26:return Rl(e,t),null===e?(n=Pd(t.type,null,t.pendingProps,null))?t.memoizedState=n:oa||(n=t.type,e=t.pendingProps,(r=rd(q.current).createElement(n))[Ne]=t,r[Oe]=e,ed(r,n,e),Ge(r),t.stateNode=r):t.memoizedState=Pd(t.type,e.memoizedProps,t.pendingProps,e.memoizedState),null;case 27:return K(t),null===e&&oa&&(r=t.stateNode=wd(t.type,t.pendingProps,q.current),ra=t,la=!0,a=aa,fd(t.type)?(bd=a,aa=yd(r.firstChild)):aa=a),Pl(e,t,t.pendingProps.children,n),Rl(e,t),null===e&&(t.flags|=4194304),t.child;case 5:return null===e&&oa&&((a=r=aa)&&(null!==(r=function(e,t,n,r){for(;1===e.nodeType;){var a=n;if(e.nodeName.toLowerCase()!==t.toLowerCase()){if(!r&&("INPUT"!==e.nodeName||"hidden"!==e.type))break}else if(r){if(!e[ze])switch(t){case"meta":if(!e.hasAttribute("itemprop"))break;return e;case"link":if("stylesheet"===(o=e.getAttribute("rel"))&&e.hasAttribute("data-precedence"))break;if(o!==a.rel||e.getAttribute("href")!==(null==a.href||""===a.href?null:a.href)||e.getAttribute("crossorigin")!==(null==a.crossOrigin?null:a.crossOrigin)||e.getAttribute("title")!==(null==a.title?null:a.title))break;return e;case"style":if(e.hasAttribute("data-precedence"))break;return e;case"script":if(((o=e.getAttribute("src"))!==(null==a.src?null:a.src)||e.getAttribute("type")!==(null==a.type?null:a.type)||e.getAttribute("crossorigin")!==(null==a.crossOrigin?null:a.crossOrigin))&&o&&e.hasAttribute("async")&&!e.hasAttribute("itemprop"))break;return e;default:return e}}else{if("input"!==t||"hidden"!==e.type)return e;var o=null==a.name?null:""+a.name;if("hidden"===a.type&&e.getAttribute("name")===o)return e}if(null===(e=yd(e.nextSibling)))break}return null}(r,t.type,t.pendingProps,la))?(t.stateNode=r,ra=t,aa=yd(r.firstChild),la=!1,a=!0):a=!1),a||ca(t)),K(t),a=t.type,o=t.pendingProps,l=null!==e?e.memoizedProps:null,r=o.children,id(a,o)?r=null:null!==l&&id(a,l)&&(t.flags|=32),null!==t.memoizedState&&(a=No(e,t,Io,null,null,n),Kd._currentValue=a),Rl(e,t),Pl(e,t,r,n),t.child;case 6:return null===e&&oa&&((e=n=aa)&&(null!==(n=function(e,t,n){if(""===t)return null;for(;3!==e.nodeType;){if((1!==e.nodeType||"INPUT"!==e.nodeName||"hidden"!==e.type)&&!n)return null;if(null===(e=yd(e.nextSibling)))return null}return e}(n,t.pendingProps,la))?(t.stateNode=n,ra=t,aa=null,e=!0):e=!1),e||ca(t)),null;case 13:return Ul(e,t,n);case 4:return V(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=nl(t,null,r,n):Pl(e,t,r,n),t.child;case 11:return Tl(e,t,t.type,t.pendingProps,n);case 7:return Pl(e,t,t.pendingProps,n),t.child;case 8:case 12:return Pl(e,t,t.pendingProps.children,n),t.child;case 10:return r=t.pendingProps,va(0,t.type,r.value),Pl(e,t,r.children,n),t.child;case 9:return a=t.type._context,r=t.pendingProps.children,Aa(t),r=r(a=_a(a)),t.flags|=1,Pl(e,t,r,n),t.child;case 14:return jl(e,t,t.type,t.pendingProps,n);case 15:return Ll(e,t,t.type,t.pendingProps,n);case 19:return Kl(e,t,n);case 31:return r=t.pendingProps,n=t.mode,r={mode:r.mode,children:r.children},null===e?((n=ql(r,n)).ref=t.ref,t.child=n,n.return=t,t=n):((n=Mr(e.child,r)).ref=t.ref,t.child=n,n.return=t,t=n),t;case 22:return Nl(e,t,n);case 24:return Aa(t),r=_a(Na),null===e?(null===(a=Ua())&&(a=rc,o=Oa(),a.pooledCache=o,o.refCount++,null!==o&&(a.pooledCacheLanes|=n),a=o),t.memoizedState={parent:r,cache:a},no(t),va(0,Na,a)):(0!==(e.lanes&n)&&(ro(e,t),uo(t,null,null,n),co()),a=e.memoizedState,o=t.memoizedState,a.parent!==r?(a={parent:r,cache:r},t.memoizedState=a,0===t.lanes&&(t.memoizedState=t.updateQueue.baseState=a),va(0,Na,r)):(r=o.cache,va(0,Na,r),r!==a.cache&&Sa(t,[Na],n,!0))),Pl(e,t,t.pendingProps.children,n),t.child;case 29:throw t.pendingProps}throw Error(i(156,t.tag))}function Zl(e){e.flags|=4}function Jl(e,t){if("stylesheet"!==t.type||4&t.state.loading)e.flags&=-16777217;else if(e.flags|=16777216,!$d(t)){if(null!==(t=al.current)&&((4194048&oc)===oc?null!==ol:(62914560&oc)!==oc&&!(536870912&oc)||t!==ol))throw Za=Ka,Va;e.flags|=8192}}function es(e,t){null!==t&&(e.flags|=4),16384&e.flags&&(t=22!==e.tag?xe():536870912,e.lanes|=t,yc|=t)}function ts(e,t){if(!oa)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function ns(e){var t=null!==e.alternate&&e.alternate.child===e.child,n=0,r=0;if(t)for(var a=e.child;null!==a;)n|=a.lanes|a.childLanes,r|=65011712&a.subtreeFlags,r|=65011712&a.flags,a.return=e,a=a.sibling;else for(a=e.child;null!==a;)n|=a.lanes|a.childLanes,r|=a.subtreeFlags,r|=a.flags,a.return=e,a=a.sibling;return e.subtreeFlags|=r,e.childLanes=n,t}function rs(e,t,n){var r=t.pendingProps;switch(na(t),t.tag){case 31:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:case 1:return ns(t),null;case 3:return n=t.stateNode,r=null,null!==e&&(r=e.memoizedState.cache),t.memoizedState.cache!==r&&(t.flags|=2048),wa(Na),W(),n.pendingContext&&(n.context=n.pendingContext,n.pendingContext=null),null!==e&&null!==e.child||(pa(t)?Zl(t):null===e||e.memoizedState.isDehydrated&&!(256&t.flags)||(t.flags|=1024,ma())),ns(t),null;case 26:return n=t.memoizedState,null===e?(Zl(t),null!==n?(ns(t),Jl(t,n)):(ns(t),t.flags&=-16777217)):n?n!==e.memoizedState?(Zl(t),ns(t),Jl(t,n)):(ns(t),t.flags&=-16777217):(e.memoizedProps!==r&&Zl(t),ns(t),t.flags&=-16777217),null;case 27:Q(t),n=q.current;var a=t.type;if(null!==e&&null!=t.stateNode)e.memoizedProps!==r&&Zl(t);else{if(!r){if(null===t.stateNode)throw Error(i(166));return ns(t),null}e=U.current,pa(t)?ua(t):(e=wd(a,r,n),t.stateNode=e,Zl(t))}return ns(t),null;case 5:if(Q(t),n=t.type,null!==e&&null!=t.stateNode)e.memoizedProps!==r&&Zl(t);else{if(!r){if(null===t.stateNode)throw Error(i(166));return ns(t),null}if(e=U.current,pa(t))ua(t);else{switch(a=rd(q.current),e){case 1:e=a.createElementNS("http://www.w3.org/2000/svg",n);break;case 2:e=a.createElementNS("http://www.w3.org/1998/Math/MathML",n);break;default:switch(n){case"svg":e=a.createElementNS("http://www.w3.org/2000/svg",n);break;case"math":e=a.createElementNS("http://www.w3.org/1998/Math/MathML",n);break;case"script":(e=a.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild);break;case"select":e="string"==typeof r.is?a.createElement("select",{is:r.is}):a.createElement("select"),r.multiple?e.multiple=!0:r.size&&(e.size=r.size);break;default:e="string"==typeof r.is?a.createElement(n,{is:r.is}):a.createElement(n)}}e[Ne]=t,e[Oe]=r;e:for(a=t.child;null!==a;){if(5===a.tag||6===a.tag)e.appendChild(a.stateNode);else if(4!==a.tag&&27!==a.tag&&null!==a.child){a.child.return=a,a=a.child;continue}if(a===t)break e;for(;null===a.sibling;){if(null===a.return||a.return===t)break e;a=a.return}a.sibling.return=a.return,a=a.sibling}t.stateNode=e;e:switch(ed(e,n,r),n){case"button":case"input":case"select":case"textarea":e=!!r.autoFocus;break e;case"img":e=!0;break e;default:e=!1}e&&Zl(t)}}return ns(t),t.flags&=-16777217,null;case 6:if(e&&null!=t.stateNode)e.memoizedProps!==r&&Zl(t);else{if("string"!=typeof r&&null===t.stateNode)throw Error(i(166));if(e=q.current,pa(t)){if(e=t.stateNode,n=t.memoizedProps,r=null,null!==(a=ra))switch(a.tag){case 27:case 5:r=a.memoizedProps}e[Ne]=t,(e=!!(e.nodeValue===n||null!==r&&!0===r.suppressHydrationWarning||Yu(e.nodeValue,n)))||ca(t)}else(e=rd(e).createTextNode(r))[Ne]=t,t.stateNode=e}return ns(t),null;case 13:if(r=t.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(a=pa(t),null!==r&&null!==r.dehydrated){if(null===e){if(!a)throw Error(i(318));if(!(a=null!==(a=t.memoizedState)?a.dehydrated:null))throw Error(i(317));a[Ne]=t}else fa(),!(128&t.flags)&&(t.memoizedState=null),t.flags|=4;ns(t),a=!1}else a=ma(),null!==e&&null!==e.memoizedState&&(e.memoizedState.hydrationErrors=a),a=!0;if(!a)return 256&t.flags?(cl(t),t):(cl(t),null)}if(cl(t),128&t.flags)return t.lanes=n,t;if(n=null!==r,e=null!==e&&null!==e.memoizedState,n){a=null,null!==(r=t.child).alternate&&null!==r.alternate.memoizedState&&null!==r.alternate.memoizedState.cachePool&&(a=r.alternate.memoizedState.cachePool.pool);var o=null;null!==r.memoizedState&&null!==r.memoizedState.cachePool&&(o=r.memoizedState.cachePool.pool),o!==a&&(r.flags|=2048)}return n!==e&&n&&(t.child.flags|=8192),es(t,t.updateQueue),ns(t),null;case 4:return W(),null===e&&Bu(t.stateNode.containerInfo),ns(t),null;case 10:return wa(t.type),ns(t),null;case 19:if(B(ul),null===(a=t.memoizedState))return ns(t),null;if(r=!!(128&t.flags),null===(o=a.rendering))if(r)ts(a,!1);else{if(0!==pc||null!==e&&128&e.flags)for(e=t.child;null!==e;){if(null!==(o=dl(e))){for(t.flags|=128,ts(a,!1),e=o.updateQueue,t.updateQueue=e,es(t,e),t.subtreeFlags=0,e=n,n=t.child;null!==n;)zr(n,e),n=n.sibling;return $(ul,1&ul.current|2),t.child}e=e.sibling}null!==a.tail&&te()>Sc&&(t.flags|=128,r=!0,ts(a,!1),t.lanes=4194304)}else{if(!r)if(null!==(e=dl(o))){if(t.flags|=128,r=!0,e=e.updateQueue,t.updateQueue=e,es(t,e),ts(a,!0),null===a.tail&&"hidden"===a.tailMode&&!o.alternate&&!oa)return ns(t),null}else 2*te()-a.renderingStartTime>Sc&&536870912!==n&&(t.flags|=128,r=!0,ts(a,!1),t.lanes=4194304);a.isBackwards?(o.sibling=t.child,t.child=o):(null!==(e=a.last)?e.sibling=o:t.child=o,a.last=o)}return null!==a.tail?(t=a.tail,a.rendering=t,a.tail=t.sibling,a.renderingStartTime=te(),t.sibling=null,e=ul.current,$(ul,r?1&e|2:1&e),t):(ns(t),null);case 22:case 23:return cl(t),bo(),r=null!==t.memoizedState,null!==e?null!==e.memoizedState!==r&&(t.flags|=8192):r&&(t.flags|=8192),r?!!(536870912&n)&&!(128&t.flags)&&(ns(t),6&t.subtreeFlags&&(t.flags|=8192)):ns(t),null!==(n=t.updateQueue)&&es(t,n.retryQueue),n=null,null!==e&&null!==e.memoizedState&&null!==e.memoizedState.cachePool&&(n=e.memoizedState.cachePool.pool),r=null,null!==t.memoizedState&&null!==t.memoizedState.cachePool&&(r=t.memoizedState.cachePool.pool),r!==n&&(t.flags|=2048),null!==e&&B($a),null;case 24:return n=null,null!==e&&(n=e.memoizedState.cache),t.memoizedState.cache!==n&&(t.flags|=2048),wa(Na),ns(t),null;case 25:case 30:return null}throw Error(i(156,t.tag))}function as(e,t){switch(na(t),t.tag){case 1:return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 3:return wa(Na),W(),65536&(e=t.flags)&&!(128&e)?(t.flags=-65537&e|128,t):null;case 26:case 27:case 5:return Q(t),null;case 13:if(cl(t),null!==(e=t.memoizedState)&&null!==e.dehydrated){if(null===t.alternate)throw Error(i(340));fa()}return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 19:return B(ul),null;case 4:return W(),null;case 10:return wa(t.type),null;case 22:case 23:return cl(t),bo(),null!==e&&B($a),65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 24:return wa(Na),null;default:return null}}function os(e,t){switch(na(t),t.tag){case 3:wa(Na),W();break;case 26:case 27:case 5:Q(t);break;case 4:W();break;case 13:cl(t);break;case 19:B(ul);break;case 10:wa(t.type);break;case 22:case 23:cl(t),bo(),null!==e&&B($a);break;case 24:wa(Na)}}function is(e,t){try{var n=t.updateQueue,r=null!==n?n.lastEffect:null;if(null!==r){var a=r.next;n=a;do{if((n.tag&e)===e){r=void 0;var o=n.create,i=n.inst;r=o(),i.destroy=r}n=n.next}while(n!==a)}}catch(l){uu(t,t.return,l)}}function ls(e,t,n){try{var r=t.updateQueue,a=null!==r?r.lastEffect:null;if(null!==a){var o=a.next;r=o;do{if((r.tag&e)===e){var i=r.inst,l=i.destroy;if(void 0!==l){i.destroy=void 0,a=t;var s=n,c=l;try{c()}catch(u){uu(a,s,u)}}}r=r.next}while(r!==o)}}catch(u){uu(t,t.return,u)}}function ss(e){var t=e.updateQueue;if(null!==t){var n=e.stateNode;try{fo(t,n)}catch(r){uu(e,e.return,r)}}}function cs(e,t,n){n.props=gl(e.type,e.memoizedProps),n.state=e.memoizedState;try{n.componentWillUnmount()}catch(r){uu(e,t,r)}}function us(e,t){try{var n=e.ref;if(null!==n){switch(e.tag){case 26:case 27:case 5:var r=e.stateNode;break;default:r=e.stateNode}"function"==typeof n?e.refCleanup=n(r):n.current=r}}catch(a){uu(e,t,a)}}function ds(e,t){var n=e.ref,r=e.refCleanup;if(null!==n)if("function"==typeof r)try{r()}catch(a){uu(e,t,a)}finally{e.refCleanup=null,null!=(e=e.alternate)&&(e.refCleanup=null)}else if("function"==typeof n)try{n(null)}catch(o){uu(e,t,o)}else n.current=null}function ps(e){var t=e.type,n=e.memoizedProps,r=e.stateNode;try{e:switch(t){case"button":case"input":case"select":case"textarea":n.autoFocus&&r.focus();break e;case"img":n.src?r.src=n.src:n.srcSet&&(r.srcset=n.srcSet)}}catch(a){uu(e,e.return,a)}}function fs(e,t,n){try{var r=e.stateNode;!function(e,t,n,r){switch(t){case"div":case"span":case"svg":case"path":case"a":case"g":case"p":case"li":break;case"input":var a=null,o=null,l=null,s=null,c=null,u=null,d=null;for(m in n){var p=n[m];if(n.hasOwnProperty(m)&&null!=p)switch(m){case"checked":case"value":break;case"defaultValue":c=p;default:r.hasOwnProperty(m)||Zu(e,t,m,null,r,p)}}for(var f in r){var m=r[f];if(p=n[f],r.hasOwnProperty(f)&&(null!=m||null!=p))switch(f){case"type":o=m;break;case"name":a=m;break;case"checked":u=m;break;case"defaultChecked":d=m;break;case"value":l=m;break;case"defaultValue":s=m;break;case"children":case"dangerouslySetInnerHTML":if(null!=m)throw Error(i(137,t));break;default:m!==p&&Zu(e,t,f,m,r,p)}}return void gt(e,l,s,c,u,d,o,a);case"select":for(o in m=l=s=f=null,n)if(c=n[o],n.hasOwnProperty(o)&&null!=c)switch(o){case"value":break;case"multiple":m=c;default:r.hasOwnProperty(o)||Zu(e,t,o,null,r,c)}for(a in r)if(o=r[a],c=n[a],r.hasOwnProperty(a)&&(null!=o||null!=c))switch(a){case"value":f=o;break;case"defaultValue":s=o;break;case"multiple":l=o;default:o!==c&&Zu(e,t,a,o,r,c)}return t=s,n=l,r=m,void(null!=f?vt(e,!!n,f,!1):!!r!=!!n&&(null!=t?vt(e,!!n,t,!0):vt(e,!!n,n?[]:"",!1)));case"textarea":for(s in m=f=null,n)if(a=n[s],n.hasOwnProperty(s)&&null!=a&&!r.hasOwnProperty(s))switch(s){case"value":case"children":break;default:Zu(e,t,s,null,r,a)}for(l in r)if(a=r[l],o=n[l],r.hasOwnProperty(l)&&(null!=a||null!=o))switch(l){case"value":f=a;break;case"defaultValue":m=a;break;case"children":break;case"dangerouslySetInnerHTML":if(null!=a)throw Error(i(91));break;default:a!==o&&Zu(e,t,l,a,r,o)}return void wt(e,f,m);case"option":for(var h in n)if(f=n[h],n.hasOwnProperty(h)&&null!=f&&!r.hasOwnProperty(h))if("selected"===h)e.selected=!1;else Zu(e,t,h,null,r,f);for(c in r)if(f=r[c],m=n[c],r.hasOwnProperty(c)&&f!==m&&(null!=f||null!=m))if("selected"===c)e.selected=f&&"function"!=typeof f&&"symbol"!=typeof f;else Zu(e,t,c,f,r,m);return;case"img":case"link":case"area":case"base":case"br":case"col":case"embed":case"hr":case"keygen":case"meta":case"param":case"source":case"track":case"wbr":case"menuitem":for(var g in n)f=n[g],n.hasOwnProperty(g)&&null!=f&&!r.hasOwnProperty(g)&&Zu(e,t,g,null,r,f);for(u in r)if(f=r[u],m=n[u],r.hasOwnProperty(u)&&f!==m&&(null!=f||null!=m))switch(u){case"children":case"dangerouslySetInnerHTML":if(null!=f)throw Error(i(137,t));break;default:Zu(e,t,u,f,r,m)}return;default:if(_t(t)){for(var y in n)f=n[y],n.hasOwnProperty(y)&&void 0!==f&&!r.hasOwnProperty(y)&&Ju(e,t,y,void 0,r,f);for(d in r)f=r[d],m=n[d],!r.hasOwnProperty(d)||f===m||void 0===f&&void 0===m||Ju(e,t,d,f,r,m);return}}for(var b in n)f=n[b],n.hasOwnProperty(b)&&null!=f&&!r.hasOwnProperty(b)&&Zu(e,t,b,null,r,f);for(p in r)f=r[p],m=n[p],!r.hasOwnProperty(p)||f===m||null==f&&null==m||Zu(e,t,p,f,r,m)}(r,e.type,n,t),r[Oe]=t}catch(a){uu(e,e.return,a)}}function ms(e){return 5===e.tag||3===e.tag||26===e.tag||27===e.tag&&fd(e.type)||4===e.tag}function hs(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||ms(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;5!==e.tag&&6!==e.tag&&18!==e.tag;){if(27===e.tag&&fd(e.type))continue e;if(2&e.flags)continue e;if(null===e.child||4===e.tag)continue e;e.child.return=e,e=e.child}if(!(2&e.flags))return e.stateNode}}function gs(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?(9===n.nodeType?n.body:"HTML"===n.nodeName?n.ownerDocument.body:n).insertBefore(e,t):((t=9===n.nodeType?n.body:"HTML"===n.nodeName?n.ownerDocument.body:n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Xu));else if(4!==r&&(27===r&&fd(e.type)&&(n=e.stateNode,t=null),null!==(e=e.child)))for(gs(e,t,n),e=e.sibling;null!==e;)gs(e,t,n),e=e.sibling}function ys(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&(27===r&&fd(e.type)&&(n=e.stateNode),null!==(e=e.child)))for(ys(e,t,n),e=e.sibling;null!==e;)ys(e,t,n),e=e.sibling}function bs(e){var t=e.stateNode,n=e.memoizedProps;try{for(var r=e.type,a=t.attributes;a.length;)t.removeAttributeNode(a[0]);ed(t,r,n),t[Ne]=e,t[Oe]=n}catch(o){uu(e,e.return,o)}}var vs=!1,ws=!1,ks=!1,Ss="function"==typeof WeakSet?WeakSet:Set,xs=null;function Es(e,t,n){var r=n.flags;switch(n.tag){case 0:case 11:case 15:Fs(e,n),4&r&&is(5,n);break;case 1:if(Fs(e,n),4&r)if(e=n.stateNode,null===t)try{e.componentDidMount()}catch(i){uu(n,n.return,i)}else{var a=gl(n.type,t.memoizedProps);t=t.memoizedState;try{e.componentDidUpdate(a,t,e.__reactInternalSnapshotBeforeUpdate)}catch(l){uu(n,n.return,l)}}64&r&&ss(n),512&r&&us(n,n.return);break;case 3:if(Fs(e,n),64&r&&null!==(e=n.updateQueue)){if(t=null,null!==n.child)switch(n.child.tag){case 27:case 5:case 1:t=n.child.stateNode}try{fo(e,t)}catch(i){uu(n,n.return,i)}}break;case 27:null===t&&4&r&&bs(n);case 26:case 5:Fs(e,n),null===t&&4&r&&ps(n),512&r&&us(n,n.return);break;case 12:Fs(e,n);break;case 13:Fs(e,n),4&r&&js(e,n),64&r&&(null!==(e=n.memoizedState)&&(null!==(e=e.dehydrated)&&function(e,t){var n=e.ownerDocument;if("$?"!==e.data||"complete"===n.readyState)t();else{var r=function(){t(),n.removeEventListener("DOMContentLoaded",r)};n.addEventListener("DOMContentLoaded",r),e._reactRetry=r}}(e,n=mu.bind(null,n))));break;case 22:if(!(r=null!==n.memoizedState||vs)){t=null!==t&&null!==t.memoizedState||ws,a=vs;var o=ws;vs=r,(ws=t)&&!o?zs(e,n,!!(8772&n.subtreeFlags)):Fs(e,n),vs=a,ws=o}break;case 30:break;default:Fs(e,n)}}function As(e){var t=e.alternate;null!==t&&(e.alternate=null,As(t)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(t=e.stateNode)&&Be(t)),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}var _s=null,Cs=!1;function Ps(e,t,n){for(n=n.child;null!==n;)Ts(e,t,n),n=n.sibling}function Ts(e,t,n){if(de&&"function"==typeof de.onCommitFiberUnmount)try{de.onCommitFiberUnmount(ue,n)}catch(o){}switch(n.tag){case 26:ws||ds(n,t),Ps(e,t,n),n.memoizedState?n.memoizedState.count--:n.stateNode&&(n=n.stateNode).parentNode.removeChild(n);break;case 27:ws||ds(n,t);var r=_s,a=Cs;fd(n.type)&&(_s=n.stateNode,Cs=!1),Ps(e,t,n),kd(n.stateNode),_s=r,Cs=a;break;case 5:ws||ds(n,t);case 6:if(r=_s,a=Cs,_s=null,Ps(e,t,n),Cs=a,null!==(_s=r))if(Cs)try{(9===_s.nodeType?_s.body:"HTML"===_s.nodeName?_s.ownerDocument.body:_s).removeChild(n.stateNode)}catch(i){uu(n,t,i)}else try{_s.removeChild(n.stateNode)}catch(i){uu(n,t,i)}break;case 18:null!==_s&&(Cs?(md(9===(e=_s).nodeType?e.body:"HTML"===e.nodeName?e.ownerDocument.body:e,n.stateNode),Cp(e)):md(_s,n.stateNode));break;case 4:r=_s,a=Cs,_s=n.stateNode.containerInfo,Cs=!0,Ps(e,t,n),_s=r,Cs=a;break;case 0:case 11:case 14:case 15:ws||ls(2,n,t),ws||ls(4,n,t),Ps(e,t,n);break;case 1:ws||(ds(n,t),"function"==typeof(r=n.stateNode).componentWillUnmount&&cs(n,t,r)),Ps(e,t,n);break;case 21:Ps(e,t,n);break;case 22:ws=(r=ws)||null!==n.memoizedState,Ps(e,t,n),ws=r;break;default:Ps(e,t,n)}}function js(e,t){if(null===t.memoizedState&&(null!==(e=t.alternate)&&(null!==(e=e.memoizedState)&&null!==(e=e.dehydrated))))try{Cp(e)}catch(n){uu(t,t.return,n)}}function Ls(e,t){var n=function(e){switch(e.tag){case 13:case 19:var t=e.stateNode;return null===t&&(t=e.stateNode=new Ss),t;case 22:return null===(t=(e=e.stateNode)._retryCache)&&(t=e._retryCache=new Ss),t;default:throw Error(i(435,e.tag))}}(e);t.forEach((function(t){var r=hu.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}function Ns(e,t){var n=t.deletions;if(null!==n)for(var r=0;r<n.length;r++){var a=n[r],o=e,l=t,s=l;e:for(;null!==s;){switch(s.tag){case 27:if(fd(s.type)){_s=s.stateNode,Cs=!1;break e}break;case 5:_s=s.stateNode,Cs=!1;break e;case 3:case 4:_s=s.stateNode.containerInfo,Cs=!0;break e}s=s.return}if(null===_s)throw Error(i(160));Ts(o,l,a),_s=null,Cs=!1,null!==(o=a.alternate)&&(o.return=null),a.return=null}if(13878&t.subtreeFlags)for(t=t.child;null!==t;)Rs(t,e),t=t.sibling}var Os=null;function Rs(e,t){var n=e.alternate,r=e.flags;switch(e.tag){case 0:case 11:case 14:case 15:Ns(t,e),Is(e),4&r&&(ls(3,e,e.return),is(3,e),ls(5,e,e.return));break;case 1:Ns(t,e),Is(e),512&r&&(ws||null===n||ds(n,n.return)),64&r&&vs&&(null!==(e=e.updateQueue)&&(null!==(r=e.callbacks)&&(n=e.shared.hiddenCallbacks,e.shared.hiddenCallbacks=null===n?r:n.concat(r))));break;case 26:var a=Os;if(Ns(t,e),Is(e),512&r&&(ws||null===n||ds(n,n.return)),4&r){var o=null!==n?n.memoizedState:null;if(r=e.memoizedState,null===n)if(null===r)if(null===e.stateNode){e:{r=e.type,n=e.memoizedProps,a=a.ownerDocument||a;t:switch(r){case"title":(!(o=a.getElementsByTagName("title")[0])||o[ze]||o[Ne]||"http://www.w3.org/2000/svg"===o.namespaceURI||o.hasAttribute("itemprop"))&&(o=a.createElement(r),a.head.insertBefore(o,a.querySelector("head > title"))),ed(o,r,n),o[Ne]=e,Ge(o),r=o;break e;case"link":var l=zd("link","href",a).get(r+(n.href||""));if(l)for(var s=0;s<l.length;s++)if((o=l[s]).getAttribute("href")===(null==n.href||""===n.href?null:n.href)&&o.getAttribute("rel")===(null==n.rel?null:n.rel)&&o.getAttribute("title")===(null==n.title?null:n.title)&&o.getAttribute("crossorigin")===(null==n.crossOrigin?null:n.crossOrigin)){l.splice(s,1);break t}ed(o=a.createElement(r),r,n),a.head.appendChild(o);break;case"meta":if(l=zd("meta","content",a).get(r+(n.content||"")))for(s=0;s<l.length;s++)if((o=l[s]).getAttribute("content")===(null==n.content?null:""+n.content)&&o.getAttribute("name")===(null==n.name?null:n.name)&&o.getAttribute("property")===(null==n.property?null:n.property)&&o.getAttribute("http-equiv")===(null==n.httpEquiv?null:n.httpEquiv)&&o.getAttribute("charset")===(null==n.charSet?null:n.charSet)){l.splice(s,1);break t}ed(o=a.createElement(r),r,n),a.head.appendChild(o);break;default:throw Error(i(468,r))}o[Ne]=e,Ge(o),r=o}e.stateNode=r}else Bd(a,e.type,e.stateNode);else e.stateNode=Rd(a,r,e.memoizedProps);else o!==r?(null===o?null!==n.stateNode&&(n=n.stateNode).parentNode.removeChild(n):o.count--,null===r?Bd(a,e.type,e.stateNode):Rd(a,r,e.memoizedProps)):null===r&&null!==e.stateNode&&fs(e,e.memoizedProps,n.memoizedProps)}break;case 27:Ns(t,e),Is(e),512&r&&(ws||null===n||ds(n,n.return)),null!==n&&4&r&&fs(e,e.memoizedProps,n.memoizedProps);break;case 5:if(Ns(t,e),Is(e),512&r&&(ws||null===n||ds(n,n.return)),32&e.flags){a=e.stateNode;try{St(a,"")}catch(m){uu(e,e.return,m)}}4&r&&null!=e.stateNode&&fs(e,a=e.memoizedProps,null!==n?n.memoizedProps:a),1024&r&&(ks=!0);break;case 6:if(Ns(t,e),Is(e),4&r){if(null===e.stateNode)throw Error(i(162));r=e.memoizedProps,n=e.stateNode;try{n.nodeValue=r}catch(m){uu(e,e.return,m)}}break;case 3:if(Md=null,a=Os,Os=Ed(t.containerInfo),Ns(t,e),Os=a,Is(e),4&r&&null!==n&&n.memoizedState.isDehydrated)try{Cp(t.containerInfo)}catch(m){uu(e,e.return,m)}ks&&(ks=!1,Ds(e));break;case 4:r=Os,Os=Ed(e.stateNode.containerInfo),Ns(t,e),Is(e),Os=r;break;case 12:default:Ns(t,e),Is(e);break;case 13:Ns(t,e),Is(e),8192&e.child.flags&&null!==e.memoizedState!=(null!==n&&null!==n.memoizedState)&&(kc=te()),4&r&&(null!==(r=e.updateQueue)&&(e.updateQueue=null,Ls(e,r)));break;case 22:a=null!==e.memoizedState;var c=null!==n&&null!==n.memoizedState,u=vs,d=ws;if(vs=u||a,ws=d||c,Ns(t,e),ws=d,vs=u,Is(e),8192&r)e:for(t=e.stateNode,t._visibility=a?-2&t._visibility:1|t._visibility,a&&(null===n||c||vs||ws||Ms(e)),n=null,t=e;;){if(5===t.tag||26===t.tag){if(null===n){c=n=t;try{if(o=c.stateNode,a)"function"==typeof(l=o.style).setProperty?l.setProperty("display","none","important"):l.display="none";else{s=c.stateNode;var p=c.memoizedProps.style,f=null!=p&&p.hasOwnProperty("display")?p.display:null;s.style.display=null==f||"boolean"==typeof f?"":(""+f).trim()}}catch(m){uu(c,c.return,m)}}}else if(6===t.tag){if(null===n){c=t;try{c.stateNode.nodeValue=a?"":c.memoizedProps}catch(m){uu(c,c.return,m)}}}else if((22!==t.tag&&23!==t.tag||null===t.memoizedState||t===e)&&null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break e;for(;null===t.sibling;){if(null===t.return||t.return===e)break e;n===t&&(n=null),t=t.return}n===t&&(n=null),t.sibling.return=t.return,t=t.sibling}4&r&&(null!==(r=e.updateQueue)&&(null!==(n=r.retryQueue)&&(r.retryQueue=null,Ls(e,n))));break;case 19:Ns(t,e),Is(e),4&r&&(null!==(r=e.updateQueue)&&(e.updateQueue=null,Ls(e,r)));case 30:case 21:}}function Is(e){var t=e.flags;if(2&t){try{for(var n,r=e.return;null!==r;){if(ms(r)){n=r;break}r=r.return}if(null==n)throw Error(i(160));switch(n.tag){case 27:var a=n.stateNode;ys(e,hs(e),a);break;case 5:var o=n.stateNode;32&n.flags&&(St(o,""),n.flags&=-33),ys(e,hs(e),o);break;case 3:case 4:var l=n.stateNode.containerInfo;gs(e,hs(e),l);break;default:throw Error(i(161))}}catch(s){uu(e,e.return,s)}e.flags&=-3}4096&t&&(e.flags&=-4097)}function Ds(e){if(1024&e.subtreeFlags)for(e=e.child;null!==e;){var t=e;Ds(t),5===t.tag&&1024&t.flags&&t.stateNode.reset(),e=e.sibling}}function Fs(e,t){if(8772&t.subtreeFlags)for(t=t.child;null!==t;)Es(e,t.alternate,t),t=t.sibling}function Ms(e){for(e=e.child;null!==e;){var t=e;switch(t.tag){case 0:case 11:case 14:case 15:ls(4,t,t.return),Ms(t);break;case 1:ds(t,t.return);var n=t.stateNode;"function"==typeof n.componentWillUnmount&&cs(t,t.return,n),Ms(t);break;case 27:kd(t.stateNode);case 26:case 5:ds(t,t.return),Ms(t);break;case 22:null===t.memoizedState&&Ms(t);break;default:Ms(t)}e=e.sibling}}function zs(e,t,n){for(n=n&&!!(8772&t.subtreeFlags),t=t.child;null!==t;){var r=t.alternate,a=e,o=t,i=o.flags;switch(o.tag){case 0:case 11:case 15:zs(a,o,n),is(4,o);break;case 1:if(zs(a,o,n),"function"==typeof(a=(r=o).stateNode).componentDidMount)try{a.componentDidMount()}catch(c){uu(r,r.return,c)}if(null!==(a=(r=o).updateQueue)){var l=r.stateNode;try{var s=a.shared.hiddenCallbacks;if(null!==s)for(a.shared.hiddenCallbacks=null,a=0;a<s.length;a++)po(s[a],l)}catch(c){uu(r,r.return,c)}}n&&64&i&&ss(o),us(o,o.return);break;case 27:bs(o);case 26:case 5:zs(a,o,n),n&&null===r&&4&i&&ps(o),us(o,o.return);break;case 12:zs(a,o,n);break;case 13:zs(a,o,n),n&&4&i&&js(a,o);break;case 22:null===o.memoizedState&&zs(a,o,n),us(o,o.return);break;case 30:break;default:zs(a,o,n)}t=t.sibling}}function Bs(e,t){var n=null;null!==e&&null!==e.memoizedState&&null!==e.memoizedState.cachePool&&(n=e.memoizedState.cachePool.pool),e=null,null!==t.memoizedState&&null!==t.memoizedState.cachePool&&(e=t.memoizedState.cachePool.pool),e!==n&&(null!=e&&e.refCount++,null!=n&&Ra(n))}function $s(e,t){e=null,null!==t.alternate&&(e=t.alternate.memoizedState.cache),(t=t.memoizedState.cache)!==e&&(t.refCount++,null!=e&&Ra(e))}function Us(e,t,n,r){if(10256&t.subtreeFlags)for(t=t.child;null!==t;)Hs(e,t,n,r),t=t.sibling}function Hs(e,t,n,r){var a=t.flags;switch(t.tag){case 0:case 11:case 15:Us(e,t,n,r),2048&a&&is(9,t);break;case 1:case 13:default:Us(e,t,n,r);break;case 3:Us(e,t,n,r),2048&a&&(e=null,null!==t.alternate&&(e=t.alternate.memoizedState.cache),(t=t.memoizedState.cache)!==e&&(t.refCount++,null!=e&&Ra(e)));break;case 12:if(2048&a){Us(e,t,n,r),e=t.stateNode;try{var o=t.memoizedProps,i=o.id,l=o.onPostCommit;"function"==typeof l&&l(i,null===t.alternate?"mount":"update",e.passiveEffectDuration,-0)}catch(s){uu(t,t.return,s)}}else Us(e,t,n,r);break;case 23:break;case 22:o=t.stateNode,i=t.alternate,null!==t.memoizedState?2&o._visibility?Us(e,t,n,r):Gs(e,t):2&o._visibility?Us(e,t,n,r):(o._visibility|=2,qs(e,t,n,r,!!(10256&t.subtreeFlags))),2048&a&&Bs(i,t);break;case 24:Us(e,t,n,r),2048&a&&$s(t.alternate,t)}}function qs(e,t,n,r,a){for(a=a&&!!(10256&t.subtreeFlags),t=t.child;null!==t;){var o=e,i=t,l=n,s=r,c=i.flags;switch(i.tag){case 0:case 11:case 15:qs(o,i,l,s,a),is(8,i);break;case 23:break;case 22:var u=i.stateNode;null!==i.memoizedState?2&u._visibility?qs(o,i,l,s,a):Gs(o,i):(u._visibility|=2,qs(o,i,l,s,a)),a&&2048&c&&Bs(i.alternate,i);break;case 24:qs(o,i,l,s,a),a&&2048&c&&$s(i.alternate,i);break;default:qs(o,i,l,s,a)}t=t.sibling}}function Gs(e,t){if(10256&t.subtreeFlags)for(t=t.child;null!==t;){var n=e,r=t,a=r.flags;switch(r.tag){case 22:Gs(n,r),2048&a&&Bs(r.alternate,r);break;case 24:Gs(n,r),2048&a&&$s(r.alternate,r);break;default:Gs(n,r)}t=t.sibling}}var Vs=8192;function Ws(e){if(e.subtreeFlags&Vs)for(e=e.child;null!==e;)Ks(e),e=e.sibling}function Ks(e){switch(e.tag){case 26:Ws(e),e.flags&Vs&&null!==e.memoizedState&&function(e,t,n){if(null===Ud)throw Error(i(475));var r=Ud;if(!("stylesheet"!==t.type||"string"==typeof n.media&&!1===matchMedia(n.media).matches||4&t.state.loading)){if(null===t.instance){var a=Td(n.href),o=e.querySelector(jd(a));if(o)return null!==(e=o._p)&&"object"==typeof e&&"function"==typeof e.then&&(r.count++,r=qd.bind(r),e.then(r,r)),t.state.loading|=4,t.instance=o,void Ge(o);o=e.ownerDocument||e,n=Ld(n),(a=Sd.get(a))&&Dd(n,a),Ge(o=o.createElement("link"));var l=o;l._p=new Promise((function(e,t){l.onload=e,l.onerror=t})),ed(o,"link",n),t.instance=o}null===r.stylesheets&&(r.stylesheets=new Map),r.stylesheets.set(t,e),(e=t.state.preload)&&!(3&t.state.loading)&&(r.count++,t=qd.bind(r),e.addEventListener("load",t),e.addEventListener("error",t))}}(Os,e.memoizedState,e.memoizedProps);break;case 5:default:Ws(e);break;case 3:case 4:var t=Os;Os=Ed(e.stateNode.containerInfo),Ws(e),Os=t;break;case 22:null===e.memoizedState&&(null!==(t=e.alternate)&&null!==t.memoizedState?(t=Vs,Vs=16777216,Ws(e),Vs=t):Ws(e))}}function Qs(e){var t=e.alternate;if(null!==t&&null!==(e=t.child)){t.child=null;do{t=e.sibling,e.sibling=null,e=t}while(null!==e)}}function Ys(e){var t=e.deletions;if(16&e.flags){if(null!==t)for(var n=0;n<t.length;n++){var r=t[n];xs=r,Js(r,e)}Qs(e)}if(10256&e.subtreeFlags)for(e=e.child;null!==e;)Xs(e),e=e.sibling}function Xs(e){switch(e.tag){case 0:case 11:case 15:Ys(e),2048&e.flags&&ls(9,e,e.return);break;case 3:case 12:default:Ys(e);break;case 22:var t=e.stateNode;null!==e.memoizedState&&2&t._visibility&&(null===e.return||13!==e.return.tag)?(t._visibility&=-3,Zs(e)):Ys(e)}}function Zs(e){var t=e.deletions;if(16&e.flags){if(null!==t)for(var n=0;n<t.length;n++){var r=t[n];xs=r,Js(r,e)}Qs(e)}for(e=e.child;null!==e;){switch((t=e).tag){case 0:case 11:case 15:ls(8,t,t.return),Zs(t);break;case 22:2&(n=t.stateNode)._visibility&&(n._visibility&=-3,Zs(t));break;default:Zs(t)}e=e.sibling}}function Js(e,t){for(;null!==xs;){var n=xs;switch(n.tag){case 0:case 11:case 15:ls(8,n,t);break;case 23:case 22:if(null!==n.memoizedState&&null!==n.memoizedState.cachePool){var r=n.memoizedState.cachePool.pool;null!=r&&r.refCount++}break;case 24:Ra(n.memoizedState.cache)}if(null!==(r=n.child))r.return=n,xs=r;else e:for(n=e;null!==xs;){var a=(r=xs).sibling,o=r.return;if(As(r),r===n){xs=null;break e}if(null!==a){a.return=o,xs=a;break e}xs=o}}}var ec={getCacheForType:function(e){var t=_a(Na),n=t.data.get(e);return void 0===n&&(n=e(),t.data.set(e,n)),n}},tc="function"==typeof WeakMap?WeakMap:Map,nc=0,rc=null,ac=null,oc=0,ic=0,lc=null,sc=!1,cc=!1,uc=!1,dc=0,pc=0,fc=0,mc=0,hc=0,gc=0,yc=0,bc=null,vc=null,wc=!1,kc=0,Sc=1/0,xc=null,Ec=null,Ac=0,_c=null,Cc=null,Pc=0,Tc=0,jc=null,Lc=null,Nc=0,Oc=null;function Rc(){if(2&nc&&0!==oc)return oc&-oc;if(null!==R.T){return 0!==Fa?Fa:Tu()}return je()}function Ic(){0===gc&&(gc=536870912&oc&&!oa?536870912:Se());var e=al.current;return null!==e&&(e.flags|=32),gc}function Dc(e,t,n){(e!==rc||2!==ic&&9!==ic)&&null===e.cancelPendingCommit||(Hc(e,0),Bc(e,oc,gc,!1)),Ae(e,n),2&nc&&e===rc||(e===rc&&(!(2&nc)&&(mc|=n),4===pc&&Bc(e,oc,gc,!1)),Su(e))}function Fc(e,t,n){if(6&nc)throw Error(i(327));for(var r=!n&&!(124&t)&&0===(t&e.expiredLanes)||we(e,t),a=r?function(e,t){var n=nc;nc|=2;var r=Gc(),a=Vc();rc!==e||oc!==t?(xc=null,Sc=te()+500,Hc(e,t)):cc=we(e,t);e:for(;;)try{if(0!==ic&&null!==ac){t=ac;var o=lc;t:switch(ic){case 1:ic=0,lc=null,Jc(e,t,o,1);break;case 2:case 9:if(Qa(o)){ic=0,lc=null,Zc(t);break}t=function(){2!==ic&&9!==ic||rc!==e||(ic=7),Su(e)},o.then(t,t);break e;case 3:ic=7;break e;case 4:ic=5;break e;case 7:Qa(o)?(ic=0,lc=null,Zc(t)):(ic=0,lc=null,Jc(e,t,o,7));break;case 5:var l=null;switch(ac.tag){case 26:l=ac.memoizedState;case 5:case 27:var s=ac;if(!l||$d(l)){ic=0,lc=null;var c=s.sibling;if(null!==c)ac=c;else{var u=s.return;null!==u?(ac=u,eu(u)):ac=null}break t}}ic=0,lc=null,Jc(e,t,o,5);break;case 6:ic=0,lc=null,Jc(e,t,o,6);break;case 8:Uc(),pc=6;break e;default:throw Error(i(462))}}Yc();break}catch(d){qc(e,d)}return ba=ya=null,R.H=r,R.A=a,nc=n,null!==ac?0:(rc=null,oc=0,Pr(),pc)}(e,t):Kc(e,t,!0),o=r;;){if(0===a){cc&&!r&&Bc(e,t,0,!1);break}if(n=e.current.alternate,!o||zc(n)){if(2===a){if(o=t,e.errorRecoveryDisabledLanes&o)var l=0;else l=0!==(l=-536870913&e.pendingLanes)?l:536870912&l?536870912:0;if(0!==l){t=l;e:{var s=e;a=bc;var c=s.current.memoizedState.isDehydrated;if(c&&(Hc(s,l).flags|=256),2!==(l=Kc(s,l,!1))){if(uc&&!c){s.errorRecoveryDisabledLanes|=o,mc|=o,a=4;break e}o=vc,vc=a,null!==o&&(null===vc?vc=o:vc.push.apply(vc,o))}a=l}if(o=!1,2!==a)continue}}if(1===a){Hc(e,0),Bc(e,t,0,!0);break}e:{switch(r=e,o=a){case 0:case 1:throw Error(i(345));case 4:if((4194048&t)!==t)break;case 6:Bc(r,t,gc,!sc);break e;case 2:vc=null;break;case 3:case 5:break;default:throw Error(i(329))}if((62914560&t)===t&&10<(a=kc+300-te())){if(Bc(r,t,gc,!sc),0!==ve(r,0,!0))break e;r.timeoutHandle=sd(Mc.bind(null,r,n,vc,xc,wc,t,gc,mc,yc,sc,o,2,-0,0),a)}else Mc(r,n,vc,xc,wc,t,gc,mc,yc,sc,o,0,-0,0)}break}a=Kc(e,t,!1),o=!1}Su(e)}function Mc(e,t,n,r,a,o,l,s,c,u,d,p,f,m){if(e.timeoutHandle=-1,(8192&(p=t.subtreeFlags)||!(16785408&~p))&&(Ud={stylesheets:null,count:0,unsuspend:Hd},Ks(t),null!==(p=function(){if(null===Ud)throw Error(i(475));var e=Ud;return e.stylesheets&&0===e.count&&Vd(e,e.stylesheets),0<e.count?function(t){var n=setTimeout((function(){if(e.stylesheets&&Vd(e,e.stylesheets),e.unsuspend){var t=e.unsuspend;e.unsuspend=null,t()}}),6e4);return e.unsuspend=t,function(){e.unsuspend=null,clearTimeout(n)}}:null}())))return e.cancelPendingCommit=p(nu.bind(null,e,t,o,n,r,a,l,s,c,d,1,f,m)),void Bc(e,o,l,!u);nu(e,t,o,n,r,a,l,s,c)}function zc(e){for(var t=e;;){var n=t.tag;if((0===n||11===n||15===n)&&16384&t.flags&&(null!==(n=t.updateQueue)&&null!==(n=n.stores)))for(var r=0;r<n.length;r++){var a=n[r],o=a.getSnapshot;a=a.value;try{if(!Qn(o(),a))return!1}catch(i){return!1}}if(n=t.child,16384&t.subtreeFlags&&null!==n)n.return=t,t=n;else{if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return!0;t=t.return}t.sibling.return=t.return,t=t.sibling}}return!0}function Bc(e,t,n,r){t&=~hc,t&=~mc,e.suspendedLanes|=t,e.pingedLanes&=~t,r&&(e.warmLanes|=t),r=e.expirationTimes;for(var a=t;0<a;){var o=31-fe(a),i=1<<o;r[o]=-1,a&=~i}0!==n&&_e(e,n,t)}function $c(){return!!(6&nc)||(xu(0,!1),!1)}function Uc(){if(null!==ac){if(0===ic)var e=ac.return;else ba=ya=null,Mo(e=ac),Qi=null,Yi=0,e=ac;for(;null!==e;)os(e.alternate,e),e=e.return;ac=null}}function Hc(e,t){var n=e.timeoutHandle;-1!==n&&(e.timeoutHandle=-1,cd(n)),null!==(n=e.cancelPendingCommit)&&(e.cancelPendingCommit=null,n()),Uc(),rc=e,ac=n=Mr(e.current,null),oc=t,ic=0,lc=null,sc=!1,cc=we(e,t),uc=!1,yc=gc=hc=mc=fc=pc=0,vc=bc=null,wc=!1,8&t&&(t|=32&t);var r=e.entangledLanes;if(0!==r)for(e=e.entanglements,r&=t;0<r;){var a=31-fe(r),o=1<<a;t|=e[a],r&=~o}return dc=t,Pr(),n}function qc(e,t){wo=null,R.H=Gi,t===Ga||t===Wa?(t=Ja(),ic=3):t===Va?(t=Ja(),ic=4):ic=t===_l?8:null!==t&&"object"==typeof t&&"function"==typeof t.then?6:1,lc=t,null===ac&&(pc=1,kl(e,Er(t,e.current)))}function Gc(){var e=R.H;return R.H=Gi,null===e?Gi:e}function Vc(){var e=R.A;return R.A=ec,e}function Wc(){pc=4,sc||(4194048&oc)!==oc&&null!==al.current||(cc=!0),!(134217727&fc)&&!(134217727&mc)||null===rc||Bc(rc,oc,gc,!1)}function Kc(e,t,n){var r=nc;nc|=2;var a=Gc(),o=Vc();rc===e&&oc===t||(xc=null,Hc(e,t)),t=!1;var i=pc;e:for(;;)try{if(0!==ic&&null!==ac){var l=ac,s=lc;switch(ic){case 8:Uc(),i=6;break e;case 3:case 2:case 9:case 6:null===al.current&&(t=!0);var c=ic;if(ic=0,lc=null,Jc(e,l,s,c),n&&cc){i=0;break e}break;default:c=ic,ic=0,lc=null,Jc(e,l,s,c)}}Qc(),i=pc;break}catch(u){qc(e,u)}return t&&e.shellSuspendCounter++,ba=ya=null,nc=r,R.H=a,R.A=o,null===ac&&(rc=null,oc=0,Pr()),i}function Qc(){for(;null!==ac;)Xc(ac)}function Yc(){for(;null!==ac&&!J();)Xc(ac)}function Xc(e){var t=Xl(e.alternate,e,dc);e.memoizedProps=e.pendingProps,null===t?eu(e):ac=t}function Zc(e){var t=e,n=t.alternate;switch(t.tag){case 15:case 0:t=Dl(n,t,t.pendingProps,t.type,void 0,oc);break;case 11:t=Dl(n,t,t.pendingProps,t.type.render,t.ref,oc);break;case 5:Mo(t);default:os(n,t),t=Xl(n,t=ac=zr(t,dc),dc)}e.memoizedProps=e.pendingProps,null===t?eu(e):ac=t}function Jc(e,t,n,r){ba=ya=null,Mo(t),Qi=null,Yi=0;var a=t.return;try{if(function(e,t,n,r,a){if(n.flags|=32768,null!==r&&"object"==typeof r&&"function"==typeof r.then){if(null!==(t=n.alternate)&&xa(t,n,a,!0),null!==(n=al.current)){switch(n.tag){case 13:return null===ol?Wc():null===n.alternate&&0===pc&&(pc=3),n.flags&=-257,n.flags|=65536,n.lanes=a,r===Ka?n.flags|=16384:(null===(t=n.updateQueue)?n.updateQueue=new Set([r]):t.add(r),du(e,r,a)),!1;case 22:return n.flags|=65536,r===Ka?n.flags|=16384:(null===(t=n.updateQueue)?(t={transitions:null,markerInstances:null,retryQueue:new Set([r])},n.updateQueue=t):null===(n=t.retryQueue)?t.retryQueue=new Set([r]):n.add(r),du(e,r,a)),!1}throw Error(i(435,n.tag))}return du(e,r,a),Wc(),!1}if(oa)return null!==(t=al.current)?(!(65536&t.flags)&&(t.flags|=256),t.flags|=65536,t.lanes=a,r!==sa&&ha(Er(e=Error(i(422),{cause:r}),n))):(r!==sa&&ha(Er(t=Error(i(423),{cause:r}),n)),(e=e.current.alternate).flags|=65536,a&=-a,e.lanes|=a,r=Er(r,n),lo(e,a=xl(e.stateNode,r,a)),4!==pc&&(pc=2)),!1;var o=Error(i(520),{cause:r});if(o=Er(o,n),null===bc?bc=[o]:bc.push(o),4!==pc&&(pc=2),null===t)return!0;r=Er(r,n),n=t;do{switch(n.tag){case 3:return n.flags|=65536,e=a&-a,n.lanes|=e,lo(n,e=xl(n.stateNode,r,e)),!1;case 1:if(t=n.type,o=n.stateNode,!(128&n.flags||"function"!=typeof t.getDerivedStateFromError&&(null===o||"function"!=typeof o.componentDidCatch||null!==Ec&&Ec.has(o))))return n.flags|=65536,a&=-a,n.lanes|=a,Al(a=El(a),e,n,r),lo(n,a),!1}n=n.return}while(null!==n);return!1}(e,a,t,n,oc))return pc=1,kl(e,Er(n,e.current)),void(ac=null)}catch(o){if(null!==a)throw ac=a,o;return pc=1,kl(e,Er(n,e.current)),void(ac=null)}32768&t.flags?(oa||1===r?e=!0:cc||536870912&oc?e=!1:(sc=e=!0,(2===r||9===r||3===r||6===r)&&(null!==(r=al.current)&&13===r.tag&&(r.flags|=16384))),tu(t,e)):eu(t)}function eu(e){var t=e;do{if(32768&t.flags)return void tu(t,sc);e=t.return;var n=rs(t.alternate,t,dc);if(null!==n)return void(ac=n);if(null!==(t=t.sibling))return void(ac=t);ac=t=e}while(null!==t);0===pc&&(pc=5)}function tu(e,t){do{var n=as(e.alternate,e);if(null!==n)return n.flags&=32767,void(ac=n);if(null!==(n=e.return)&&(n.flags|=32768,n.subtreeFlags=0,n.deletions=null),!t&&null!==(e=e.sibling))return void(ac=e);ac=e=n}while(null!==e);pc=6,ac=null}function nu(e,t,n,r,a,o,l,s,c){e.cancelPendingCommit=null;do{lu()}while(0!==Ac);if(6&nc)throw Error(i(327));if(null!==t){if(t===e.current)throw Error(i(177));if(o=t.lanes|t.childLanes,function(e,t,n,r,a,o){var i=e.pendingLanes;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.warmLanes=0,e.expiredLanes&=n,e.entangledLanes&=n,e.errorRecoveryDisabledLanes&=n,e.shellSuspendCounter=0;var l=e.entanglements,s=e.expirationTimes,c=e.hiddenUpdates;for(n=i&~n;0<n;){var u=31-fe(n),d=1<<u;l[u]=0,s[u]=-1;var p=c[u];if(null!==p)for(c[u]=null,u=0;u<p.length;u++){var f=p[u];null!==f&&(f.lane&=-536870913)}n&=~d}0!==r&&_e(e,r,0),0!==o&&0===a&&0!==e.tag&&(e.suspendedLanes|=o&~(i&~t))}(e,n,o|=Cr,l,s,c),e===rc&&(ac=rc=null,oc=0),Cc=t,_c=e,Pc=n,Tc=o,jc=a,Lc=r,10256&t.subtreeFlags||10256&t.flags?(e.callbackNode=null,e.callbackPriority=0,X(oe,(function(){return su(),null}))):(e.callbackNode=null,e.callbackPriority=0),r=!!(13878&t.flags),13878&t.subtreeFlags||r){r=R.T,R.T=null,a=I.p,I.p=2,l=nc,nc|=4;try{!function(e,t){if(e=e.containerInfo,td=np,tr(e=er(e))){if("selectionStart"in e)var n={start:e.selectionStart,end:e.selectionEnd};else e:{var r=(n=(n=e.ownerDocument)&&n.defaultView||window).getSelection&&n.getSelection();if(r&&0!==r.rangeCount){n=r.anchorNode;var a=r.anchorOffset,o=r.focusNode;r=r.focusOffset;try{n.nodeType,o.nodeType}catch(g){n=null;break e}var l=0,s=-1,c=-1,u=0,d=0,p=e,f=null;t:for(;;){for(var m;p!==n||0!==a&&3!==p.nodeType||(s=l+a),p!==o||0!==r&&3!==p.nodeType||(c=l+r),3===p.nodeType&&(l+=p.nodeValue.length),null!==(m=p.firstChild);)f=p,p=m;for(;;){if(p===e)break t;if(f===n&&++u===a&&(s=l),f===o&&++d===r&&(c=l),null!==(m=p.nextSibling))break;f=(p=f).parentNode}p=m}n=-1===s||-1===c?null:{start:s,end:c}}else n=null}n=n||{start:0,end:0}}else n=null;for(nd={focusedElem:e,selectionRange:n},np=!1,xs=t;null!==xs;)if(e=(t=xs).child,1024&t.subtreeFlags&&null!==e)e.return=t,xs=e;else for(;null!==xs;){switch(o=(t=xs).alternate,e=t.flags,t.tag){case 0:case 11:case 15:case 5:case 26:case 27:case 6:case 4:case 17:break;case 1:if(1024&e&&null!==o){e=void 0,n=t,a=o.memoizedProps,o=o.memoizedState,r=n.stateNode;try{var h=gl(n.type,a,(n.elementType,n.type));e=r.getSnapshotBeforeUpdate(h,o),r.__reactInternalSnapshotBeforeUpdate=e}catch(y){uu(n,n.return,y)}}break;case 3:if(1024&e)if(9===(n=(e=t.stateNode.containerInfo).nodeType))hd(e);else if(1===n)switch(e.nodeName){case"HEAD":case"HTML":case"BODY":hd(e);break;default:e.textContent=""}break;default:if(1024&e)throw Error(i(163))}if(null!==(e=t.sibling)){e.return=t.return,xs=e;break}xs=t.return}}(e,t)}finally{nc=l,I.p=a,R.T=r}}Ac=1,ru(),au(),ou()}}function ru(){if(1===Ac){Ac=0;var e=_c,t=Cc,n=!!(13878&t.flags);if(13878&t.subtreeFlags||n){n=R.T,R.T=null;var r=I.p;I.p=2;var a=nc;nc|=4;try{Rs(t,e);var o=nd,i=er(e.containerInfo),l=o.focusedElem,s=o.selectionRange;if(i!==l&&l&&l.ownerDocument&&Jn(l.ownerDocument.documentElement,l)){if(null!==s&&tr(l)){var c=s.start,u=s.end;if(void 0===u&&(u=c),"selectionStart"in l)l.selectionStart=c,l.selectionEnd=Math.min(u,l.value.length);else{var d=l.ownerDocument||document,p=d&&d.defaultView||window;if(p.getSelection){var f=p.getSelection(),m=l.textContent.length,h=Math.min(s.start,m),g=void 0===s.end?h:Math.min(s.end,m);!f.extend&&h>g&&(i=g,g=h,h=i);var y=Zn(l,h),b=Zn(l,g);if(y&&b&&(1!==f.rangeCount||f.anchorNode!==y.node||f.anchorOffset!==y.offset||f.focusNode!==b.node||f.focusOffset!==b.offset)){var v=d.createRange();v.setStart(y.node,y.offset),f.removeAllRanges(),h>g?(f.addRange(v),f.extend(b.node,b.offset)):(v.setEnd(b.node,b.offset),f.addRange(v))}}}}for(d=[],f=l;f=f.parentNode;)1===f.nodeType&&d.push({element:f,left:f.scrollLeft,top:f.scrollTop});for("function"==typeof l.focus&&l.focus(),l=0;l<d.length;l++){var w=d[l];w.element.scrollLeft=w.left,w.element.scrollTop=w.top}}np=!!td,nd=td=null}finally{nc=a,I.p=r,R.T=n}}e.current=t,Ac=2}}function au(){if(2===Ac){Ac=0;var e=_c,t=Cc,n=!!(8772&t.flags);if(8772&t.subtreeFlags||n){n=R.T,R.T=null;var r=I.p;I.p=2;var a=nc;nc|=4;try{Es(e,t.alternate,t)}finally{nc=a,I.p=r,R.T=n}}Ac=3}}function ou(){if(4===Ac||3===Ac){Ac=0,ee();var e=_c,t=Cc,n=Pc,r=Lc;10256&t.subtreeFlags||10256&t.flags?Ac=5:(Ac=0,Cc=_c=null,iu(e,e.pendingLanes));var a=e.pendingLanes;if(0===a&&(Ec=null),Te(n),t=t.stateNode,de&&"function"==typeof de.onCommitFiberRoot)try{de.onCommitFiberRoot(ue,t,void 0,!(128&~t.current.flags))}catch(s){}if(null!==r){t=R.T,a=I.p,I.p=2,R.T=null;try{for(var o=e.onRecoverableError,i=0;i<r.length;i++){var l=r[i];o(l.value,{componentStack:l.stack})}}finally{R.T=t,I.p=a}}3&Pc&&lu(),Su(e),a=e.pendingLanes,4194090&n&&42&a?e===Oc?Nc++:(Nc=0,Oc=e):Nc=0,xu(0,!1)}}function iu(e,t){0===(e.pooledCacheLanes&=t)&&(null!=(t=e.pooledCache)&&(e.pooledCache=null,Ra(t)))}function lu(e){return ru(),au(),ou(),su()}function su(){if(5!==Ac)return!1;var e=_c,t=Tc;Tc=0;var n=Te(Pc),r=R.T,a=I.p;try{I.p=32>n?32:n,R.T=null,n=jc,jc=null;var o=_c,l=Pc;if(Ac=0,Cc=_c=null,Pc=0,6&nc)throw Error(i(331));var s=nc;if(nc|=4,Xs(o.current),Hs(o,o.current,l,n),nc=s,xu(0,!1),de&&"function"==typeof de.onPostCommitFiberRoot)try{de.onPostCommitFiberRoot(ue,o)}catch(c){}return!0}finally{I.p=a,R.T=r,iu(e,t)}}function cu(e,t,n){t=Er(n,t),null!==(e=oo(e,t=xl(e.stateNode,t,2),2))&&(Ae(e,2),Su(e))}function uu(e,t,n){if(3===e.tag)cu(e,e,n);else for(;null!==t;){if(3===t.tag){cu(t,e,n);break}if(1===t.tag){var r=t.stateNode;if("function"==typeof t.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===Ec||!Ec.has(r))){e=Er(n,e),null!==(r=oo(t,n=El(2),2))&&(Al(n,r,t,e),Ae(r,2),Su(r));break}}t=t.return}}function du(e,t,n){var r=e.pingCache;if(null===r){r=e.pingCache=new tc;var a=new Set;r.set(t,a)}else void 0===(a=r.get(t))&&(a=new Set,r.set(t,a));a.has(n)||(uc=!0,a.add(n),e=pu.bind(null,e,t,n),t.then(e,e))}function pu(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),e.pingedLanes|=e.suspendedLanes&n,e.warmLanes&=~n,rc===e&&(oc&n)===n&&(4===pc||3===pc&&(62914560&oc)===oc&&300>te()-kc?!(2&nc)&&Hc(e,0):hc|=n,yc===oc&&(yc=0)),Su(e)}function fu(e,t){0===t&&(t=xe()),null!==(e=Lr(e,t))&&(Ae(e,t),Su(e))}function mu(e){var t=e.memoizedState,n=0;null!==t&&(n=t.retryLane),fu(e,n)}function hu(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,a=e.memoizedState;null!==a&&(n=a.retryLane);break;case 19:r=e.stateNode;break;case 22:r=e.stateNode._retryCache;break;default:throw Error(i(314))}null!==r&&r.delete(t),fu(e,n)}var gu=null,yu=null,bu=!1,vu=!1,wu=!1,ku=0;function Su(e){e!==yu&&null===e.next&&(null===yu?gu=yu=e:yu=yu.next=e),vu=!0,bu||(bu=!0,dd((function(){6&nc?X(re,Eu):Au()})))}function xu(e,t){if(!wu&&vu){wu=!0;do{for(var n=!1,r=gu;null!==r;){if(!t)if(0!==e){var a=r.pendingLanes;if(0===a)var o=0;else{var i=r.suspendedLanes,l=r.pingedLanes;o=(1<<31-fe(42|e)+1)-1,o=201326741&(o&=a&~(i&~l))?201326741&o|1:o?2|o:0}0!==o&&(n=!0,Pu(r,o))}else o=oc,!(3&(o=ve(r,r===rc?o:0,null!==r.cancelPendingCommit||-1!==r.timeoutHandle)))||we(r,o)||(n=!0,Pu(r,o));r=r.next}}while(n);wu=!1}}function Eu(){Au()}function Au(){vu=bu=!1;var e=0;0!==ku&&(function(){var e=window.event;if(e&&"popstate"===e.type)return e!==ld&&(ld=e,!0);return ld=null,!1}()&&(e=ku),ku=0);for(var t=te(),n=null,r=gu;null!==r;){var a=r.next,o=_u(r,t);0===o?(r.next=null,null===n?gu=a:n.next=a,null===a&&(yu=n)):(n=r,(0!==e||3&o)&&(vu=!0)),r=a}xu(e,!1)}function _u(e,t){for(var n=e.suspendedLanes,r=e.pingedLanes,a=e.expirationTimes,o=-62914561&e.pendingLanes;0<o;){var i=31-fe(o),l=1<<i,s=a[i];-1===s?0!==(l&n)&&0===(l&r)||(a[i]=ke(l,t)):s<=t&&(e.expiredLanes|=l),o&=~l}if(n=oc,n=ve(e,e===(t=rc)?n:0,null!==e.cancelPendingCommit||-1!==e.timeoutHandle),r=e.callbackNode,0===n||e===t&&(2===ic||9===ic)||null!==e.cancelPendingCommit)return null!==r&&null!==r&&Z(r),e.callbackNode=null,e.callbackPriority=0;if(!(3&n)||we(e,n)){if((t=n&-n)===e.callbackPriority)return t;switch(null!==r&&Z(r),Te(n)){case 2:case 8:n=ae;break;case 32:default:n=oe;break;case 268435456:n=le}return r=Cu.bind(null,e),n=X(n,r),e.callbackPriority=t,e.callbackNode=n,t}return null!==r&&null!==r&&Z(r),e.callbackPriority=2,e.callbackNode=null,2}function Cu(e,t){if(0!==Ac&&5!==Ac)return e.callbackNode=null,e.callbackPriority=0,null;var n=e.callbackNode;if(lu()&&e.callbackNode!==n)return null;var r=oc;return 0===(r=ve(e,e===rc?r:0,null!==e.cancelPendingCommit||-1!==e.timeoutHandle))?null:(Fc(e,r,t),_u(e,te()),null!=e.callbackNode&&e.callbackNode===n?Cu.bind(null,e):null)}function Pu(e,t){if(lu())return null;Fc(e,t,!0)}function Tu(){return 0===ku&&(ku=Se()),ku}function ju(e){return null==e||"symbol"==typeof e||"boolean"==typeof e?null:"function"==typeof e?e:Tt(""+e)}function Lu(e,t){var n=t.ownerDocument.createElement("input");return n.name=t.name,n.value=t.value,e.id&&n.setAttribute("form",e.id),t.parentNode.insertBefore(n,t),e=new FormData(e),n.parentNode.removeChild(n),e}for(var Nu=0;Nu<kr.length;Nu++){var Ou=kr[Nu];Sr(Ou.toLowerCase(),"on"+(Ou[0].toUpperCase()+Ou.slice(1)))}Sr(fr,"onAnimationEnd"),Sr(mr,"onAnimationIteration"),Sr(hr,"onAnimationStart"),Sr("dblclick","onDoubleClick"),Sr("focusin","onFocus"),Sr("focusout","onBlur"),Sr(gr,"onTransitionRun"),Sr(yr,"onTransitionStart"),Sr(br,"onTransitionCancel"),Sr(vr,"onTransitionEnd"),Qe("onMouseEnter",["mouseout","mouseover"]),Qe("onMouseLeave",["mouseout","mouseover"]),Qe("onPointerEnter",["pointerout","pointerover"]),Qe("onPointerLeave",["pointerout","pointerover"]),Ke("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),Ke("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),Ke("onBeforeInput",["compositionend","keypress","textInput","paste"]),Ke("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),Ke("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),Ke("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Ru="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Iu=new Set("beforetoggle cancel close invalid load scroll scrollend toggle".split(" ").concat(Ru));function Du(e,t){t=!!(4&t);for(var n=0;n<e.length;n++){var r=e[n],a=r.event;r=r.listeners;e:{var o=void 0;if(t)for(var i=r.length-1;0<=i;i--){var l=r[i],s=l.instance,c=l.currentTarget;if(l=l.listener,s!==o&&a.isPropagationStopped())break e;o=l,a.currentTarget=c;try{o(a)}catch(u){yl(u)}a.currentTarget=null,o=s}else for(i=0;i<r.length;i++){if(s=(l=r[i]).instance,c=l.currentTarget,l=l.listener,s!==o&&a.isPropagationStopped())break e;o=l,a.currentTarget=c;try{o(a)}catch(u){yl(u)}a.currentTarget=null,o=s}}}}function Fu(e,t){var n=t[Ie];void 0===n&&(n=t[Ie]=new Set);var r=e+"__bubble";n.has(r)||($u(t,e,2,!1),n.add(r))}function Mu(e,t,n){var r=0;t&&(r|=4),$u(n,e,r,t)}var zu="_reactListening"+Math.random().toString(36).slice(2);function Bu(e){if(!e[zu]){e[zu]=!0,Ve.forEach((function(t){"selectionchange"!==t&&(Iu.has(t)||Mu(t,!1,e),Mu(t,!0,e))}));var t=9===e.nodeType?e:e.ownerDocument;null===t||t[zu]||(t[zu]=!0,Mu("selectionchange",!1,t))}}function $u(e,t,n,r){switch(cp(t)){case 2:var a=rp;break;case 8:a=ap;break;default:a=op}n=a.bind(null,t,n,e),a=void 0,!zt||"touchstart"!==t&&"touchmove"!==t&&"wheel"!==t||(a=!0),r?void 0!==a?e.addEventListener(t,n,{capture:!0,passive:a}):e.addEventListener(t,n,!0):void 0!==a?e.addEventListener(t,n,{passive:a}):e.addEventListener(t,n,!1)}function Uu(e,t,n,r,a){var o=r;if(!(1&t||2&t||null===r))e:for(;;){if(null===r)return;var i=r.tag;if(3===i||4===i){var l=r.stateNode.containerInfo;if(l===a)break;if(4===i)for(i=r.return;null!==i;){var c=i.tag;if((3===c||4===c)&&i.stateNode.containerInfo===a)return;i=i.return}for(;null!==l;){if(null===(i=$e(l)))return;if(5===(c=i.tag)||6===c||26===c||27===c){r=o=i;continue e}l=l.parentNode}}r=r.return}Dt((function(){var r=o,a=Lt(n),i=[];e:{var l=wr.get(e);if(void 0!==l){var c=Jt,u=e;switch(e){case"keypress":if(0===Gt(n))break e;case"keydown":case"keyup":c=hn;break;case"focusin":u="focus",c=on;break;case"focusout":u="blur",c=on;break;case"beforeblur":case"afterblur":c=on;break;case"click":if(2===n.button)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":c=rn;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":c=an;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":c=yn;break;case fr:case mr:case hr:c=ln;break;case vr:c=bn;break;case"scroll":case"scrollend":c=tn;break;case"wheel":c=vn;break;case"copy":case"cut":case"paste":c=sn;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":c=gn;break;case"toggle":case"beforetoggle":c=wn}var d=!!(4&t),p=!d&&("scroll"===e||"scrollend"===e),f=d?null!==l?l+"Capture":null:l;d=[];for(var m,h=r;null!==h;){var g=h;if(m=g.stateNode,5!==(g=g.tag)&&26!==g&&27!==g||null===m||null===f||null!=(g=Ft(h,f))&&d.push(Hu(h,g,m)),p)break;h=h.return}0<d.length&&(l=new c(l,u,null,n,a),i.push({event:l,listeners:d}))}}if(!(7&t)){if(c="mouseout"===e||"pointerout"===e,(!(l="mouseover"===e||"pointerover"===e)||n===jt||!(u=n.relatedTarget||n.fromElement)||!$e(u)&&!u[Re])&&(c||l)&&(l=a.window===a?a:(l=a.ownerDocument)?l.defaultView||l.parentWindow:window,c?(c=r,null!==(u=(u=n.relatedTarget||n.toElement)?$e(u):null)&&(p=s(u),d=u.tag,u!==p||5!==d&&27!==d&&6!==d)&&(u=null)):(c=null,u=r),c!==u)){if(d=rn,g="onMouseLeave",f="onMouseEnter",h="mouse","pointerout"!==e&&"pointerover"!==e||(d=gn,g="onPointerLeave",f="onPointerEnter",h="pointer"),p=null==c?l:He(c),m=null==u?l:He(u),(l=new d(g,h+"leave",c,n,a)).target=p,l.relatedTarget=m,g=null,$e(a)===r&&((d=new d(f,h+"enter",u,n,a)).target=m,d.relatedTarget=p,g=d),p=g,c&&u)e:{for(f=u,h=0,m=d=c;m;m=Gu(m))h++;for(m=0,g=f;g;g=Gu(g))m++;for(;0<h-m;)d=Gu(d),h--;for(;0<m-h;)f=Gu(f),m--;for(;h--;){if(d===f||null!==f&&d===f.alternate)break e;d=Gu(d),f=Gu(f)}d=null}else d=null;null!==c&&Vu(i,l,c,d,!1),null!==u&&null!==p&&Vu(i,p,u,d,!0)}if("select"===(c=(l=r?He(r):window).nodeName&&l.nodeName.toLowerCase())||"input"===c&&"file"===l.type)var y=Mn;else if(Nn(l))if(zn)y=Kn;else{y=Vn;var b=Gn}else!(c=l.nodeName)||"input"!==c.toLowerCase()||"checkbox"!==l.type&&"radio"!==l.type?r&&_t(r.elementType)&&(y=Mn):y=Wn;switch(y&&(y=y(e,r))?On(i,y,n,a):(b&&b(e,l,r),"focusout"===e&&r&&"number"===l.type&&null!=r.memoizedProps.value&&bt(l,"number",l.value)),b=r?He(r):window,e){case"focusin":(Nn(b)||"true"===b.contentEditable)&&(rr=b,ar=r,or=null);break;case"focusout":or=ar=rr=null;break;case"mousedown":ir=!0;break;case"contextmenu":case"mouseup":case"dragend":ir=!1,lr(i,n,a);break;case"selectionchange":if(nr)break;case"keydown":case"keyup":lr(i,n,a)}var v;if(Sn)e:{switch(e){case"compositionstart":var w="onCompositionStart";break e;case"compositionend":w="onCompositionEnd";break e;case"compositionupdate":w="onCompositionUpdate";break e}w=void 0}else jn?Pn(e,n)&&(w="onCompositionEnd"):"keydown"===e&&229===n.keyCode&&(w="onCompositionStart");w&&(An&&"ko"!==n.locale&&(jn||"onCompositionStart"!==w?"onCompositionEnd"===w&&jn&&(v=qt()):(Ut="value"in($t=a)?$t.value:$t.textContent,jn=!0)),0<(b=qu(r,w)).length&&(w=new cn(w,e,null,n,a),i.push({event:w,listeners:b}),v?w.data=v:null!==(v=Tn(n))&&(w.data=v))),(v=En?function(e,t){switch(e){case"compositionend":return Tn(t);case"keypress":return 32!==t.which?null:(Cn=!0,_n);case"textInput":return(e=t.data)===_n&&Cn?null:e;default:return null}}(e,n):function(e,t){if(jn)return"compositionend"===e||!Sn&&Pn(e,t)?(e=qt(),Ht=Ut=$t=null,jn=!1,e):null;switch(e){case"paste":default:return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"compositionend":return An&&"ko"!==t.locale?null:t.data}}(e,n))&&(0<(w=qu(r,"onBeforeInput")).length&&(b=new cn("onBeforeInput","beforeinput",null,n,a),i.push({event:b,listeners:w}),b.data=v)),function(e,t,n,r,a){if("submit"===t&&n&&n.stateNode===a){var o=ju((a[Oe]||null).action),i=r.submitter;i&&null!==(t=(t=i[Oe]||null)?ju(t.formAction):i.getAttribute("formAction"))&&(o=t,i=null);var l=new Jt("action","action",null,r,a);e.push({event:l,listeners:[{instance:null,listener:function(){if(r.defaultPrevented){if(0!==ku){var e=i?Lu(a,i):new FormData(a);Li(n,{pending:!0,data:e,method:a.method,action:o},null,e)}}else"function"==typeof o&&(l.preventDefault(),e=i?Lu(a,i):new FormData(a),Li(n,{pending:!0,data:e,method:a.method,action:o},o,e))},currentTarget:a}]})}}(i,e,r,n,a)}Du(i,t)}))}function Hu(e,t,n){return{instance:e,listener:t,currentTarget:n}}function qu(e,t){for(var n=t+"Capture",r=[];null!==e;){var a=e,o=a.stateNode;if(5!==(a=a.tag)&&26!==a&&27!==a||null===o||(null!=(a=Ft(e,n))&&r.unshift(Hu(e,a,o)),null!=(a=Ft(e,t))&&r.push(Hu(e,a,o))),3===e.tag)return r;e=e.return}return[]}function Gu(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag&&27!==e.tag);return e||null}function Vu(e,t,n,r,a){for(var o=t._reactName,i=[];null!==n&&n!==r;){var l=n,s=l.alternate,c=l.stateNode;if(l=l.tag,null!==s&&s===r)break;5!==l&&26!==l&&27!==l||null===c||(s=c,a?null!=(c=Ft(n,o))&&i.unshift(Hu(n,c,s)):a||null!=(c=Ft(n,o))&&i.push(Hu(n,c,s))),n=n.return}0!==i.length&&e.push({event:t,listeners:i})}var Wu=/\r\n?/g,Ku=/\u0000|\uFFFD/g;function Qu(e){return("string"==typeof e?e:""+e).replace(Wu,"\n").replace(Ku,"")}function Yu(e,t){return t=Qu(t),Qu(e)===t}function Xu(){}function Zu(e,t,n,r,a,o){switch(n){case"children":"string"==typeof r?"body"===t||"textarea"===t&&""===r||St(e,r):("number"==typeof r||"bigint"==typeof r)&&"body"!==t&&St(e,""+r);break;case"className":nt(e,"class",r);break;case"tabIndex":nt(e,"tabindex",r);break;case"dir":case"role":case"viewBox":case"width":case"height":nt(e,n,r);break;case"style":At(e,r,o);break;case"data":if("object"!==t){nt(e,"data",r);break}case"src":case"href":if(""===r&&("a"!==t||"href"!==n)){e.removeAttribute(n);break}if(null==r||"function"==typeof r||"symbol"==typeof r||"boolean"==typeof r){e.removeAttribute(n);break}r=Tt(""+r),e.setAttribute(n,r);break;case"action":case"formAction":if("function"==typeof r){e.setAttribute(n,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}if("function"==typeof o&&("formAction"===n?("input"!==t&&Zu(e,t,"name",a.name,a,null),Zu(e,t,"formEncType",a.formEncType,a,null),Zu(e,t,"formMethod",a.formMethod,a,null),Zu(e,t,"formTarget",a.formTarget,a,null)):(Zu(e,t,"encType",a.encType,a,null),Zu(e,t,"method",a.method,a,null),Zu(e,t,"target",a.target,a,null))),null==r||"symbol"==typeof r||"boolean"==typeof r){e.removeAttribute(n);break}r=Tt(""+r),e.setAttribute(n,r);break;case"onClick":null!=r&&(e.onclick=Xu);break;case"onScroll":null!=r&&Fu("scroll",e);break;case"onScrollEnd":null!=r&&Fu("scrollend",e);break;case"dangerouslySetInnerHTML":if(null!=r){if("object"!=typeof r||!("__html"in r))throw Error(i(61));if(null!=(n=r.__html)){if(null!=a.children)throw Error(i(60));e.innerHTML=n}}break;case"multiple":e.multiple=r&&"function"!=typeof r&&"symbol"!=typeof r;break;case"muted":e.muted=r&&"function"!=typeof r&&"symbol"!=typeof r;break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":case"autoFocus":break;case"xlinkHref":if(null==r||"function"==typeof r||"boolean"==typeof r||"symbol"==typeof r){e.removeAttribute("xlink:href");break}n=Tt(""+r),e.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",n);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":null!=r&&"function"!=typeof r&&"symbol"!=typeof r?e.setAttribute(n,""+r):e.removeAttribute(n);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":r&&"function"!=typeof r&&"symbol"!=typeof r?e.setAttribute(n,""):e.removeAttribute(n);break;case"capture":case"download":!0===r?e.setAttribute(n,""):!1!==r&&null!=r&&"function"!=typeof r&&"symbol"!=typeof r?e.setAttribute(n,r):e.removeAttribute(n);break;case"cols":case"rows":case"size":case"span":null!=r&&"function"!=typeof r&&"symbol"!=typeof r&&!isNaN(r)&&1<=r?e.setAttribute(n,r):e.removeAttribute(n);break;case"rowSpan":case"start":null==r||"function"==typeof r||"symbol"==typeof r||isNaN(r)?e.removeAttribute(n):e.setAttribute(n,r);break;case"popover":Fu("beforetoggle",e),Fu("toggle",e),tt(e,"popover",r);break;case"xlinkActuate":rt(e,"http://www.w3.org/1999/xlink","xlink:actuate",r);break;case"xlinkArcrole":rt(e,"http://www.w3.org/1999/xlink","xlink:arcrole",r);break;case"xlinkRole":rt(e,"http://www.w3.org/1999/xlink","xlink:role",r);break;case"xlinkShow":rt(e,"http://www.w3.org/1999/xlink","xlink:show",r);break;case"xlinkTitle":rt(e,"http://www.w3.org/1999/xlink","xlink:title",r);break;case"xlinkType":rt(e,"http://www.w3.org/1999/xlink","xlink:type",r);break;case"xmlBase":rt(e,"http://www.w3.org/XML/1998/namespace","xml:base",r);break;case"xmlLang":rt(e,"http://www.w3.org/XML/1998/namespace","xml:lang",r);break;case"xmlSpace":rt(e,"http://www.w3.org/XML/1998/namespace","xml:space",r);break;case"is":tt(e,"is",r);break;case"innerText":case"textContent":break;default:(!(2<n.length)||"o"!==n[0]&&"O"!==n[0]||"n"!==n[1]&&"N"!==n[1])&&tt(e,n=Ct.get(n)||n,r)}}function Ju(e,t,n,r,a,o){switch(n){case"style":At(e,r,o);break;case"dangerouslySetInnerHTML":if(null!=r){if("object"!=typeof r||!("__html"in r))throw Error(i(61));if(null!=(n=r.__html)){if(null!=a.children)throw Error(i(60));e.innerHTML=n}}break;case"children":"string"==typeof r?St(e,r):("number"==typeof r||"bigint"==typeof r)&&St(e,""+r);break;case"onScroll":null!=r&&Fu("scroll",e);break;case"onScrollEnd":null!=r&&Fu("scrollend",e);break;case"onClick":null!=r&&(e.onclick=Xu);break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"innerHTML":case"ref":case"innerText":case"textContent":break;default:We.hasOwnProperty(n)||("o"!==n[0]||"n"!==n[1]||(a=n.endsWith("Capture"),t=n.slice(2,a?n.length-7:void 0),"function"==typeof(o=null!=(o=e[Oe]||null)?o[n]:null)&&e.removeEventListener(t,o,a),"function"!=typeof r)?n in e?e[n]=r:!0===r?e.setAttribute(n,""):tt(e,n,r):("function"!=typeof o&&null!==o&&(n in e?e[n]=null:e.hasAttribute(n)&&e.removeAttribute(n)),e.addEventListener(t,r,a)))}}function ed(e,t,n){switch(t){case"div":case"span":case"svg":case"path":case"a":case"g":case"p":case"li":break;case"img":Fu("error",e),Fu("load",e);var r,a=!1,o=!1;for(r in n)if(n.hasOwnProperty(r)){var l=n[r];if(null!=l)switch(r){case"src":a=!0;break;case"srcSet":o=!0;break;case"children":case"dangerouslySetInnerHTML":throw Error(i(137,t));default:Zu(e,t,r,l,n,null)}}return o&&Zu(e,t,"srcSet",n.srcSet,n,null),void(a&&Zu(e,t,"src",n.src,n,null));case"input":Fu("invalid",e);var s=r=l=o=null,c=null,u=null;for(a in n)if(n.hasOwnProperty(a)){var d=n[a];if(null!=d)switch(a){case"name":o=d;break;case"type":l=d;break;case"checked":c=d;break;case"defaultChecked":u=d;break;case"value":r=d;break;case"defaultValue":s=d;break;case"children":case"dangerouslySetInnerHTML":if(null!=d)throw Error(i(137,t));break;default:Zu(e,t,a,d,n,null)}}return yt(e,r,s,c,u,l,o,!1),void dt(e);case"select":for(o in Fu("invalid",e),a=l=r=null,n)if(n.hasOwnProperty(o)&&null!=(s=n[o]))switch(o){case"value":r=s;break;case"defaultValue":l=s;break;case"multiple":a=s;default:Zu(e,t,o,s,n,null)}return t=r,n=l,e.multiple=!!a,void(null!=t?vt(e,!!a,t,!1):null!=n&&vt(e,!!a,n,!0));case"textarea":for(l in Fu("invalid",e),r=o=a=null,n)if(n.hasOwnProperty(l)&&null!=(s=n[l]))switch(l){case"value":a=s;break;case"defaultValue":o=s;break;case"children":r=s;break;case"dangerouslySetInnerHTML":if(null!=s)throw Error(i(91));break;default:Zu(e,t,l,s,n,null)}return kt(e,a,o,r),void dt(e);case"option":for(c in n)if(n.hasOwnProperty(c)&&null!=(a=n[c]))if("selected"===c)e.selected=a&&"function"!=typeof a&&"symbol"!=typeof a;else Zu(e,t,c,a,n,null);return;case"dialog":Fu("beforetoggle",e),Fu("toggle",e),Fu("cancel",e),Fu("close",e);break;case"iframe":case"object":Fu("load",e);break;case"video":case"audio":for(a=0;a<Ru.length;a++)Fu(Ru[a],e);break;case"image":Fu("error",e),Fu("load",e);break;case"details":Fu("toggle",e);break;case"embed":case"source":case"link":Fu("error",e),Fu("load",e);case"area":case"base":case"br":case"col":case"hr":case"keygen":case"meta":case"param":case"track":case"wbr":case"menuitem":for(u in n)if(n.hasOwnProperty(u)&&null!=(a=n[u]))switch(u){case"children":case"dangerouslySetInnerHTML":throw Error(i(137,t));default:Zu(e,t,u,a,n,null)}return;default:if(_t(t)){for(d in n)n.hasOwnProperty(d)&&(void 0!==(a=n[d])&&Ju(e,t,d,a,n,void 0));return}}for(s in n)n.hasOwnProperty(s)&&(null!=(a=n[s])&&Zu(e,t,s,a,n,null))}var td=null,nd=null;function rd(e){return 9===e.nodeType?e:e.ownerDocument}function ad(e){switch(e){case"http://www.w3.org/2000/svg":return 1;case"http://www.w3.org/1998/Math/MathML":return 2;default:return 0}}function od(e,t){if(0===e)switch(t){case"svg":return 1;case"math":return 2;default:return 0}return 1===e&&"foreignObject"===t?0:e}function id(e,t){return"textarea"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"bigint"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var ld=null;var sd="function"==typeof setTimeout?setTimeout:void 0,cd="function"==typeof clearTimeout?clearTimeout:void 0,ud="function"==typeof Promise?Promise:void 0,dd="function"==typeof queueMicrotask?queueMicrotask:void 0!==ud?function(e){return ud.resolve(null).then(e).catch(pd)}:sd;function pd(e){setTimeout((function(){throw e}))}function fd(e){return"head"===e}function md(e,t){var n=t,r=0,a=0;do{var o=n.nextSibling;if(e.removeChild(n),o&&8===o.nodeType)if("/$"===(n=o.data)){if(0<r&&8>r){n=r;var i=e.ownerDocument;if(1&n&&kd(i.documentElement),2&n&&kd(i.body),4&n)for(kd(n=i.head),i=n.firstChild;i;){var l=i.nextSibling,s=i.nodeName;i[ze]||"SCRIPT"===s||"STYLE"===s||"LINK"===s&&"stylesheet"===i.rel.toLowerCase()||n.removeChild(i),i=l}}if(0===a)return e.removeChild(o),void Cp(t);a--}else"$"===n||"$?"===n||"$!"===n?a++:r=n.charCodeAt(0)-48;else r=0;n=o}while(n);Cp(t)}function hd(e){var t=e.firstChild;for(t&&10===t.nodeType&&(t=t.nextSibling);t;){var n=t;switch(t=t.nextSibling,n.nodeName){case"HTML":case"HEAD":case"BODY":hd(n),Be(n);continue;case"SCRIPT":case"STYLE":continue;case"LINK":if("stylesheet"===n.rel.toLowerCase())continue}e.removeChild(n)}}function gd(e){return"$!"===e.data||"$?"===e.data&&"complete"===e.ownerDocument.readyState}function yd(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break;if(8===t){if("$"===(t=e.data)||"$!"===t||"$?"===t||"F!"===t||"F"===t)break;if("/$"===t)return null}}return e}var bd=null;function vd(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if("$"===n||"$!"===n||"$?"===n){if(0===t)return e;t--}else"/$"===n&&t++}e=e.previousSibling}return null}function wd(e,t,n){switch(t=rd(n),e){case"html":if(!(e=t.documentElement))throw Error(i(452));return e;case"head":if(!(e=t.head))throw Error(i(453));return e;case"body":if(!(e=t.body))throw Error(i(454));return e;default:throw Error(i(451))}}function kd(e){for(var t=e.attributes;t.length;)e.removeAttributeNode(t[0]);Be(e)}var Sd=new Map,xd=new Set;function Ed(e){return"function"==typeof e.getRootNode?e.getRootNode():9===e.nodeType?e:e.ownerDocument}var Ad=I.d;I.d={f:function(){var e=Ad.f(),t=$c();return e||t},r:function(e){var t=Ue(e);null!==t&&5===t.tag&&"form"===t.type?Oi(t):Ad.r(e)},D:function(e){Ad.D(e),Cd("dns-prefetch",e,null)},C:function(e,t){Ad.C(e,t),Cd("preconnect",e,t)},L:function(e,t,n){Ad.L(e,t,n);var r=_d;if(r&&e&&t){var a='link[rel="preload"][as="'+ht(t)+'"]';"image"===t&&n&&n.imageSrcSet?(a+='[imagesrcset="'+ht(n.imageSrcSet)+'"]',"string"==typeof n.imageSizes&&(a+='[imagesizes="'+ht(n.imageSizes)+'"]')):a+='[href="'+ht(e)+'"]';var o=a;switch(t){case"style":o=Td(e);break;case"script":o=Nd(e)}Sd.has(o)||(e=p({rel:"preload",href:"image"===t&&n&&n.imageSrcSet?void 0:e,as:t},n),Sd.set(o,e),null!==r.querySelector(a)||"style"===t&&r.querySelector(jd(o))||"script"===t&&r.querySelector(Od(o))||(ed(t=r.createElement("link"),"link",e),Ge(t),r.head.appendChild(t)))}},m:function(e,t){Ad.m(e,t);var n=_d;if(n&&e){var r=t&&"string"==typeof t.as?t.as:"script",a='link[rel="modulepreload"][as="'+ht(r)+'"][href="'+ht(e)+'"]',o=a;switch(r){case"audioworklet":case"paintworklet":case"serviceworker":case"sharedworker":case"worker":case"script":o=Nd(e)}if(!Sd.has(o)&&(e=p({rel:"modulepreload",href:e},t),Sd.set(o,e),null===n.querySelector(a))){switch(r){case"audioworklet":case"paintworklet":case"serviceworker":case"sharedworker":case"worker":case"script":if(n.querySelector(Od(o)))return}ed(r=n.createElement("link"),"link",e),Ge(r),n.head.appendChild(r)}}},X:function(e,t){Ad.X(e,t);var n=_d;if(n&&e){var r=qe(n).hoistableScripts,a=Nd(e),o=r.get(a);o||((o=n.querySelector(Od(a)))||(e=p({src:e,async:!0},t),(t=Sd.get(a))&&Fd(e,t),Ge(o=n.createElement("script")),ed(o,"link",e),n.head.appendChild(o)),o={type:"script",instance:o,count:1,state:null},r.set(a,o))}},S:function(e,t,n){Ad.S(e,t,n);var r=_d;if(r&&e){var a=qe(r).hoistableStyles,o=Td(e);t=t||"default";var i=a.get(o);if(!i){var l={loading:0,preload:null};if(i=r.querySelector(jd(o)))l.loading=5;else{e=p({rel:"stylesheet",href:e,"data-precedence":t},n),(n=Sd.get(o))&&Dd(e,n);var s=i=r.createElement("link");Ge(s),ed(s,"link",e),s._p=new Promise((function(e,t){s.onload=e,s.onerror=t})),s.addEventListener("load",(function(){l.loading|=1})),s.addEventListener("error",(function(){l.loading|=2})),l.loading|=4,Id(i,t,r)}i={type:"stylesheet",instance:i,count:1,state:l},a.set(o,i)}}},M:function(e,t){Ad.M(e,t);var n=_d;if(n&&e){var r=qe(n).hoistableScripts,a=Nd(e),o=r.get(a);o||((o=n.querySelector(Od(a)))||(e=p({src:e,async:!0,type:"module"},t),(t=Sd.get(a))&&Fd(e,t),Ge(o=n.createElement("script")),ed(o,"link",e),n.head.appendChild(o)),o={type:"script",instance:o,count:1,state:null},r.set(a,o))}}};var _d="undefined"==typeof document?null:document;function Cd(e,t,n){var r=_d;if(r&&"string"==typeof t&&t){var a=ht(t);a='link[rel="'+e+'"][href="'+a+'"]',"string"==typeof n&&(a+='[crossorigin="'+n+'"]'),xd.has(a)||(xd.add(a),e={rel:e,crossOrigin:n,href:t},null===r.querySelector(a)&&(ed(t=r.createElement("link"),"link",e),Ge(t),r.head.appendChild(t)))}}function Pd(e,t,n,r){var a,o,l,s,c=(c=q.current)?Ed(c):null;if(!c)throw Error(i(446));switch(e){case"meta":case"title":return null;case"style":return"string"==typeof n.precedence&&"string"==typeof n.href?(t=Td(n.href),(r=(n=qe(c).hoistableStyles).get(t))||(r={type:"style",instance:null,count:0,state:null},n.set(t,r)),r):{type:"void",instance:null,count:0,state:null};case"link":if("stylesheet"===n.rel&&"string"==typeof n.href&&"string"==typeof n.precedence){e=Td(n.href);var u=qe(c).hoistableStyles,d=u.get(e);if(d||(c=c.ownerDocument||c,d={type:"stylesheet",instance:null,count:0,state:{loading:0,preload:null}},u.set(e,d),(u=c.querySelector(jd(e)))&&!u._p&&(d.instance=u,d.state.loading=5),Sd.has(e)||(n={rel:"preload",as:"style",href:n.href,crossOrigin:n.crossOrigin,integrity:n.integrity,media:n.media,hrefLang:n.hrefLang,referrerPolicy:n.referrerPolicy},Sd.set(e,n),u||(a=c,o=e,l=n,s=d.state,a.querySelector('link[rel="preload"][as="style"]['+o+"]")?s.loading=1:(o=a.createElement("link"),s.preload=o,o.addEventListener("load",(function(){return s.loading|=1})),o.addEventListener("error",(function(){return s.loading|=2})),ed(o,"link",l),Ge(o),a.head.appendChild(o))))),t&&null===r)throw Error(i(528,""));return d}if(t&&null!==r)throw Error(i(529,""));return null;case"script":return t=n.async,"string"==typeof(n=n.src)&&t&&"function"!=typeof t&&"symbol"!=typeof t?(t=Nd(n),(r=(n=qe(c).hoistableScripts).get(t))||(r={type:"script",instance:null,count:0,state:null},n.set(t,r)),r):{type:"void",instance:null,count:0,state:null};default:throw Error(i(444,e))}}function Td(e){return'href="'+ht(e)+'"'}function jd(e){return'link[rel="stylesheet"]['+e+"]"}function Ld(e){return p({},e,{"data-precedence":e.precedence,precedence:null})}function Nd(e){return'[src="'+ht(e)+'"]'}function Od(e){return"script[async]"+e}function Rd(e,t,n){if(t.count++,null===t.instance)switch(t.type){case"style":var r=e.querySelector('style[data-href~="'+ht(n.href)+'"]');if(r)return t.instance=r,Ge(r),r;var a=p({},n,{"data-href":n.href,"data-precedence":n.precedence,href:null,precedence:null});return Ge(r=(e.ownerDocument||e).createElement("style")),ed(r,"style",a),Id(r,n.precedence,e),t.instance=r;case"stylesheet":a=Td(n.href);var o=e.querySelector(jd(a));if(o)return t.state.loading|=4,t.instance=o,Ge(o),o;r=Ld(n),(a=Sd.get(a))&&Dd(r,a),Ge(o=(e.ownerDocument||e).createElement("link"));var l=o;return l._p=new Promise((function(e,t){l.onload=e,l.onerror=t})),ed(o,"link",r),t.state.loading|=4,Id(o,n.precedence,e),t.instance=o;case"script":return o=Nd(n.src),(a=e.querySelector(Od(o)))?(t.instance=a,Ge(a),a):(r=n,(a=Sd.get(o))&&Fd(r=p({},n),a),Ge(a=(e=e.ownerDocument||e).createElement("script")),ed(a,"link",r),e.head.appendChild(a),t.instance=a);case"void":return null;default:throw Error(i(443,t.type))}else"stylesheet"===t.type&&!(4&t.state.loading)&&(r=t.instance,t.state.loading|=4,Id(r,n.precedence,e));return t.instance}function Id(e,t,n){for(var r=n.querySelectorAll('link[rel="stylesheet"][data-precedence],style[data-precedence]'),a=r.length?r[r.length-1]:null,o=a,i=0;i<r.length;i++){var l=r[i];if(l.dataset.precedence===t)o=l;else if(o!==a)break}o?o.parentNode.insertBefore(e,o.nextSibling):(t=9===n.nodeType?n.head:n).insertBefore(e,t.firstChild)}function Dd(e,t){null==e.crossOrigin&&(e.crossOrigin=t.crossOrigin),null==e.referrerPolicy&&(e.referrerPolicy=t.referrerPolicy),null==e.title&&(e.title=t.title)}function Fd(e,t){null==e.crossOrigin&&(e.crossOrigin=t.crossOrigin),null==e.referrerPolicy&&(e.referrerPolicy=t.referrerPolicy),null==e.integrity&&(e.integrity=t.integrity)}var Md=null;function zd(e,t,n){if(null===Md){var r=new Map,a=Md=new Map;a.set(n,r)}else(r=(a=Md).get(n))||(r=new Map,a.set(n,r));if(r.has(e))return r;for(r.set(e,null),n=n.getElementsByTagName(e),a=0;a<n.length;a++){var o=n[a];if(!(o[ze]||o[Ne]||"link"===e&&"stylesheet"===o.getAttribute("rel"))&&"http://www.w3.org/2000/svg"!==o.namespaceURI){var i=o.getAttribute(t)||"";i=e+i;var l=r.get(i);l?l.push(o):r.set(i,[o])}}return r}function Bd(e,t,n){(e=e.ownerDocument||e).head.insertBefore(n,"title"===t?e.querySelector("head > title"):null)}function $d(e){return!!("stylesheet"!==e.type||3&e.state.loading)}var Ud=null;function Hd(){}function qd(){if(this.count--,0===this.count)if(this.stylesheets)Vd(this,this.stylesheets);else if(this.unsuspend){var e=this.unsuspend;this.unsuspend=null,e()}}var Gd=null;function Vd(e,t){e.stylesheets=null,null!==e.unsuspend&&(e.count++,Gd=new Map,t.forEach(Wd,e),Gd=null,qd.call(e))}function Wd(e,t){if(!(4&t.state.loading)){var n=Gd.get(e);if(n)var r=n.get(null);else{n=new Map,Gd.set(e,n);for(var a=e.querySelectorAll("link[data-precedence],style[data-precedence]"),o=0;o<a.length;o++){var i=a[o];"LINK"!==i.nodeName&&"not all"===i.getAttribute("media")||(n.set(i.dataset.precedence,i),r=i)}r&&n.set(null,r)}i=(a=t.instance).getAttribute("data-precedence"),(o=n.get(i)||r)===r&&n.set(null,a),n.set(i,a),this.count++,r=qd.bind(this),a.addEventListener("load",r),a.addEventListener("error",r),o?o.parentNode.insertBefore(a,o.nextSibling):(e=9===e.nodeType?e.head:e).insertBefore(a,e.firstChild),t.state.loading|=4}}var Kd={$$typeof:k,Provider:null,Consumer:null,_currentValue:D,_currentValue2:D,_threadCount:0};function Qd(e,t,n,r,a,o,i,l){this.tag=1,this.containerInfo=e,this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.next=this.pendingContext=this.context=this.cancelPendingCommit=null,this.callbackPriority=0,this.expirationTimes=Ee(-1),this.entangledLanes=this.shellSuspendCounter=this.errorRecoveryDisabledLanes=this.expiredLanes=this.warmLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Ee(0),this.hiddenUpdates=Ee(null),this.identifierPrefix=r,this.onUncaughtError=a,this.onCaughtError=o,this.onRecoverableError=i,this.pooledCache=null,this.pooledCacheLanes=0,this.formState=l,this.incompleteTransitions=new Map}function Yd(e,t,n,r,a,o,i,l,s,c,u,d){return e=new Qd(e,t,n,i,l,s,c,d),t=1,!0===o&&(t|=24),o=Dr(3,null,null,t),e.current=o,o.stateNode=e,(t=Oa()).refCount++,e.pooledCache=t,t.refCount++,o.memoizedState={element:r,isDehydrated:n,cache:t},no(o),e}function Xd(e){return e?e=Rr:Rr}function Zd(e,t,n,r,a,o){a=Xd(a),null===r.context?r.context=a:r.pendingContext=a,(r=ao(t)).payload={element:n},null!==(o=void 0===o?null:o)&&(r.callback=o),null!==(n=oo(e,r,t))&&(Dc(n,0,t),io(n,e,t))}function Jd(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n<t?n:t}}function ep(e,t){Jd(e,t),(e=e.alternate)&&Jd(e,t)}function tp(e){if(13===e.tag){var t=Lr(e,67108864);null!==t&&Dc(t,0,67108864),ep(e,67108864)}}var np=!0;function rp(e,t,n,r){var a=R.T;R.T=null;var o=I.p;try{I.p=2,op(e,t,n,r)}finally{I.p=o,R.T=a}}function ap(e,t,n,r){var a=R.T;R.T=null;var o=I.p;try{I.p=8,op(e,t,n,r)}finally{I.p=o,R.T=a}}function op(e,t,n,r){if(np){var a=ip(r);if(null===a)Uu(e,t,r,lp,n),bp(e,r);else if(function(e,t,n,r,a){switch(t){case"focusin":return dp=vp(dp,e,t,n,r,a),!0;case"dragenter":return pp=vp(pp,e,t,n,r,a),!0;case"mouseover":return fp=vp(fp,e,t,n,r,a),!0;case"pointerover":var o=a.pointerId;return mp.set(o,vp(mp.get(o)||null,e,t,n,r,a)),!0;case"gotpointercapture":return o=a.pointerId,hp.set(o,vp(hp.get(o)||null,e,t,n,r,a)),!0}return!1}(a,e,t,n,r))r.stopPropagation();else if(bp(e,r),4&t&&-1<yp.indexOf(e)){for(;null!==a;){var o=Ue(a);if(null!==o)switch(o.tag){case 3:if((o=o.stateNode).current.memoizedState.isDehydrated){var i=be(o.pendingLanes);if(0!==i){var l=o;for(l.pendingLanes|=2,l.entangledLanes|=2;i;){var s=1<<31-fe(i);l.entanglements[1]|=s,i&=~s}Su(o),!(6&nc)&&(Sc=te()+500,xu(0,!1))}}break;case 13:null!==(l=Lr(o,2))&&Dc(l,0,2),$c(),ep(o,2)}if(null===(o=ip(r))&&Uu(e,t,r,lp,n),o===a)break;a=o}null!==a&&r.stopPropagation()}else Uu(e,t,r,null,n)}}function ip(e){return sp(e=Lt(e))}var lp=null;function sp(e){if(lp=null,null!==(e=$e(e))){var t=s(e);if(null===t)e=null;else{var n=t.tag;if(13===n){if(null!==(e=c(t)))return e;e=null}else if(3===n){if(t.stateNode.current.memoizedState.isDehydrated)return 3===t.tag?t.stateNode.containerInfo:null;e=null}else t!==e&&(e=null)}}return lp=e,null}function cp(e){switch(e){case"beforetoggle":case"cancel":case"click":case"close":case"contextmenu":case"copy":case"cut":case"auxclick":case"dblclick":case"dragend":case"dragstart":case"drop":case"focusin":case"focusout":case"input":case"invalid":case"keydown":case"keypress":case"keyup":case"mousedown":case"mouseup":case"paste":case"pause":case"play":case"pointercancel":case"pointerdown":case"pointerup":case"ratechange":case"reset":case"resize":case"seeked":case"submit":case"toggle":case"touchcancel":case"touchend":case"touchstart":case"volumechange":case"change":case"selectionchange":case"textInput":case"compositionstart":case"compositionend":case"compositionupdate":case"beforeblur":case"afterblur":case"beforeinput":case"blur":case"fullscreenchange":case"focus":case"hashchange":case"popstate":case"select":case"selectstart":return 2;case"drag":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"mousemove":case"mouseout":case"mouseover":case"pointermove":case"pointerout":case"pointerover":case"scroll":case"touchmove":case"wheel":case"mouseenter":case"mouseleave":case"pointerenter":case"pointerleave":return 8;case"message":switch(ne()){case re:return 2;case ae:return 8;case oe:case ie:return 32;case le:return 268435456;default:return 32}default:return 32}}var up=!1,dp=null,pp=null,fp=null,mp=new Map,hp=new Map,gp=[],yp="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset".split(" ");function bp(e,t){switch(e){case"focusin":case"focusout":dp=null;break;case"dragenter":case"dragleave":pp=null;break;case"mouseover":case"mouseout":fp=null;break;case"pointerover":case"pointerout":mp.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":hp.delete(t.pointerId)}}function vp(e,t,n,r,a,o){return null===e||e.nativeEvent!==o?(e={blockedOn:t,domEventName:n,eventSystemFlags:r,nativeEvent:o,targetContainers:[a]},null!==t&&(null!==(t=Ue(t))&&tp(t)),e):(e.eventSystemFlags|=r,t=e.targetContainers,null!==a&&-1===t.indexOf(a)&&t.push(a),e)}function wp(e){var t=$e(e.target);if(null!==t){var n=s(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=c(n)))return e.blockedOn=t,void function(e,t){var n=I.p;try{return I.p=e,t()}finally{I.p=n}}(e.priority,(function(){if(13===n.tag){var e=Rc();e=Pe(e);var t=Lr(n,e);null!==t&&Dc(t,0,e),ep(n,e)}}))}else if(3===t&&n.stateNode.current.memoizedState.isDehydrated)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function kp(e){if(null!==e.blockedOn)return!1;for(var t=e.targetContainers;0<t.length;){var n=ip(e.nativeEvent);if(null!==n)return null!==(t=Ue(n))&&tp(t),e.blockedOn=n,!1;var r=new(n=e.nativeEvent).constructor(n.type,n);jt=r,n.target.dispatchEvent(r),jt=null,t.shift()}return!0}function Sp(e,t,n){kp(e)&&n.delete(t)}function xp(){up=!1,null!==dp&&kp(dp)&&(dp=null),null!==pp&&kp(pp)&&(pp=null),null!==fp&&kp(fp)&&(fp=null),mp.forEach(Sp),hp.forEach(Sp)}function Ep(e,t){e.blockedOn===t&&(e.blockedOn=null,up||(up=!0,r.unstable_scheduleCallback(r.unstable_NormalPriority,xp)))}var Ap=null;function _p(e){Ap!==e&&(Ap=e,r.unstable_scheduleCallback(r.unstable_NormalPriority,(function(){Ap===e&&(Ap=null);for(var t=0;t<e.length;t+=3){var n=e[t],r=e[t+1],a=e[t+2];if("function"!=typeof r){if(null===sp(r||n))continue;break}var o=Ue(n);null!==o&&(e.splice(t,3),t-=3,Li(o,{pending:!0,data:a,method:n.method,action:r},r,a))}})))}function Cp(e){function t(t){return Ep(t,e)}null!==dp&&Ep(dp,e),null!==pp&&Ep(pp,e),null!==fp&&Ep(fp,e),mp.forEach(t),hp.forEach(t);for(var n=0;n<gp.length;n++){var r=gp[n];r.blockedOn===e&&(r.blockedOn=null)}for(;0<gp.length&&null===(n=gp[0]).blockedOn;)wp(n),null===n.blockedOn&&gp.shift();if(null!=(n=(e.ownerDocument||e).$$reactFormReplay))for(r=0;r<n.length;r+=3){var a=n[r],o=n[r+1],i=a[Oe]||null;if("function"==typeof o)i||_p(n);else if(i){var l=null;if(o&&o.hasAttribute("formAction")){if(a=o,i=o[Oe]||null)l=i.formAction;else if(null!==sp(a))continue}else l=i.action;"function"==typeof l?n[r+1]=l:(n.splice(r,3),r-=3),_p(n)}}}function Pp(e){this._internalRoot=e}function Tp(e){this._internalRoot=e}Tp.prototype.render=Pp.prototype.render=function(e){var t=this._internalRoot;if(null===t)throw Error(i(409));Zd(t.current,Rc(),e,t,null,null)},Tp.prototype.unmount=Pp.prototype.unmount=function(){var e=this._internalRoot;if(null!==e){this._internalRoot=null;var t=e.containerInfo;Zd(e.current,2,null,e,null,null),$c(),t[Re]=null}},Tp.prototype.unstable_scheduleHydration=function(e){if(e){var t=je();e={blockedOn:null,target:e,priority:t};for(var n=0;n<gp.length&&0!==t&&t<gp[n].priority;n++);gp.splice(n,0,e),0===n&&wp(e)}};var jp=a.version;if("19.1.0"!==jp)throw Error(i(527,jp,"19.1.0"));I.findDOMNode=function(e){var t=e._reactInternals;if(void 0===t){if("function"==typeof e.render)throw Error(i(188));throw e=Object.keys(e).join(","),Error(i(268,e))}return e=function(e){var t=e.alternate;if(!t){if(null===(t=s(e)))throw Error(i(188));return t!==e?null:e}for(var n=e,r=t;;){var a=n.return;if(null===a)break;var o=a.alternate;if(null===o){if(null!==(r=a.return)){n=r;continue}break}if(a.child===o.child){for(o=a.child;o;){if(o===n)return u(a),e;if(o===r)return u(a),t;o=o.sibling}throw Error(i(188))}if(n.return!==r.return)n=a,r=o;else{for(var l=!1,c=a.child;c;){if(c===n){l=!0,n=a,r=o;break}if(c===r){l=!0,r=a,n=o;break}c=c.sibling}if(!l){for(c=o.child;c;){if(c===n){l=!0,n=o,r=a;break}if(c===r){l=!0,r=o,n=a;break}c=c.sibling}if(!l)throw Error(i(189))}}if(n.alternate!==r)throw Error(i(190))}if(3!==n.tag)throw Error(i(188));return n.stateNode.current===n?e:t}(t),e=null===(e=null!==e?d(e):null)?null:e.stateNode};var Lp={bundleType:0,version:"19.1.0",rendererPackageName:"react-dom",currentDispatcherRef:R,reconcilerVersion:"19.1.0"};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var Np=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!Np.isDisabled&&Np.supportsFiber)try{ue=Np.inject(Lp),de=Np}catch(Rp){}}t.createRoot=function(e,t){if(!l(e))throw Error(i(299));var n=!1,r="",a=bl,o=vl,s=wl;return null!=t&&(!0===t.unstable_strictMode&&(n=!0),void 0!==t.identifierPrefix&&(r=t.identifierPrefix),void 0!==t.onUncaughtError&&(a=t.onUncaughtError),void 0!==t.onCaughtError&&(o=t.onCaughtError),void 0!==t.onRecoverableError&&(s=t.onRecoverableError),void 0!==t.unstable_transitionCallbacks&&t.unstable_transitionCallbacks),t=Yd(e,1,!1,null,0,n,r,a,o,s,0,null),e[Re]=t.current,Bu(e),new Pp(t)},t.hydrateRoot=function(e,t,n){if(!l(e))throw Error(i(299));var r=!1,a="",o=bl,s=vl,c=wl,u=null;return null!=n&&(!0===n.unstable_strictMode&&(r=!0),void 0!==n.identifierPrefix&&(a=n.identifierPrefix),void 0!==n.onUncaughtError&&(o=n.onUncaughtError),void 0!==n.onCaughtError&&(s=n.onCaughtError),void 0!==n.onRecoverableError&&(c=n.onRecoverableError),void 0!==n.unstable_transitionCallbacks&&n.unstable_transitionCallbacks,void 0!==n.formState&&(u=n.formState)),(t=Yd(e,1,!0,t,0,r,a,o,s,c,0,u)).context=Xd(null),n=t.current,(a=ao(r=Pe(r=Rc()))).callback=null,oo(n,a,r),n=r,t.current.lanes=n,Ae(t,n),Su(t),e[Re]=t.current,Bu(e),new Tp(t)},t.version="19.1.0"},1312:(e,t,n)=>{"use strict";n.d(t,{A:()=>c,T:()=>s});var r=n(6540),a=n(4848);function o(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(2654);function l({id:e,message:t}){if(void 0===e&&void 0===t)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[e??t]??t??e}function s({message:e,id:t},n){return o(l({message:e,id:t}),n)}function c({children:e,id:t,values:n}){if(e&&"string"!=typeof e)throw console.warn("Illegal <Translate> children",e),new Error("The Docusaurus <Translate> component only accept simple string values");const r=l({message:e,id:t});return(0,a.jsx)(a.Fragment,{children:o(r,n)})}},1422:(e,t,n)=>{"use strict";n.d(t,{N:()=>h,u:()=>s});var r=n(6540),a=n(205),o=n(3109),i=n(4848);const l="ease-in-out";function s({initialState:e}){const[t,n]=(0,r.useState)(e??!1),a=(0,r.useCallback)((()=>{n((e=>!e))}),[]);return{collapsed:t,setCollapsed:n,toggleCollapsed:a}}const c={display:"none",overflow:"hidden",height:"0px"},u={display:"block",overflow:"visible",height:"auto"};function d(e,t){const n=t?c:u;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function p({collapsibleRef:e,collapsed:t,animation:n}){const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const r=e.current;function i(){const e=r.scrollHeight,t=n?.duration??function(e){if((0,o.O)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(e);return{transition:`height ${t}ms ${n?.easing??l}`,height:`${e}px`}}function s(){const e=i();r.style.transition=e.transition,r.style.height=e.height}if(!a.current)return d(r,t),void(a.current=!0);return r.style.willChange="height",function(){const e=requestAnimationFrame((()=>{t?(s(),requestAnimationFrame((()=>{r.style.height=c.height,r.style.overflow=c.overflow}))):(r.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(e)}()}),[e,t,n])}function f({as:e="div",collapsed:t,children:n,animation:a,onCollapseTransitionEnd:o,className:l}){const s=(0,r.useRef)(null);return p({collapsibleRef:s,collapsed:t,animation:a}),(0,i.jsx)(e,{ref:s,onTransitionEnd:e=>{"height"===e.propertyName&&(d(s.current,t),o?.(t))},className:l,children:n})}function m({collapsed:e,...t}){const[n,o]=(0,r.useState)(!e),[l,s]=(0,r.useState)(e);return(0,a.A)((()=>{e||o(!0)}),[e]),(0,a.A)((()=>{n&&s(e)}),[n,e]),n?(0,i.jsx)(f,{...t,collapsed:l}):null}function h({lazy:e,...t}){const n=e?m:f;return(0,i.jsx)(n,{...t})}},1463:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});n(6540);var r=n(5260),a=n(4848);function o({locale:e,version:t,tag:n}){const o=e;return(0,a.jsxs)(r.A,{children:[e&&(0,a.jsx)("meta",{name:"docusaurus_locale",content:e}),t&&(0,a.jsx)("meta",{name:"docusaurus_version",content:t}),n&&(0,a.jsx)("meta",{name:"docusaurus_tag",content:n}),o&&(0,a.jsx)("meta",{name:"docsearch:language",content:o}),t&&(0,a.jsx)("meta",{name:"docsearch:version",content:t}),n&&(0,a.jsx)("meta",{name:"docsearch:docusaurus_tag",content:n})]})}},1513:(e,t,n)=>{"use strict";n.d(t,{zR:()=>w,TM:()=>_,yJ:()=>f,sC:()=>P,AO:()=>p});var r=n(8168);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r<a;n+=1,r+=1)e[n]=e[r];e.pop()}const i=function(e,t){void 0===t&&(t="");var n,r=e&&e.split("/")||[],i=t&&t.split("/")||[],l=e&&a(e),s=t&&a(t),c=l||s;if(e&&a(e)?i=r:r.length&&(i.pop(),i=i.concat(r)),!i.length)return"/";if(i.length){var u=i[i.length-1];n="."===u||".."===u||""===u}else n=!1;for(var d=0,p=i.length;p>=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var l=n(1561);function s(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.A)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];t.forEach((function(e){return e.apply(void 0,n)}))}}}var h=!("undefined"==typeof window||!window.document||!window.document.createElement);function g(e,t){t(window.confirm(e))}var y="popstate",b="hashchange";function v(){try{return window.history.state||{}}catch(e){return{}}}function w(e){void 0===e&&(e={}),h||(0,l.A)(!1);var t,n=window.history,a=(-1===(t=window.navigator.userAgent).indexOf("Android 2.")&&-1===t.indexOf("Android 4.0")||-1===t.indexOf("Mobile Safari")||-1!==t.indexOf("Chrome")||-1!==t.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history,o=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,c=i.forceRefresh,w=void 0!==c&&c,k=i.getUserConfirmation,S=void 0===k?g:k,x=i.keyLength,E=void 0===x?6:x,A=e.basename?d(s(e.basename)):"";function _(e){var t=e||{},n=t.key,r=t.state,a=window.location,o=a.pathname+a.search+a.hash;return A&&(o=u(o,A)),f(o,r,n)}function C(){return Math.random().toString(36).substr(2,E)}var P=m();function T(e){(0,r.A)($,e),$.length=n.length,P.notifyListeners($.location,$.action)}function j(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||O(_(e.state))}function L(){O(_(v()))}var N=!1;function O(e){if(N)N=!1,T();else{P.confirmTransitionTo(e,"POP",S,(function(t){t?T({action:"POP",location:e}):function(e){var t=$.location,n=I.indexOf(t.key);-1===n&&(n=0);var r=I.indexOf(e.key);-1===r&&(r=0);var a=n-r;a&&(N=!0,F(a))}(e)}))}}var R=_(v()),I=[R.key];function D(e){return A+p(e)}function F(e){n.go(e)}var M=0;function z(e){1===(M+=e)&&1===e?(window.addEventListener(y,j),o&&window.addEventListener(b,L)):0===M&&(window.removeEventListener(y,j),o&&window.removeEventListener(b,L))}var B=!1;var $={length:n.length,action:"POP",location:R,createHref:D,push:function(e,t){var r="PUSH",o=f(e,t,C(),$.location);P.confirmTransitionTo(o,r,S,(function(e){if(e){var t=D(o),i=o.key,l=o.state;if(a)if(n.pushState({key:i,state:l},null,t),w)window.location.href=t;else{var s=I.indexOf($.location.key),c=I.slice(0,s+1);c.push(o.key),I=c,T({action:r,location:o})}else window.location.href=t}}))},replace:function(e,t){var r="REPLACE",o=f(e,t,C(),$.location);P.confirmTransitionTo(o,r,S,(function(e){if(e){var t=D(o),i=o.key,l=o.state;if(a)if(n.replaceState({key:i,state:l},null,t),w)window.location.replace(t);else{var s=I.indexOf($.location.key);-1!==s&&(I[s]=o.key),T({action:r,location:o})}else window.location.replace(t)}}))},go:F,goBack:function(){F(-1)},goForward:function(){F(1)},block:function(e){void 0===e&&(e=!1);var t=P.setPrompt(e);return B||(z(1),B=!0),function(){return B&&(B=!1,z(-1)),t()}},listen:function(e){var t=P.appendListener(e);return z(1),function(){z(-1),t()}}};return $}var k="hashchange",S={hashbang:{encodePath:function(e){return"!"===e.charAt(0)?e:"!/"+c(e)},decodePath:function(e){return"!"===e.charAt(0)?e.substr(1):e}},noslash:{encodePath:c,decodePath:s},slash:{encodePath:s,decodePath:s}};function x(e){var t=e.indexOf("#");return-1===t?e:e.slice(0,t)}function E(){var e=window.location.href,t=e.indexOf("#");return-1===t?"":e.substring(t+1)}function A(e){window.location.replace(x(window.location.href)+"#"+e)}function _(e){void 0===e&&(e={}),h||(0,l.A)(!1);var t=window.history,n=(window.navigator.userAgent.indexOf("Firefox"),e),a=n.getUserConfirmation,o=void 0===a?g:a,i=n.hashType,c=void 0===i?"slash":i,y=e.basename?d(s(e.basename)):"",b=S[c],v=b.encodePath,w=b.decodePath;function _(){var e=w(E());return y&&(e=u(e,y)),f(e)}var C=m();function P(e){(0,r.A)(B,e),B.length=t.length,C.notifyListeners(B.location,B.action)}var T=!1,j=null;function L(){var e,t,n=E(),r=v(n);if(n!==r)A(r);else{var a=_(),i=B.location;if(!T&&(t=a,(e=i).pathname===t.pathname&&e.search===t.search&&e.hash===t.hash))return;if(j===p(a))return;j=null,function(e){if(T)T=!1,P();else{var t="POP";C.confirmTransitionTo(e,t,o,(function(n){n?P({action:t,location:e}):function(e){var t=B.location,n=I.lastIndexOf(p(t));-1===n&&(n=0);var r=I.lastIndexOf(p(e));-1===r&&(r=0);var a=n-r;a&&(T=!0,D(a))}(e)}))}}(a)}}var N=E(),O=v(N);N!==O&&A(O);var R=_(),I=[p(R)];function D(e){t.go(e)}var F=0;function M(e){1===(F+=e)&&1===e?window.addEventListener(k,L):0===F&&window.removeEventListener(k,L)}var z=!1;var B={length:t.length,action:"POP",location:R,createHref:function(e){var t=document.querySelector("base"),n="";return t&&t.getAttribute("href")&&(n=x(window.location.href)),n+"#"+v(y+p(e))},push:function(e,t){var n="PUSH",r=f(e,void 0,void 0,B.location);C.confirmTransitionTo(r,n,o,(function(e){if(e){var t=p(r),a=v(y+t);if(E()!==a){j=t,function(e){window.location.hash=e}(a);var o=I.lastIndexOf(p(B.location)),i=I.slice(0,o+1);i.push(t),I=i,P({action:n,location:r})}else P()}}))},replace:function(e,t){var n="REPLACE",r=f(e,void 0,void 0,B.location);C.confirmTransitionTo(r,n,o,(function(e){if(e){var t=p(r),a=v(y+t);E()!==a&&(j=t,A(a));var o=I.indexOf(p(B.location));-1!==o&&(I[o]=t),P({action:n,location:r})}}))},go:D,goBack:function(){D(-1)},goForward:function(){D(1)},block:function(e){void 0===e&&(e=!1);var t=C.setPrompt(e);return z||(M(1),z=!0),function(){return z&&(z=!1,M(-1)),t()}},listen:function(e){var t=C.appendListener(e);return M(1),function(){M(-1),t()}}};return B}function C(e,t,n){return Math.min(Math.max(e,t),n)}function P(e){void 0===e&&(e={});var t=e,n=t.getUserConfirmation,a=t.initialEntries,o=void 0===a?["/"]:a,i=t.initialIndex,l=void 0===i?0:i,s=t.keyLength,c=void 0===s?6:s,u=m();function d(e){(0,r.A)(w,e),w.length=w.entries.length,u.notifyListeners(w.location,w.action)}function h(){return Math.random().toString(36).substr(2,c)}var g=C(l,0,o.length-1),y=o.map((function(e){return f(e,void 0,"string"==typeof e?h():e.key||h())})),b=p;function v(e){var t=C(w.index+e,0,w.entries.length-1),r=w.entries[t];u.confirmTransitionTo(r,"POP",n,(function(e){e?d({action:"POP",location:r,index:t}):d()}))}var w={length:y.length,action:"POP",location:y[g],index:g,entries:y,createHref:b,push:function(e,t){var r="PUSH",a=f(e,t,h(),w.location);u.confirmTransitionTo(a,r,n,(function(e){if(e){var t=w.index+1,n=w.entries.slice(0);n.length>t?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,h(),w.location);u.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=w.index+e;return t>=0&&t<w.entries.length},block:function(e){return void 0===e&&(e=!1),u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return w}},1561:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=!0,a="Invariant failed";function o(e,t){if(!e){if(r)throw new Error(a);var n="function"==typeof t?t():t,o=n?"".concat(a,": ").concat(n):a;throw new Error(o)}}},1635:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__addDisposableResource:()=>I,__assign:()=>o,__asyncDelegator:()=>A,__asyncGenerator:()=>E,__asyncValues:()=>_,__await:()=>x,__awaiter:()=>m,__classPrivateFieldGet:()=>N,__classPrivateFieldIn:()=>R,__classPrivateFieldSet:()=>O,__createBinding:()=>g,__decorate:()=>l,__disposeResources:()=>F,__esDecorate:()=>c,__exportStar:()=>y,__extends:()=>a,__generator:()=>h,__importDefault:()=>L,__importStar:()=>j,__makeTemplateObject:()=>C,__metadata:()=>f,__param:()=>s,__propKey:()=>d,__read:()=>v,__rest:()=>i,__rewriteRelativeImportExtension:()=>M,__runInitializers:()=>u,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>S,__spreadArrays:()=>k,__values:()=>b,default:()=>z});var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var o=function(){return o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},o.apply(this,arguments)};function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}function l(e,t,n,r){var a,o=arguments.length,i=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,r);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(i=(o<3?a(i):o>3?a(t,n,i):a(t,n))||i);return o>3&&i&&Object.defineProperty(t,n,i),i}function s(e,t){return function(n,r){t(n,r,e)}}function c(e,t,n,r,a,o){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var l,s=r.kind,c="getter"===s?"get":"setter"===s?"set":"value",u=!t&&e?r.static?e:e.prototype:null,d=t||(u?Object.getOwnPropertyDescriptor(u,r.name):{}),p=!1,f=n.length-1;f>=0;f--){var m={};for(var h in r)m[h]="access"===h?{}:r[h];for(var h in r.access)m.access[h]=r.access[h];m.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");o.push(i(e||null))};var g=(0,n[f])("accessor"===s?{get:d.get,set:d.set}:d[c],m);if("accessor"===s){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(l=i(g.get))&&(d.get=l),(l=i(g.set))&&(d.set=l),(l=i(g.init))&&a.unshift(l)}else(l=i(g))&&("field"===s?a.unshift(l):d[c]=l)}u&&Object.defineProperty(u,r.name,d),p=!0}function u(e,t,n){for(var r=arguments.length>2,a=0;a<t.length;a++)n=r?t[a].call(e,n):t[a].call(e);return r?n:void 0}function d(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function f(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function m(e,t,n,r){return new(n||(n=Promise))((function(a,o){function i(e){try{s(r.next(e))}catch(t){o(t)}}function l(e){try{s(r.throw(e))}catch(t){o(t)}}function s(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,l)}s((r=r.apply(e,t||[])).next())}))}function h(e,t){var n,r,a,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=l(0),i.throw=l(1),i.return=l(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(l){return function(s){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,l[0]&&(o=0)),o;)try{if(n=1,r&&(a=2&l[0]?r.return:l[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,l[1])).done)return a;switch(r=0,a&&(l=[2&l[0],a.value]),l[0]){case 0:case 1:a=l;break;case 4:return o.label++,{value:l[1],done:!1};case 5:o.label++,r=l[1],l=[0];continue;case 7:l=o.ops.pop(),o.trys.pop();continue;default:if(!(a=o.trys,(a=a.length>0&&a[a.length-1])||6!==l[0]&&2!==l[0])){o=0;continue}if(3===l[0]&&(!a||l[1]>a[0]&&l[1]<a[3])){o.label=l[1];break}if(6===l[0]&&o.label<a[1]){o.label=a[1],a=l;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(l);break}a[2]&&o.ops.pop(),o.trys.pop();continue}l=t.call(e,o)}catch(s){l=[6,s],r=0}finally{n=a=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,s])}}}var g=Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]};function y(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||g(t,e,n)}function b(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function v(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,a,o=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)i.push(r.value)}catch(l){a={error:l}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return i}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(v(arguments[t]));return e}function k(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),a=0;for(t=0;t<n;t++)for(var o=arguments[t],i=0,l=o.length;i<l;i++,a++)r[a]=o[i];return r}function S(e,t,n){if(n||2===arguments.length)for(var r,a=0,o=t.length;a<o;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||Array.prototype.slice.call(t))}function x(e){return this instanceof x?(this.v=e,this):new x(e)}function E(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,a=n.apply(e,t||[]),o=[];return r=Object.create(("function"==typeof AsyncIterator?AsyncIterator:Object).prototype),i("next"),i("throw"),i("return",(function(e){return function(t){return Promise.resolve(t).then(e,c)}})),r[Symbol.asyncIterator]=function(){return this},r;function i(e,t){a[e]&&(r[e]=function(t){return new Promise((function(n,r){o.push([e,t,n,r])>1||l(e,t)}))},t&&(r[e]=t(r[e])))}function l(e,t){try{(n=a[e](t)).value instanceof x?Promise.resolve(n.value.v).then(s,c):u(o[0][2],n)}catch(r){u(o[0][3],r)}var n}function s(e){l("next",e)}function c(e){l("throw",e)}function u(e,t){e(t),o.shift(),o.length&&l(o[0][0],o[0][1])}}function A(e){var t,n;return t={},r("next"),r("throw",(function(e){throw e})),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,a){t[r]=e[r]?function(t){return(n=!n)?{value:x(e[r](t)),done:!1}:a?a(t):t}:a}}function _(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=b(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise((function(r,a){(function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)})(r,a,(t=e[n](t)).done,t.value)}))}}}function C(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var P=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},T=function(e){return T=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},T(e)};function j(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=T(e),r=0;r<n.length;r++)"default"!==n[r]&&g(t,e,n[r]);return P(t,e),t}function L(e){return e&&e.__esModule?e:{default:e}}function N(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function O(e,t,n,r,a){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?a.call(e,n):a?a.value=n:t.set(e,n),n}function R(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function I(e,t,n){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var r,a;if(n){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");r=t[Symbol.asyncDispose]}if(void 0===r){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");r=t[Symbol.dispose],n&&(a=r)}if("function"!=typeof r)throw new TypeError("Object not disposable.");a&&(r=function(){try{a.call(this)}catch(e){return Promise.reject(e)}}),e.stack.push({value:t,dispose:r,async:n})}else n&&e.stack.push({async:!0});return t}var D="function"==typeof SuppressedError?SuppressedError:function(e,t,n){var r=new Error(n);return r.name="SuppressedError",r.error=e,r.suppressed=t,r};function F(e){function t(t){e.error=e.hasError?new D(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}var n,r=0;return function a(){for(;n=e.stack.pop();)try{if(!n.async&&1===r)return r=0,e.stack.push(n),Promise.resolve().then(a);if(n.dispose){var o=n.dispose.call(n.value);if(n.async)return r|=2,Promise.resolve(o).then(a,(function(e){return t(e),a()}))}else r|=1}catch(i){t(i)}if(1===r)return e.hasError?Promise.reject(e.error):Promise.resolve();if(e.hasError)throw e.error}()}function M(e,t){return"string"==typeof e&&/^\.\.?\//.test(e)?e.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i,(function(e,n,r,a,o){return n?t?".jsx":".js":!r||a&&o?r+a+"."+o.toLowerCase()+"js":e})):e}const z={__extends:a,__assign:o,__rest:i,__decorate:l,__param:s,__esDecorate:c,__runInitializers:u,__propKey:d,__setFunctionName:p,__metadata:f,__awaiter:m,__generator:h,__createBinding:g,__exportStar:y,__values:b,__read:v,__spread:w,__spreadArrays:k,__spreadArray:S,__await:x,__asyncGenerator:E,__asyncDelegator:A,__asyncValues:_,__makeTemplateObject:C,__importStar:j,__importDefault:L,__classPrivateFieldGet:N,__classPrivateFieldSet:O,__classPrivateFieldIn:R,__addDisposableResource:I,__disposeResources:F,__rewriteRelativeImportExtension:M}},1656:(e,t,n)=>{"use strict";n.d(t,{A:()=>Ct});var r=n(6540),a=n(4164),o=n(7489),i=n(5500),l=n(6347),s=n(1312),c=n(5062),u=n(4848);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,l.W6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.$)((({location:n})=>{e.current&&!n.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,s.T)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":m,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var g=n(7559),y=n(4090);const b={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(h,{className:b.skipToContent})}var w=n(6342),k=n(5041);function S({width:e=21,height:t=21,color:n="currentColor",strokeWidth:r=1.2,className:a,...o}){return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:e,height:t,...o,children:(0,u.jsx)("g",{stroke:n,strokeWidth:r,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const x={closeButton:"closeButton_CVFx"};function E(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,s.T)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,a.A)("clean-btn close",x.closeButton,e.className),children:(0,u.jsx)(S,{width:14,height:14,strokeWidth:3.1})})}const A={content:"content_knG7"};function _(e){const{announcementBar:t}=(0,w.p)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,a.A)(A.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const C={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function P(){const{announcementBar:e}=(0,w.p)(),{isActive:t,close:n}=(0,k.M)();if(!t)return null;const{backgroundColor:r,textColor:o,isCloseable:i}=e;return(0,u.jsxs)("div",{className:(0,a.A)(g.G.announcementBar.container,C.announcementBar),style:{backgroundColor:r,color:o},role:"banner",children:[i&&(0,u.jsx)("div",{className:C.announcementBarPlaceholder}),(0,u.jsx)(_,{className:C.announcementBarContent}),i&&(0,u.jsx)(E,{onClick:n,className:C.announcementBarClose})]})}var T=n(2069),j=n(3104);var L=n(9532),N=n(5600);const O=r.createContext(null);function R({children:e}){const t=function(){const e=(0,T.M)(),t=(0,N.YL)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,L.ZC)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return(0,u.jsx)(O.Provider,{value:t,children:e})}function I(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function D(){const e=(0,r.useContext)(O);if(!e)throw new L.dV("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,N.YL)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:I(o)})),[a,o,t])}function F(e){return parseInt(r.version.split(".")[0],10)<19?{inert:e?"":void 0}:{inert:e}}function M({children:e,inert:t}){return(0,u.jsx)("div",{className:(0,a.A)(g.G.layout.navbar.mobileSidebar.panel,"navbar-sidebar__item menu"),...F(t),children:e})}function z({header:e,primaryMenu:t,secondaryMenu:n}){const{shown:r}=D();return(0,u.jsxs)("div",{className:(0,a.A)(g.G.layout.navbar.mobileSidebar.container,"navbar-sidebar"),children:[e,(0,u.jsxs)("div",{className:(0,a.A)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":r}),children:[(0,u.jsx)(M,{inert:r,children:t}),(0,u.jsx)(M,{inert:!r,children:n})]})]})}var B=n(5293),$=n(2303);function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function H(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}function q(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"})})}const G="toggle_vylO",V="toggleButton_gllP",W="toggleIcon_g3eP",K="systemToggleIcon_QzmC",Q="lightToggleIcon_pyhR",Y="darkToggleIcon_wfgR",X="toggleButtonDisabled_aARS";function Z(e){switch(e){case null:return(0,s.T)({message:"system mode",id:"theme.colorToggle.ariaLabel.mode.system",description:"The name for the system color mode"});case"light":return(0,s.T)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"});case"dark":return(0,s.T)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"});default:throw new Error(`unexpected color mode ${e}`)}}function J(e){return(0,s.T)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the color mode toggle"},{mode:Z(e)})}function ee(){return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(U,{"aria-hidden":!0,className:(0,a.A)(W,Q)}),(0,u.jsx)(H,{"aria-hidden":!0,className:(0,a.A)(W,Y)}),(0,u.jsx)(q,{"aria-hidden":!0,className:(0,a.A)(W,K)})]})}function te({className:e,buttonClassName:t,respectPrefersColorScheme:n,value:r,onChange:o}){const i=(0,$.A)();return(0,u.jsx)("div",{className:(0,a.A)(G,e),children:(0,u.jsx)("button",{className:(0,a.A)("clean-btn",V,!i&&X,t),type:"button",onClick:()=>o(function(e,t){if(!t)return"dark"===e?"light":"dark";switch(e){case null:return"light";case"light":return"dark";case"dark":return null;default:throw new Error(`unexpected color mode ${e}`)}}(r,n)),disabled:!i,title:Z(r),"aria-label":J(r),children:(0,u.jsx)(ee,{})})})}const ne=r.memo(te),re={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function ae({className:e}){const t=(0,w.p)().navbar.style,{disableSwitch:n,respectPrefersColorScheme:r}=(0,w.p)().colorMode,{colorModeChoice:a,setColorMode:o}=(0,B.G)();return n?null:(0,u.jsx)(ne,{className:e,buttonClassName:"dark"===t?re.darkNavbarColorModeToggle:void 0,respectPrefersColorScheme:r,value:a,onChange:o})}var oe=n(3465);function ie(){return(0,u.jsx)(oe.A,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function le(){const e=(0,T.M)();return(0,u.jsx)("button",{type:"button","aria-label":(0,s.T)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(S,{color:"var(--ifm-color-emphasis-600)"})})}function se(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(ie,{}),(0,u.jsx)(ae,{className:"margin-right--md"}),(0,u.jsx)(le,{})]})}var ce=n(8774),ue=n(6025),de=n(6654);function pe(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var fe=n(3186);function me({activeBasePath:e,activeBaseRegex:t,to:n,href:r,label:a,html:o,isDropdownLink:i,prependBaseUrlToHref:l,...s}){const c=(0,ue.Ay)(n),d=(0,ue.Ay)(e),p=(0,ue.Ay)(r,{forcePrependBaseUrl:!0}),f=a&&r&&!(0,de.A)(r),m=o?{dangerouslySetInnerHTML:{__html:o}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,f&&(0,u.jsx)(fe.A,{...i&&{width:12,height:12}})]})};return r?(0,u.jsx)(ce.A,{href:l?p:r,...s,...m}):(0,u.jsx)(ce.A,{to:c,isNavLink:!0,...(e||t)&&{isActive:(e,n)=>t?pe(t,n.pathname):n.pathname.startsWith(d)},...s,...m})}function he({className:e,isDropdownItem:t,...n}){return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(me,{className:(0,a.A)("menu__link",e),...n})})}function ge({className:e,isDropdownItem:t=!1,...n}){const r=(0,u.jsx)(me,{className:(0,a.A)(t?"dropdown__link":"navbar__item navbar__link",e),isDropdownLink:t,...n});return t?(0,u.jsx)("li",{children:r}):r}function ye({mobile:e=!1,position:t,...n}){const r=e?he:ge;return(0,u.jsx)(r,{...n,activeClassName:n.activeClassName??(e?"menu__link--active":"navbar__link--active")})}var be=n(1422),ve=n(9169),we=n(4586);const ke="dropdownNavbarItemMobile_J0Sd";function Se(e,t){return e.some((e=>function(e,t){return!!(0,ve.ys)(e.to,t)||!!pe(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function xe({collapsed:e,onClick:t}){return(0,u.jsx)("button",{"aria-label":e?(0,s.T)({id:"theme.navbar.mobileDropdown.collapseButton.expandAriaLabel",message:"Expand the dropdown",description:"The ARIA label of the button to expand the mobile dropdown navbar item"}):(0,s.T)({id:"theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel",message:"Collapse the dropdown",description:"The ARIA label of the button to collapse the mobile dropdown navbar item"}),"aria-expanded":!e,type:"button",className:"clean-btn menu__caret",onClick:t})}function Ee({items:e,className:t,position:n,onClick:o,...i}){const s=function(){const{siteConfig:{baseUrl:e}}=(0,we.A)(),{pathname:t}=(0,l.zy)();return t.replace(e,"/")}(),c=(0,ve.ys)(i.to,s),d=Se(e,s),{collapsed:p,toggleCollapsed:f}=function({active:e}){const{collapsed:t,toggleCollapsed:n,setCollapsed:a}=(0,be.u)({initialState:()=>!e});return(0,r.useEffect)((()=>{e&&a(!1)}),[e,a]),{collapsed:t,toggleCollapsed:n}}({active:c||d}),m=i.to?void 0:"#";return(0,u.jsxs)("li",{className:(0,a.A)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsxs)("div",{className:(0,a.A)("menu__list-item-collapsible",{"menu__list-item-collapsible--active":c}),children:[(0,u.jsx)(me,{role:"button",className:(0,a.A)(ke,"menu__link menu__link--sublist",t),href:m,...i,onClick:e=>{"#"===m&&e.preventDefault(),f()},children:i.children??i.label}),(0,u.jsx)(xe,{collapsed:p,onClick:e=>{e.preventDefault(),f()}})]}),(0,u.jsx)(be.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:e.map(((e,t)=>(0,r.createElement)(ze,{mobile:!0,isDropdownItem:!0,onClick:o,activeClassName:"menu__link--active",...e,key:t})))})]})}function Ae({items:e,position:t,className:n,onClick:o,...i}){const l=(0,r.useRef)(null),[s,c]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&c(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,a.A)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===t,"dropdown--show":s}),children:[(0,u.jsx)(me,{"aria-haspopup":"true","aria-expanded":s,role:"button",href:i.to?void 0:"#",className:(0,a.A)("navbar__link",n),...i,onClick:i.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),c(!s))},children:i.children??i.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:e.map(((e,t)=>(0,r.createElement)(ze,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function _e({mobile:e=!1,...t}){const n=e?Ee:Ae;return(0,u.jsx)(n,{...t})}var Ce=n(2131);function Pe({width:e=20,height:t=20,...n}){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:e,height:t,"aria-hidden":!0,...n,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const Te="iconLanguage_nlXk";var je=n(418);const Le={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Ne({children:e,className:t}){return(0,u.jsx)("div",{className:(0,a.A)(t,Le.navbarSearchContainer),children:e})}var Oe=n(4070),Re=n(6972);var Ie=n(3886);function De({docsPluginId:e,configs:t}){return function(e,t){if(t){const n=new Map(e.map((e=>[e.name,e]))),r=(t,r)=>{const a=n.get(t);if(!a)throw new Error(`No docs version exist for name '${t}', please verify your 'docsVersionDropdown' navbar item versions config.\nAvailable version names:\n- ${e.map((e=>`${e.name}`)).join("\n- ")}`);return{version:a,label:r?.label??a.label}};return Array.isArray(t)?t.map((e=>r(e,void 0))):Object.entries(t).map((([e,t])=>r(e,t)))}return e.map((e=>({version:e,label:e.label})))}((0,Oe.jh)(e),t)}function Fe(e,t){return t.alternateDocVersions[e.name]??function(e){return e.docs.find((t=>t.id===e.mainDocId))}(e)}const Me={default:ye,localeDropdown:function({mobile:e,dropdownItemsBefore:t,dropdownItemsAfter:n,queryString:r="",...a}){const{i18n:{currentLocale:o,locales:i,localeConfigs:c}}=(0,we.A)(),d=(0,Ce.o)(),{search:p,hash:f}=(0,l.zy)(),m=[...t,...i.map((t=>{const n=`${`pathname://${d.createUrl({locale:t,fullyQualified:!1})}`}${p}${f}${r}`;return{label:c[t].label,lang:c[t].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:t===o?e?"menu__link--active":"dropdown__link--active":""}})),...n],h=e?(0,s.T)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):c[o].label;return(0,u.jsx)(_e,{...a,mobile:e,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(Pe,{className:Te}),h]}),items:m})},search:function({mobile:e,className:t}){return e?null:(0,u.jsx)(Ne,{className:t,children:(0,u.jsx)(je.A,{})})},dropdown:_e,html:function({value:e,className:t,mobile:n=!1,isDropdownItem:r=!1}){const o=r?"li":"div";return(0,u.jsx)(o,{className:(0,a.A)({navbar__item:!n&&!r,"menu__list-item":n},t),dangerouslySetInnerHTML:{__html:e}})},doc:function({docId:e,label:t,docsPluginId:n,...r}){const{activeDoc:a}=(0,Oe.zK)(n),o=(0,Re.QB)(e,n),i=a?.path===o?.path;return null===o||o.unlisted&&!i?null:(0,u.jsx)(ye,{exact:!0,...r,isActive:()=>i||!!a?.sidebar&&a.sidebar===o.sidebar,label:t??o.id,to:o.path})},docSidebar:function({sidebarId:e,label:t,docsPluginId:n,...r}){const{activeDoc:a}=(0,Oe.zK)(n),o=(0,Re.fW)(e,n).link;if(!o)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${e}" doesn't have anything to be linked to.`);return(0,u.jsx)(ye,{exact:!0,...r,isActive:()=>a?.sidebar===e,label:t??o.label,to:o.path})},docsVersion:function({label:e,to:t,docsPluginId:n,...r}){const a=(0,Re.Vd)(n)[0],o=e??a.label,i=t??(e=>e.docs.find((t=>t.id===e.mainDocId)))(a).path;return(0,u.jsx)(ye,{...r,label:o,to:i})},docsVersionDropdown:function({mobile:e,docsPluginId:t,dropdownActiveClassDisabled:n,dropdownItemsBefore:r,dropdownItemsAfter:a,versions:o,...i}){const{search:c,hash:d}=(0,l.zy)(),p=(0,Oe.zK)(t),{savePreferredVersionName:f}=(0,Ie.g1)(t),m=De({docsPluginId:t,configs:o}),h=function({docsPluginId:e,versionItems:t}){return(0,Re.Vd)(e).map((e=>t.find((t=>t.version===e)))).filter((e=>void 0!==e))[0]??t[0]}({docsPluginId:t,versionItems:m}),g=[...r,...m.map((function({version:e,label:t}){return{label:t,to:`${Fe(e,p).path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>f(e.name)}})),...a],y=e&&g.length>1?(0,s.T)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,b=e&&g.length>1?void 0:Fe(h.version,p).path;return g.length<=1?(0,u.jsx)(ye,{...i,mobile:e,label:y,to:b,isActive:n?()=>!1:void 0}):(0,u.jsx)(_e,{...i,mobile:e,label:y,to:b,items:g,isActive:n?()=>!1:void 0})}};function ze({type:e,...t}){const n=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(e,t),r=Me[n];if(!r)throw new Error(`No NavbarItem component found for type "${e}".`);return(0,u.jsx)(r,{...t})}function Be(){const e=(0,T.M)(),t=(0,w.p)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(ze,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function $e(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(s.A,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Ue(){const e=0===(0,w.p)().navbar.items.length,t=D();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)($e,{onClick:()=>t.hide()}),t.content]})}function He(){const e=(0,T.M)();return function(e=!0){(0,r.useEffect)((()=>(document.body.style.overflow=e?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[e])}(e.shown),e.shouldRender?(0,u.jsx)(z,{header:(0,u.jsx)(se,{}),primaryMenu:(0,u.jsx)(Be,{}),secondaryMenu:(0,u.jsx)(Ue,{})}):null}const qe={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Ge(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,a.A)("navbar-sidebar__backdrop",e.className)})}function Ve({children:e}){const{navbar:{hideOnScroll:t,style:n}}=(0,w.p)(),o=(0,T.M)(),{navbarRef:i,isNavbarVisible:l}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,j.Mq)((({scrollY:t},r)=>{if(!e)return;if(t<o.current)return void n(!0);if(a.current)return void(a.current=!1);const i=r?.scrollY,l=document.documentElement.scrollHeight-o.current,s=window.innerHeight;i&&t>=i?n(!1):t+s<l&&n(!0)})),(0,c.$)((t=>{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(t);return(0,u.jsxs)("nav",{ref:i,"aria-label":(0,s.T)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.A)(g.G.layout.navbar.container,"navbar","navbar--fixed-top",t&&[qe.navbarHideable,!l&&qe.navbarHidden],{"navbar--dark":"dark"===n,"navbar--primary":"primary"===n,"navbar-sidebar--show":o.shown}),children:[e,(0,u.jsx)(Ge,{onClick:o.toggle}),(0,u.jsx)(He,{})]})}var We=n(440);const Ke={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function Qe(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(s.A,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function Ye({error:e}){const t=(0,We.rA)(e).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Ke.errorBoundaryError,children:t})}class Xe extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const Ze="right";function Je({width:e=30,height:t=30,className:n,...r}){return(0,u.jsx)("svg",{className:n,width:e,height:t,viewBox:"0 0 30 30","aria-hidden":"true",...r,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function et(){const{toggle:e,shown:t}=(0,T.M)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,s.T)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(Je,{})})}const tt={colorModeToggle:"colorModeToggle_DEke"};function nt({items:e}){return(0,u.jsx)(u.Fragment,{children:e.map(((e,t)=>(0,u.jsx)(Xe,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(ze,{...e})},t)))})}function rt({left:e,right:t}){return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:(0,a.A)(g.G.layout.navbar.containerLeft,"navbar__items"),children:e}),(0,u.jsx)("div",{className:(0,a.A)(g.G.layout.navbar.containerRight,"navbar__items navbar__items--right"),children:t})]})}function at(){const e=(0,T.M)(),t=(0,w.p)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??Ze)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),a=t.find((e=>"search"===e.type));return(0,u.jsx)(rt,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(et,{}),(0,u.jsx)(ie,{}),(0,u.jsx)(nt,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(nt,{items:r}),(0,u.jsx)(ae,{className:tt.colorModeToggle}),!a&&(0,u.jsx)(Ne,{children:(0,u.jsx)(je.A,{})})]})})}function ot(){return(0,u.jsx)(Ve,{children:(0,u.jsx)(at,{})})}function it({item:e}){const{to:t,href:n,label:r,prependBaseUrlToHref:o,className:i,...l}=e,s=(0,ue.Ay)(t),c=(0,ue.Ay)(n,{forcePrependBaseUrl:!0});return(0,u.jsxs)(ce.A,{className:(0,a.A)("footer__link-item",i),...n?{href:o?c:n}:{to:s},...l,children:[r,n&&!(0,de.A)(n)&&(0,u.jsx)(fe.A,{})]})}function lt({item:e}){return e.html?(0,u.jsx)("li",{className:(0,a.A)("footer__item",e.className),dangerouslySetInnerHTML:{__html:e.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(it,{item:e})},e.href??e.to)}function st({column:e}){return(0,u.jsxs)("div",{className:(0,a.A)(g.G.layout.footer.column,"col footer__col",e.className),children:[(0,u.jsx)("div",{className:"footer__title",children:e.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:e.items.map(((e,t)=>(0,u.jsx)(lt,{item:e},t)))})]})}function ct({columns:e}){return(0,u.jsx)("div",{className:"row footer__links",children:e.map(((e,t)=>(0,u.jsx)(st,{column:e},t)))})}function ut(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function dt({item:e}){return e.html?(0,u.jsx)("span",{className:(0,a.A)("footer__link-item",e.className),dangerouslySetInnerHTML:{__html:e.html}}):(0,u.jsx)(it,{item:e})}function pt({links:e}){return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:e.map(((t,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(dt,{item:t}),e.length!==n+1&&(0,u.jsx)(ut,{})]},n)))})})}function ft({links:e}){return function(e){return"title"in e[0]}(e)?(0,u.jsx)(ct,{columns:e}):(0,u.jsx)(pt,{links:e})}var mt=n(1122);const ht="footerLogoLink_BH7S";function gt({logo:e}){const{withBaseUrl:t}=(0,ue.hH)(),n={light:t(e.src),dark:t(e.srcDark??e.src)};return(0,u.jsx)(mt.A,{className:(0,a.A)("footer__logo",e.className),alt:e.alt,sources:n,width:e.width,height:e.height,style:e.style})}function yt({logo:e}){return e.href?(0,u.jsx)(ce.A,{href:e.href,className:ht,target:e.target,children:(0,u.jsx)(gt,{logo:e})}):(0,u.jsx)(gt,{logo:e})}function bt({copyright:e}){return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:e}})}function vt({style:e,links:t,logo:n,copyright:r}){return(0,u.jsx)("footer",{className:(0,a.A)(g.G.layout.footer.container,"footer",{"footer--dark":"dark"===e}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[t,(n||r)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[n&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:n}),r]})]})})}function wt(){const{footer:e}=(0,w.p)();if(!e)return null;const{copyright:t,links:n,logo:r,style:a}=e;return(0,u.jsx)(vt,{style:a,links:n&&n.length>0&&(0,u.jsx)(ft,{links:n}),logo:r&&(0,u.jsx)(yt,{logo:r}),copyright:t&&(0,u.jsx)(bt,{copyright:t})})}const kt=r.memo(wt),St=(0,L.fM)([B.a,k.o,j.Tv,Ie.VQ,i.Jx,function({children:e}){return(0,u.jsx)(N.y_,{children:(0,u.jsx)(T.e,{children:(0,u.jsx)(R,{children:e})})})}]);function xt({children:e}){return(0,u.jsx)(St,{children:e})}var Et=n(1107);function At({error:e,tryAgain:t}){return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(Et.A,{as:"h1",className:"hero__title",children:(0,u.jsx)(s.A,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(Qe,{onClick:t,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(Ye,{error:e})})]})})})}const _t={mainWrapper:"mainWrapper_z2l0"};function Ct(e){const{children:t,noFooter:n,wrapperClassName:r,title:l,description:s}=e;return(0,y.J)(),(0,u.jsxs)(xt,{children:[(0,u.jsx)(i.be,{title:l,description:s}),(0,u.jsx)(v,{}),(0,u.jsx)(P,{}),(0,u.jsx)(ot,{}),(0,u.jsx)("div",{id:d,className:(0,a.A)(g.G.layout.main.container,g.G.wrapper.main,_t.mainWrapper,r),children:(0,u.jsx)(o.A,{fallback:e=>(0,u.jsx)(At,{...e}),children:t})}),!n&&(0,u.jsx)(kt,{})]})}},1682:(e,t,n)=>{"use strict";function r(e,t=(e,t)=>e===t){return e.filter(((n,r)=>e.findIndex((e=>t(e,n)))!==r))}function a(e){return Array.from(new Set(e))}n.d(t,{XI:()=>r,sb:()=>a})},1765:(e,t,n)=>{"use strict";n.d(t,{My:()=>C,f4:()=>ne});var r,a,o,i,l,s,c,u=n(6540),d=n(4164),p=Object.create,f=Object.defineProperty,m=Object.defineProperties,h=Object.getOwnPropertyDescriptor,g=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,S=(e,t,n)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,x=(e,t)=>{for(var n in t||(t={}))w.call(t,n)&&S(e,n,t[n]);if(b)for(var n of b(t))k.call(t,n)&&S(e,n,t[n]);return e},E=(e,t)=>m(e,g(t)),A=(e,t)=>{var n={};for(var r in e)w.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&b)for(var r of b(e))t.indexOf(r)<0&&k.call(e,r)&&(n[r]=e[r]);return n},_=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(t,n){var a,o;switch(n=n||{},r.util.type(t)){case"Object":if(o=r.util.objId(t),n[o])return n[o];for(var i in a={},n[o]=a,t)t.hasOwnProperty(i)&&(a[i]=e(t[i],n));return a;case"Array":return o=r.util.objId(t),n[o]?n[o]:(a=[],n[o]=a,t.forEach((function(t,r){a[r]=e(t,n)})),a);default:return t}},getLanguage:function(t){for(;t;){var n=e.exec(t.className);if(n)return n[1].toLowerCase();t=t.parentElement}return"none"},setLanguage:function(t,n){t.className=t.className.replace(RegExp(e,"gi"),""),t.classList.add("language-"+n)},isActive:function(e,t,n){for(var r="no-"+t;e;){var a=e.classList;if(a.contains(t))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!n}},languages:{plain:n,plaintext:n,text:n,txt:n,extend:function(e,t){var n=r.util.clone(r.languages[e]);for(var a in t)n[a]=t[a];return n},insertBefore:function(e,t,n,a){var o=(a=a||r.languages)[e],i={};for(var l in o)if(o.hasOwnProperty(l)){if(l==t)for(var s in n)n.hasOwnProperty(s)&&(i[s]=n[s]);n.hasOwnProperty(l)||(i[l]=o[l])}var c=a[e];return a[e]=i,r.languages.DFS(r.languages,(function(t,n){n===c&&t!=e&&(this[t]=i)})),i},DFS:function e(t,n,a,o){o=o||{};var i=r.util.objId;for(var l in t)if(t.hasOwnProperty(l)){n.call(t,l,t[l],a||l);var s=t[l],c=r.util.type(s);"Object"!==c||o[i(s)]?"Array"!==c||o[i(s)]||(o[i(s)]=!0,e(s,n,l,o)):(o[i(s)]=!0,e(s,n,null,o))}}},plugins:{},highlight:function(e,t,n){var o={code:e,grammar:t,language:n};if(r.hooks.run("before-tokenize",o),!o.grammar)throw new Error('The language "'+o.language+'" has no grammar.');return o.tokens=r.tokenize(o.code,o.grammar),r.hooks.run("after-tokenize",o),a.stringify(r.util.encode(o.tokens),o.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var r in n)t[r]=n[r];delete t.rest}var a=new l;return s(a,a.head,e),i(e,a,t,a.head,0),function(e){for(var t=[],n=e.head.next;n!==e.tail;)t.push(n.value),n=n.next;return t}(a)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var a,o=0;a=n[o++];)a(t)}},Token:a};function a(e,t,n,r){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length}function o(e,t,n,r){e.lastIndex=t;var a=e.exec(n);if(a&&r&&a[1]){var o=a[1].length;a.index+=o,a[0]=a[0].slice(o)}return a}function i(e,t,n,l,u,d){for(var p in n)if(n.hasOwnProperty(p)&&n[p]){var f=n[p];f=Array.isArray(f)?f:[f];for(var m=0;m<f.length;++m){if(d&&d.cause==p+","+m)return;var h=f[m],g=h.inside,y=!!h.lookbehind,b=!!h.greedy,v=h.alias;if(b&&!h.pattern.global){var w=h.pattern.toString().match(/[imsuy]*$/)[0];h.pattern=RegExp(h.pattern.source,w+"g")}for(var k=h.pattern||h,S=l.next,x=u;S!==t.tail&&!(d&&x>=d.reach);x+=S.value.length,S=S.next){var E=S.value;if(t.length>e.length)return;if(!(E instanceof a)){var A,_=1;if(b){if(!(A=o(k,x,e,y))||A.index>=e.length)break;var C=A.index,P=A.index+A[0].length,T=x;for(T+=S.value.length;C>=T;)T+=(S=S.next).value.length;if(x=T-=S.value.length,S.value instanceof a)continue;for(var j=S;j!==t.tail&&(T<P||"string"==typeof j.value);j=j.next)_++,T+=j.value.length;_--,E=e.slice(x,T),A.index-=x}else if(!(A=o(k,0,E,y)))continue;C=A.index;var L=A[0],N=E.slice(0,C),O=E.slice(C+L.length),R=x+E.length;d&&R>d.reach&&(d.reach=R);var I=S.prev;if(N&&(I=s(t,I,N),x+=N.length),c(t,I,_),S=s(t,I,new a(p,g?r.tokenize(L,g):L,v,L)),O&&s(t,S,O),_>1){var D={cause:p+","+m,reach:R};i(e,t,n,S.prev,x,D),d&&D.reach>d.reach&&(d.reach=D.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function c(e,t,n){for(var r=t.next,a=0;a<n&&r!==e.tail;a++)r=r.next;t.next=r,r.prev=t,e.length-=a}return a.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var a="";return t.forEach((function(t){a+=e(t,n)})),a}var o={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},i=t.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(o.classes,i):o.classes.push(i)),r.hooks.run("wrap",o);var l="";for(var s in o.attributes)l+=" "+s+'="'+(o.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+o.tag+' class="'+o.classes.join(" ")+'"'+l+">"+o.content+"</"+o.tag+">"},r}();t.exports=n,n.default=n}},function(){return a||(0,r[y(r)[0]])((a={exports:{}}).exports,a),a.exports}),C=((e,t,n)=>(n=null!=e?p(v(e)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of y(t))w.call(e,a)||a===n||f(e,a,{get:()=>t[a],enumerable:!(r=h(t,a))||r.enumerable});return e})(!t&&e&&e.__esModule?n:f(n,"default",{value:e,enumerable:!0}),e)))(_());C.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},C.languages.markup.tag.inside["attr-value"].inside.entity=C.languages.markup.entity,C.languages.markup.doctype.inside["internal-subset"].inside=C.languages.markup,C.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))})),Object.defineProperty(C.languages.markup.tag,"addInlined",{value:function(e,t){var n;(t=((n=((n={})["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:C.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i,{"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}}))["language-"+t]={pattern:/[\s\S]+/,inside:C.languages[t]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},C.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(C.languages.markup.tag,"addAttribute",{value:function(e,t){C.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:C.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),C.languages.html=C.languages.markup,C.languages.mathml=C.languages.markup,C.languages.svg=C.languages.markup,C.languages.xml=C.languages.extend("markup",{}),C.languages.ssml=C.languages.xml,C.languages.atom=C.languages.xml,C.languages.rss=C.languages.xml,o=C,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},s="(?:[^\\\\-]|"+(l=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",s=RegExp(s+"-"+s),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},o.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:s,inside:{escape:l,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:l}},"special-escape":i,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:l,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|<?[=!]|[idmnsuxU]+(?:-[idmnsuxU]+)?:?))?/,alias:"punctuation",inside:{"group-name":c}},{pattern:/\)/,alias:"punctuation"}],quantifier:{pattern:/(?:[+*?]|\{\d+(?:,\d*)?\})[?+]?/,alias:"number"},alternation:{pattern:/\|/,alias:"keyword"}},C.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},C.languages.javascript=C.languages.extend("clike",{"class-name":[C.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),C.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,C.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:C.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:C.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:C.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:C.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:C.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),C.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:C.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),C.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),C.languages.markup&&(C.languages.markup.tag.addInlined("script","javascript"),C.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),C.languages.js=C.languages.javascript,C.languages.actionscript=C.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<<?|>>?>?|[!=]=?)=?|[~?@]/}),C.languages.actionscript["class-name"].alias="function",delete C.languages.actionscript.parameter,delete C.languages.actionscript["literal-property"],C.languages.markup&&C.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:C.languages.markup}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(C),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){(t="string"==typeof t?[t]:t).forEach((function(t){var r=function(e){e.inside||(e.inside={}),e.inside.rest=n},a="doc-comment";if(o=e.languages[t]){var o,i=o[a];if((i=i||(o=e.languages.insertBefore(t,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[a])instanceof RegExp&&(i=o[a]={pattern:i}),Array.isArray(i))for(var l=0,s=i.length;l<s;l++)i[l]instanceof RegExp&&(i[l]={pattern:i[l]}),r(i[l]);else r(i)}}))}}),t.addSupport(["java","javascript","php"],t)}(C),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;(t=(e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:"+/[^;{\s"']|\s+(?!\s)/.source+"|"+t.source+")*?"+/(?:;|(?=\s*\{))/.source),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css,e.languages.markup))&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(C),function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,n=(t=(e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+t.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[t,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(C),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*/.source.replace(/<PLAIN>/g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<value>>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<<prop>>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\s*:\s)/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<key>>/g,(function(){return"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(C),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(/<inner>/g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,i=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n<r;n++){var a,o=t[n];"code"!==o.type?e(o.content):(a=o.content[1],o=o.content[3],a&&o&&"code-language"===a.type&&"code-block"===o.type&&"string"==typeof a.content&&(a=a.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),a="language-"+(a=(/[a-z][\w-]*/i.exec(a)||[""])[0].toLowerCase()),o.alias?"string"==typeof o.alias?o.alias=[o.alias,a]:o.alias.push(a):o.alias=[a]))}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",r=0,a=t.classes.length;r<a;r++){var o=t.classes[r];if(o=/language-(.+)/.exec(o)){n=o[1];break}}var c,u=e.languages[n];u?t.content=e.highlight(t.content.replace(i,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,t){var n;return"#"===(t=t.toLowerCase())[0]?(n="x"===t[1]?parseInt(t.slice(2),16):Number(t.slice(1)),s(n)):l[t]||e})),u,n):n&&"none"!==n&&e.plugins.autoloader&&(c="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random()),t.attributes.id=c,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(c);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))})))}})),RegExp(e.languages.markup.tag.pattern.source,"gi")),l={amp:"&",lt:"<",gt:">",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(C),C.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:C.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},C.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n<t.length;){var r=t[n++];if("keyword"===r.type&&"mutation"===r.content){var a=[];if(d(["definition-mutation","punctuation"])&&"("===u(1).content){n+=2;var o=p(/^\($/,/^\)$/);if(-1===o)continue;for(;n<o;n++){var i=u(0);"variable"===i.type&&(f(i,"variable-input"),a.push(i.content))}n=o+1}if(d(["punctuation","property-query"])&&"{"===u(0).content&&(n++,f(u(0),"property-mutation"),0<a.length)){var l=p(/^\{$/,/^\}$/);if(-1!==l)for(var s=n;s<l;s++){var c=t[s];"variable"===c.type&&0<=a.indexOf(c.content)&&f(c,"variable-input")}}}}function u(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n<e.length;n++){var r=u(n+t);if(!r||r.type!==e[n])return}return 1}function p(e,r){for(var a=1,o=n;o<t.length;o++){var i=t[o],l=i.content;if("punctuation"===i.type&&"string"==typeof l)if(e.test(l))a++;else if(r.test(l)&&0===--a)return o}return-1}function f(e,t){var n=e.alias;n?Array.isArray(n)||(e.alias=n=[n]):e.alias=n=[],n.push(t)}})),C.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},identifier:{pattern:/(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,greedy:!0,lookbehind:!0,inside:{punctuation:/^`|`$/}},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:FALSE|NULL|TRUE)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}function s(t,n,i){var s=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),c=0,u={},d=(s=l(s.map((function(e){if("string"==typeof e)return e;var n,r;for(e=e.content;-1!==t.indexOf((r=c++,n="___"+i.toUpperCase()+"_"+r+"___")););return u[n]=e,n})).join(""),n,i),Object.keys(u));return c=0,function t(n){for(var o=0;o<n.length;o++){if(c>=d.length)return;var i,s,p,f,m,h,g,y=n[o];"string"==typeof y||"string"==typeof y.content?(i=d[c],-1!==(g=(h="string"==typeof y?y:y.content).indexOf(i))&&(++c,s=h.substring(0,g),m=u[i],p=void 0,(f={})["interpolation-punctuation"]=a,3===(f=e.tokenize(m,f)).length&&((p=[1,1]).push.apply(p,l(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,m),f=h.substring(g+i.length),m=[],s&&m.push(s),m.push(p),f&&(t(h=[f]),m.push.apply(m,h)),"string"==typeof y?(n.splice.apply(n,[o,1].concat(m)),o+=m.length-1):y.content=m)):(g=y.content,Array.isArray(g)?t(g):t([g]))}}(s),new e.Token(i,s,"language-"+i,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in c&&function t(n){for(var r=0,a=n.length;r<a;r++){var o,i,l,c=n[r];"string"!=typeof c&&(o=c.content,Array.isArray(o)?"template-string"===c.type?(c=o[1],3===o.length&&"string"!=typeof c&&"embedded-code"===c.type&&(i=u(c),c=c.alias,c=Array.isArray(c)?c[0]:c,l=e.languages[c])&&(o[1]=s(i,l,c))):t(o):"string"!=typeof o&&t([o]))}}(t.tokens)}))}(C),function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(C),function(e){var t=e.languages.javascript,n=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(r+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(r+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:<TYPE>\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(/<TYPE>/g,(function(){return n}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{string:t.string,number:t.number,boolean:t.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(C),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(C),C.languages.n4js=C.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),C.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),C.languages.n4jsd=C.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(/<ID>/g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:<ID>(?:\s*,\s*(?:\*\s*as\s+<ID>|\{[^{}]*\}))?|\*\s*as\s+<ID>|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+<ID>)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?<ID>/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r<n.length;r++){var a=n[r],o=e.languages.javascript[a];a=(o="RegExp"===e.util.type(o)?e.languages.javascript[a]={pattern:o}:o).inside||{};(o.inside=a)["maybe-class-name"]=/^[A-Z][\s\S]*/}}(C),function(e){var t=e.util.clone(e.languages.javascript),n=/(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,r=/(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,a=/(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;function o(e,t){return e=e.replace(/<S>/g,(function(){return n})).replace(/<BRACES>/g,(function(){return r})).replace(/<SPREAD>/g,(function(){return a})),RegExp(e,t)}function i(t){for(var n=[],r=0;r<t.length;r++){var a=t[r],o=!1;"string"!=typeof a&&("tag"===a.type&&a.content[0]&&"tag"===a.content[0].type?"</"===a.content[0].content[0].content?0<n.length&&n[n.length-1].tagName===l(a.content[0].content[1])&&n.pop():"/>"!==a.content[a.content.length-1].content&&n.push({tagName:l(a.content[0].content[1]),openedBraces:0}):0<n.length&&"punctuation"===a.type&&"{"===a.content?n[n.length-1].openedBraces++:0<n.length&&0<n[n.length-1].openedBraces&&"punctuation"===a.type&&"}"===a.content?n[n.length-1].openedBraces--:o=!0),(o||"string"==typeof a)&&0<n.length&&0===n[n.length-1].openedBraces&&(o=l(a),r<t.length-1&&("string"==typeof t[r+1]||"plain-text"===t[r+1].type)&&(o+=l(t[r+1]),t.splice(r+1,1)),0<r&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(o=l(t[r-1])+o,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",o,null,o)),a.content&&"string"!=typeof a.content&&i(a.content)}}a=o(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(/<SPREAD>/.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=<BRACES>/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var l=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(l).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(C),function(e){var t=e.util.clone(e.languages.typescript);(t=(e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(C),C.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp(/(^|[^"#])/.source+"(?:"+/"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source+"|"+/"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source+")"+/(?!["#])/.source),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp(/(^|[^"#])(#+)/.source+"(?:"+/"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source+"|"+/"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source+")\\2"),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp(/#/.source+"(?:"+/(?:elseif|if)\b/.source+"(?:[ \t]*"+/(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/.source+")+|"+/(?:else|endif)\b/.source+")"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},C.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=C.languages.swift})),function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"];var t={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:e.languages.kotlin}};e.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:t},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:t},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete e.languages.kotlin.string,e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(C),C.languages.c=C.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),C.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),C.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},C.languages.c.string],char:C.languages.c.char,comment:C.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:C.languages.c}}}}),C.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete C.languages.c.boolean,C.languages.objectivec=C.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete C.languages.objectivec["class-name"],C.languages.objc=C.languages.objectivec,C.languages.reason=C.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),C.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete C.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|<self>)*\*\//.source,n=0;n<2;n++)t=t.replace(/<self>/g,(function(){return t}));t=t.replace(/<self>/g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<<?=?|>>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(C),C.languages.go=C.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),C.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete C.languages.go["class-name"],function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!<keyword>)\w+/.source.replace(/<keyword>/g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/<mod-name>(?:\s*:\s*<mod-name>)?|:\s*<mod-name>/.source.replace(/<mod-name>/g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(C),C.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},C.languages.python["string-interpolation"].inside.interpolation.inside.rest=C.languages.python,C.languages.py=C.languages.python,C.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},C.languages.webmanifest=C.languages.json;((e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>P,duotoneDark:()=>T,duotoneLight:()=>j,github:()=>L,gruvboxMaterialDark:()=>K,gruvboxMaterialLight:()=>Q,jettwaveDark:()=>q,jettwaveLight:()=>G,nightOwl:()=>N,nightOwlLight:()=>O,oceanicNext:()=>D,okaidia:()=>F,oneDark:()=>V,oneLight:()=>W,palenight:()=>M,shadesOfPurple:()=>z,synthwave84:()=>B,ultramin:()=>$,vsDark:()=>U,vsLight:()=>H});var P={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},T={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},j={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},L={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},N={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},O={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},R="#c5a5c5",I="#8dc891",D={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:R}},{types:["attr-value"],style:{color:I}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:I}},{types:["punctuation"],style:{color:I}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:R}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},F={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},M={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},z={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},B={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},$={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},U={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},H={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},q={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},G={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},V={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},W={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},K={plain:{color:"#ebdbb2",backgroundColor:"#292828"},styles:[{types:["imports","class-name","maybe-class-name","constant","doctype","builtin","function"],style:{color:"#d8a657"}},{types:["property-access"],style:{color:"#7daea3"}},{types:["tag"],style:{color:"#e78a4e"}},{types:["attr-name","char","url","regex"],style:{color:"#a9b665"}},{types:["attr-value","string"],style:{color:"#89b482"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#ea6962"}},{types:["entity","number","symbol"],style:{color:"#d3869b"}}]},Q={plain:{color:"#654735",backgroundColor:"#f9f5d7"},styles:[{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#af2528"}},{types:["imports","class-name","maybe-class-name","constant","doctype","builtin"],style:{color:"#b4730e"}},{types:["string","attr-value"],style:{color:"#477a5b"}},{types:["property-access"],style:{color:"#266b79"}},{types:["function","attr-name","char","url"],style:{color:"#72761e"}},{types:["tag"],style:{color:"#b94c07"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["entity","number","symbol"],style:{color:"#924f79"}}]},Y=/\r\n|\r|\n/,X=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},Z=(e,t)=>{const n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},J=e=>{const t=[[]],n=[e],r=[0],a=[e.length];let o=0,i=0,l=[];const s=[l];for(;i>-1;){for(;(o=r[i]++)<a[i];){let e,c=t[i];const u=n[i][o];if("string"==typeof u?(c=i>0?c:["plain"],e=u):(c=Z(c,u.type),u.alias&&(c=Z(c,u.alias)),e=u.content),"string"!=typeof e){i++,t.push(c),n.push(e),r.push(0),a.push(e.length);continue}const d=e.split(Y),p=d.length;l.push({types:c,content:d[0]});for(let t=1;t<p;t++)X(l),s.push(l=[]),l.push({types:c,content:d[t]})}i--,t.pop(),n.pop(),r.pop(),a.pop()}return X(l),s},ee=(e,t)=>{const{plain:n}=e,r=e.styles.reduce(((e,n)=>{const{languages:r,style:a}=n;return r&&!r.includes(t)||n.types.forEach((t=>{const n=x(x({},e[t]),a);e[t]=n})),e}),{});return r.root=n,r.plain=E(x({},n),{backgroundColor:void 0}),r},te=({children:e,language:t,code:n,theme:r,prism:a})=>{const o=t.toLowerCase(),i=ee(r,o),l=(e=>(0,u.useCallback)((t=>{var n=t,{className:r,style:a,line:o}=n,i=A(n,["className","style","line"]);const l=E(x({},i),{className:(0,d.A)("token-line",r)});return"object"==typeof e&&"plain"in e&&(l.style=e.plain),"object"==typeof a&&(l.style=x(x({},l.style||{}),a)),l}),[e]))(i),s=(e=>{const t=(0,u.useCallback)((({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map((t=>e[t])))}),[e]);return(0,u.useCallback)((e=>{var n=e,{token:r,className:a,style:o}=n,i=A(n,["token","className","style"]);const l=E(x({},i),{className:(0,d.A)("token",...r.types,a),children:r.content,style:t(r)});return null!=o&&(l.style=x(x({},l.style||{}),o)),l}),[t])})(i),c=(({prism:e,code:t,grammar:n,language:r})=>(0,u.useMemo)((()=>{if(null==n)return J([t]);const a={code:t,grammar:n,language:r,tokens:[]};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(t,n),e.hooks.run("after-tokenize",a),J(a.tokens)}),[t,n,r,e]))({prism:a,language:o,code:n,grammar:a.languages[o]});return e({tokens:c,className:`prism-code language-${o}`,style:null!=i?i.root:{},getLineProps:l,getTokenProps:s})},ne=e=>(0,u.createElement)(te,E(x({},e),{prism:e.prism||C,theme:e.theme||U,code:e.code,language:e.language}))},2069:(e,t,n)=>{"use strict";n.d(t,{M:()=>m,e:()=>f});var r=n(6540),a=n(5600),o=n(4581),i=n(7485),l=n(6342),s=n(9532),c=n(4848);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,a.YL)(),{items:t}=(0,l.p)().navbar;return 0===t.length&&!e.component}(),t=(0,o.l)(),n=!e&&"mobile"===t,[i,s]=(0,r.useState)(!1),c=(0,r.useCallback)((()=>{s((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&s(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:c,shown:i})),[e,n,c,i])}function p({handler:e}){return(0,i.$Z)(e),null}function f({children:e}){const t=d();return(0,c.jsxs)(c.Fragment,{children:[t.shown&&(0,c.jsx)(p,{handler:()=>(t.toggle(),!1)}),(0,c.jsx)(u.Provider,{value:t,children:e})]})}function m(){const e=r.useContext(u);if(void 0===e)throw new s.dV("NavbarMobileSidebarProvider");return e}},2131:(e,t,n)=>{"use strict";n.d(t,{o:()=>i});var r=n(4586),a=n(6347),o=n(440);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:l}}=(0,r.A)(),{pathname:s}=(0,a.zy)(),c=(0,o.Ks)(s,{trailingSlash:n,baseUrl:e}),u=l===i?e:e.replace(`/${l}/`,"/"),d=c.replace(e,"");return{createUrl:function({locale:e,fullyQualified:n}){return`${n?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(e)}${d}`}}}},2303:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=n(6540),a=n(6125);function o(){return(0,r.useContext)(a.o)}},2566:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){if(""===t)return e;return e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},2654:e=>{"use strict";e.exports={}},2694:(e,t,n)=>{"use strict";var r=n(6925);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},2799:(e,t)=>{"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,a=n?Symbol.for("react.portal"):60106,o=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,l=n?Symbol.for("react.profiler"):60114,s=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,u=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,p=n?Symbol.for("react.forward_ref"):60112,f=n?Symbol.for("react.suspense"):60113,m=n?Symbol.for("react.suspense_list"):60120,h=n?Symbol.for("react.memo"):60115,g=n?Symbol.for("react.lazy"):60116,y=n?Symbol.for("react.block"):60121,b=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case u:case d:case o:case l:case i:case f:return e;default:switch(e=e&&e.$$typeof){case c:case p:case g:case h:case s:return e;default:return t}}case a:return t}}}function S(e){return k(e)===d}t.AsyncMode=u,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=s,t.Element=r,t.ForwardRef=p,t.Fragment=o,t.Lazy=g,t.Memo=h,t.Portal=a,t.Profiler=l,t.StrictMode=i,t.Suspense=f,t.isAsyncMode=function(e){return S(e)||k(e)===u},t.isConcurrentMode=S,t.isContextConsumer=function(e){return k(e)===c},t.isContextProvider=function(e){return k(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===o},t.isLazy=function(e){return k(e)===g},t.isMemo=function(e){return k(e)===h},t.isPortal=function(e){return k(e)===a},t.isProfiler=function(e){return k(e)===l},t.isStrictMode=function(e){return k(e)===i},t.isSuspense=function(e){return k(e)===f},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===d||e===l||e===i||e===f||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===h||e.$$typeof===s||e.$$typeof===c||e.$$typeof===p||e.$$typeof===b||e.$$typeof===v||e.$$typeof===w||e.$$typeof===y)},t.typeOf=k},2831:(e,t,n)=>{"use strict";n.d(t,{u:()=>i,v:()=>l});var r=n(6347),a=n(8168),o=n(6540);function i(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var a=e.path?(0,r.B6)(t,e):n.length?n[n.length-1].match:r.Ix.computeRootMatch(t);return a&&(n.push({route:e,match:a}),e.routes&&i(e.routes,t,n)),a})),n}function l(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?o.createElement(r.dO,n,e.map((function(e,n){return o.createElement(r.qh,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render((0,a.A)({},n,{},t,{route:e})):o.createElement(e.component,(0,a.A)({},n,t,{route:e}))}})}))):null}},2833:e=>{e.exports=function(e,t,n,r){var a=n?n.call(r,e,t):void 0;if(void 0!==a)return!!a;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var o=Object.keys(e),i=Object.keys(t);if(o.length!==i.length)return!1;for(var l=Object.prototype.hasOwnProperty.bind(t),s=0;s<o.length;s++){var c=o[s];if(!l(c))return!1;var u=e[c],d=t[c];if(!1===(a=n?n.call(r,u,d,c):void 0)||void 0===a&&u!==d)return!1}return!0}},2892:(e,t,n)=>{"use strict";function r(e,t){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},r(e,t)}function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}n.d(t,{A:()=>a})},2983:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=a,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),l="/"===i||i===r?i:(s=i,c=n,c?a(s):o(s));var s,c;return e.replace(i,l)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=o;const r=n(2566);function a(e){return e.endsWith("/")?e:`${e}/`}function o(e){return(0,r.removeSuffix)(e,"/")}},3025:(e,t,n)=>{"use strict";n.d(t,{n:()=>l,r:()=>s});var r=n(6540),a=n(9532),o=n(4848);const i=r.createContext(null);function l({children:e,version:t}){return(0,o.jsx)(i.Provider,{value:t,children:e})}function s(){const e=(0,r.useContext)(i);if(null===e)throw new a.dV("DocsVersionProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{W:()=>i,o:()=>o});var r=n(6540),a=n(4848);const o=r.createContext(null);function i({children:e,value:t}){const n=r.useContext(o),i=(0,r.useMemo)((()=>function({parent:e,value:t}){if(!e){if(!t)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in t))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return t}const n={...e.data,...t?.data};return{plugin:e.plugin,data:n}}({parent:n,value:t})),[n,t]);return(0,a.jsx)(o.Provider,{value:i,children:e})}},3104:(e,t,n)=>{"use strict";n.d(t,{Mq:()=>f,Tv:()=>u,a_:()=>m,gk:()=>h});var r=n(6540),a=n(8193),o=n(2303),i=n(205),l=n(9532),s=n(4848);const c=r.createContext(void 0);function u({children:e}){const t=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,s.jsx)(c.Provider,{value:t,children:e})}function d(){const e=(0,r.useContext)(c);if(null==e)throw new l.dV("ScrollControllerProvider");return e}const p=()=>a.A.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function f(e,t=[]){const{scrollEventsEnabledRef:n}=d(),a=(0,r.useRef)(p()),o=(0,l._q)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=p();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function m(){const e=d(),t=function(){const e=(0,r.useRef)({elem:null,top:0}),t=(0,r.useCallback)((t=>{e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,r.useCallback)((()=>{const{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};const r=t.getBoundingClientRect().top-n;return r&&window.scrollBy({left:0,top:r}),e.current={elem:null,top:0},{restored:0!==r}}),[]);return(0,r.useMemo)((()=>({save:t,restore:n})),[n,t])}(),n=(0,r.useRef)(void 0),a=(0,r.useCallback)((r=>{t.save(r),e.disableScrollEvents(),n.current=()=>{const{restored:r}=t.restore();if(n.current=void 0,r){const t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}}),[e,t]);return(0,i.A)((()=>{queueMicrotask((()=>n.current?.()))})),{blockElementScrollPositionUntilNextRender:a}}function h(){const e=(0,r.useRef)(null),t=(0,o.A)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&a<e)&&(t=requestAnimationFrame(r),window.scrollTo(0,Math.floor(.85*(a-e))+e))}(),()=>t&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},3109:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{O:()=>r})},3157:(e,t,n)=>{var r={"./":8722};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=3157},3186:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});n(6540);const r={iconExternalLink:"iconExternalLink_nPIU"};var a=n(4848);const o="#theme-svg-external-link";function i({width:e=13.5,height:t=13.5}){return(0,a.jsx)("svg",{width:e,height:t,"aria-hidden":"true",className:r.iconExternalLink,children:(0,a.jsx)("use",{href:o})})}},3259:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}var l=n(6540),s=[],c=[];var u=l.createContext(null);function d(e){var t=e(),n={loading:!0,loaded:null,error:null};return n.promise=t.then((function(e){return n.loading=!1,n.loaded=e,e})).catch((function(e){throw n.loading=!1,n.error=e,e})),n}function p(e){var t={loading:!1,loaded:{},error:null},n=[];try{Object.keys(e).forEach((function(r){var a=d(e[r]);a.loading?t.loading=!0:(t.loaded[r]=a.loaded,t.error=a.error),n.push(a.promise),a.promise.then((function(e){t.loaded[r]=e})).catch((function(e){t.error=e}))}))}catch(r){t.error=r}return t.promise=Promise.all(n).then((function(e){return t.loading=!1,e})).catch((function(e){throw t.loading=!1,e})),t}function f(e,t){return l.createElement((n=e)&&n.__esModule?n.default:n,t);var n}function m(e,t){var d,p;if(!t.loading)throw new Error("react-loadable requires a `loading` component");var m=i({loader:null,loading:null,delay:200,timeout:null,render:f,webpack:null,modules:null},t),h=null;function g(){return h||(h=e(m.loader)),h.promise}return s.push(g),"function"==typeof m.webpack&&c.push((function(){if((0,m.webpack)().every((function(e){return void 0!==e&&void 0!==n.m[e]})))return g()})),p=d=function(t){function n(n){var r;return o(a(a(r=t.call(this,n)||this)),"retry",(function(){r.setState({error:null,loading:!0,timedOut:!1}),h=e(m.loader),r._loadModule()})),g(),r.state={error:h.error,pastDelay:!1,timedOut:!1,loading:h.loading,loaded:h.loaded},r}r(n,t),n.preload=function(){return g()};var i=n.prototype;return i.UNSAFE_componentWillMount=function(){this._loadModule()},i.componentDidMount=function(){this._mounted=!0},i._loadModule=function(){var e=this;if(this.context&&Array.isArray(m.modules)&&m.modules.forEach((function(t){e.context.report(t)})),h.loading){var t=function(t){e._mounted&&e.setState(t)};"number"==typeof m.delay&&(0===m.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){t({pastDelay:!0})}),m.delay)),"number"==typeof m.timeout&&(this._timeout=setTimeout((function(){t({timedOut:!0})}),m.timeout));var n=function(){t({error:h.error,loaded:h.loaded,loading:h.loading}),e._clearTimeouts()};h.promise.then((function(){return n(),null})).catch((function(e){return n(),null}))}},i.componentWillUnmount=function(){this._mounted=!1,this._clearTimeouts()},i._clearTimeouts=function(){clearTimeout(this._delay),clearTimeout(this._timeout)},i.render=function(){return this.state.loading||this.state.error?l.createElement(m.loading,{isLoading:this.state.loading,pastDelay:this.state.pastDelay,timedOut:this.state.timedOut,error:this.state.error,retry:this.retry}):this.state.loaded?m.render(this.state.loaded,this.props):null},n}(l.Component),o(d,"contextType",u),p}function h(e){return m(d,e)}h.Map=function(e){if("function"!=typeof e.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return m(p,e)};var g=function(e){function t(){return e.apply(this,arguments)||this}return r(t,e),t.prototype.render=function(){return l.createElement(u.Provider,{value:{report:this.props.report}},l.Children.only(this.props.children))},t}(l.Component);function y(e){for(var t=[];e.length;){var n=e.pop();t.push(n())}return Promise.all(t).then((function(){if(e.length)return y(e)}))}h.Capture=g,h.preloadAll=function(){return new Promise((function(e,t){y(s).then(e,t)}))},h.preloadReady=function(){return new Promise((function(e,t){y(c).then(e,e)}))},e.exports=h},3427:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});var r=n(6540);n(4848);const a=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),o=()=>(0,r.useContext)(a);function i(){return o()}},3465:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(8774),a=n(6025),o=n(4586),i=n(6342),l=n(1122),s=n(4848);function c({logo:e,alt:t,imageClassName:n}){const r={light:(0,a.Ay)(e.src),dark:(0,a.Ay)(e.srcDark||e.src)},o=(0,s.jsx)(l.A,{className:e.className,sources:r,height:e.height,width:e.width,alt:t,style:e.style});return n?(0,s.jsx)("div",{className:n,children:o}):o}function u(e){const{siteConfig:{title:t}}=(0,o.A)(),{navbar:{title:n,logo:l}}=(0,i.p)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,a.Ay)(l?.href||"/"),m=n?"":t,h=l?.alt??m;return(0,s.jsxs)(r.A,{to:f,...p,...l?.target&&{target:l.target},children:[l&&(0,s.jsx)(c,{logo:l,alt:h,imageClassName:u}),null!=n&&(0,s.jsx)("b",{className:d,children:n})]})}},3886:(e,t,n)=>{"use strict";n.d(t,{VQ:()=>g,g1:()=>b});var r=n(6540),a=n(4070),o=n(7065),i=n(6342),l=n(679),s=n(9532),c=n(4848);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,l.Wf)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,l.Wf)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,l.Wf)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function m(){const e=(0,a.Gy)(),t=(0,i.p)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{l(function({pluginIds:e,versionPersistence:t,allDocsData:n}){function r(e){const r=d.read(e,t);return n[e].versions.some((e=>e.name===r))?{preferredVersionName:r}:(d.clear(e,t),{preferredVersionName:null})}return Object.fromEntries(e.map((e=>[e,r(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h({children:e}){const t=m();return(0,c.jsx)(f.Provider,{value:t,children:e})}function g({children:e}){return(0,c.jsx)(h,{children:e})}function y(){const e=(0,r.useContext)(f);if(!e)throw new s.dV("DocsPreferredVersionContextProvider");return e}function b(e=o.W){const t=(0,a.ht)(e),[n,i]=y(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}},4054:e=>{"use strict";e.exports=JSON.parse('{"/reanimated-color-picker/docs-801":{"__comp":"5e95c892","__context":{"plugin":"aba21aa0"}},"/reanimated-color-picker/docs-214":{"__comp":"a7bd4aaa","__props":"c9dca19d"},"/reanimated-color-picker/docs-ec0":{"__comp":"a94703ab"},"/reanimated-color-picker/docs/API/ColorPicker-603":{"__comp":"17896441","content":"efeb2804"},"/reanimated-color-picker/docs/API/Panels/Panel1-b8e":{"__comp":"17896441","content":"a44a6861"},"/reanimated-color-picker/docs/API/Panels/Panel2-f21":{"__comp":"17896441","content":"2de8a64b"},"/reanimated-color-picker/docs/API/Panels/Panel3-c6b":{"__comp":"17896441","content":"63def8f5"},"/reanimated-color-picker/docs/API/Panels/Panel4-4bb":{"__comp":"17896441","content":"c23bd39a"},"/reanimated-color-picker/docs/API/Panels/Panel5-97d":{"__comp":"17896441","content":"8771582a"},"/reanimated-color-picker/docs/API/Preview/-78b":{"__comp":"17896441","content":"56316f3f"},"/reanimated-color-picker/docs/API/Preview/ExtraThumb-d5d":{"__comp":"17896441","content":"90e27583"},"/reanimated-color-picker/docs/API/Preview/InputWidget-691":{"__comp":"17896441","content":"2b9ac54a"},"/reanimated-color-picker/docs/API/Preview/PreviewText-979":{"__comp":"17896441","content":"126391be"},"/reanimated-color-picker/docs/API/Preview/Swatches-3f3":{"__comp":"17896441","content":"7166dec0"},"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider-e7f":{"__comp":"17896441","content":"79d873be"},"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider-6b2":{"__comp":"17896441","content":"e0d6e6dc"},"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider-a01":{"__comp":"17896441","content":"8d402cb0"},"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular-3f4":{"__comp":"17896441","content":"e73706c6"},"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider-969":{"__comp":"17896441","content":"ba30bb47"},"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular-366":{"__comp":"17896441","content":"9180b37b"},"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider-ae0":{"__comp":"17896441","content":"140a8099"},"/reanimated-color-picker/docs/API/Sliders/OpacitySlider-fc3":{"__comp":"17896441","content":"94e8e772"},"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider-2d6":{"__comp":"17896441","content":"932438b4"},"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider-0dd":{"__comp":"17896441","content":"9edb15d8"},"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider-3de":{"__comp":"17896441","content":"58a57edf"},"/reanimated-color-picker/docs/category/api-9dd":{"__comp":"14eb3368","__props":"da90494d"},"/reanimated-color-picker/docs/category/hsb-83b":{"__comp":"14eb3368","__props":"84f4edb4"},"/reanimated-color-picker/docs/category/hsl-a61":{"__comp":"14eb3368","__props":"dabf05c1"},"/reanimated-color-picker/docs/category/hue-530":{"__comp":"14eb3368","__props":"42602a95"},"/reanimated-color-picker/docs/category/panels-492":{"__comp":"14eb3368","__props":"1e2bc623"},"/reanimated-color-picker/docs/category/preview-8d8":{"__comp":"14eb3368","__props":"f299953f"},"/reanimated-color-picker/docs/category/rgb-fee":{"__comp":"14eb3368","__props":"0489dd59"},"/reanimated-color-picker/docs/category/sliders-583":{"__comp":"14eb3368","__props":"2487527e"},"/reanimated-color-picker/docs/ColorKit-928":{"__comp":"17896441","content":"2fc6c5ee"},"/reanimated-color-picker/docs/Examples-f0f":{"__comp":"17896441","content":"8bf99691"},"/reanimated-color-picker/docs/Installation-92f":{"__comp":"17896441","content":"39eaec8f"},"/reanimated-color-picker/docs/intro-514":{"__comp":"17896441","content":"f8409a7e"},"/reanimated-color-picker/docs/Usage-c9e":{"__comp":"17896441","content":"bf417703"},"/reanimated-color-picker/-697":{"__comp":"c4f5d8e4","__context":{"plugin":"a7456010"},"config":"5e9f5e1a"}}')},4070:(e,t,n)=>{"use strict";n.d(t,{zK:()=>h,vT:()=>p,Gy:()=>u,HW:()=>g,ht:()=>d,r7:()=>m,jh:()=>f});var r=n(6347),a=n(4586),o=n(7065);function i(e,t={}){const n=function(){const{globalData:e}=(0,a.A)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=function(e,t){return[...e.versions].sort(((e,t)=>e.path===t.path?0:e.path.includes(t.path)?-1:t.path.includes(e.path)?1:0)).find((e=>!!(0,r.B6)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),a=n?.docs.find((e=>!!(0,r.B6)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const c={},u=()=>i("docusaurus-plugin-content-docs")??c,d=e=>{try{return function(e,t=o.W,n={}){const r=i(e),a=r?.[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function p(e={}){const t=u(),{pathname:n}=(0,r.zy)();return function(e,t,n={}){const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((([,e])=>!!(0,r.B6)(t,{path:e.path,exact:!1,strict:!1}))),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return o}(t,n,e)}function f(e){return d(e).versions}function m(e){const t=d(e);return l(t)}function h(e){const t=d(e),{pathname:n}=(0,r.zy)();return s(t,n)}function g(e){const t=d(e),{pathname:n}=(0,r.zy)();return function(e,t){const n=l(e);return{latestDocSuggestion:s(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},4090:(e,t,n)=>{"use strict";n.d(t,{w:()=>a,J:()=>o});var r=n(6540);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},4146:(e,t,n)=>{"use strict";var r=n(4363),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var l=s(t),h=s(n),g=0;g<i.length;++g){var y=i[g];if(!(o[y]||r&&r[y]||h&&h[y]||l&&l[y])){var b=p(n,y);try{c(t,y,b)}catch(v){}}}}return t}},4164:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(n=r(e[t]))&&(a&&(a+=" "),a+=n)}else for(n in e)e[n]&&(a&&(a+=" "),a+=n);return a}n.d(t,{A:()=>a});const a=function(){for(var e,t,n=0,a="",o=arguments.length;n<o;n++)(e=arguments[n])&&(t=r(e))&&(a&&(a+=" "),a+=t);return a}},4363:(e,t,n)=>{"use strict";e.exports=n(2799)},4477:(e,t)=>{"use strict";function n(e,t){var n=e.length;e.push(t);e:for(;0<n;){var r=n-1>>>1,a=e[r];if(!(0<o(a,t)))break e;e[r]=t,e[n]=a,n=r}}function r(e){return 0===e.length?null:e[0]}function a(e){if(0===e.length)return null;var t=e[0],n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,a=e.length,i=a>>>1;r<i;){var l=2*(r+1)-1,s=e[l],c=l+1,u=e[c];if(0>o(s,n))c<a&&0>o(u,s)?(e[r]=u,e[c]=n,r=c):(e[r]=s,e[l]=n,r=l);else{if(!(c<a&&0>o(u,n)))break e;e[r]=u,e[c]=n,r=c}}}return t}function o(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if(t.unstable_now=void 0,"object"==typeof performance&&"function"==typeof performance.now){var i=performance;t.unstable_now=function(){return i.now()}}else{var l=Date,s=l.now();t.unstable_now=function(){return l.now()-s}}var c=[],u=[],d=1,p=null,f=3,m=!1,h=!1,g=!1,y=!1,b="function"==typeof setTimeout?setTimeout:null,v="function"==typeof clearTimeout?clearTimeout:null,w="undefined"!=typeof setImmediate?setImmediate:null;function k(e){for(var t=r(u);null!==t;){if(null===t.callback)a(u);else{if(!(t.startTime<=e))break;a(u),t.sortIndex=t.expirationTime,n(c,t)}t=r(u)}}function S(e){if(g=!1,k(e),!h)if(null!==r(c))h=!0,E||(E=!0,x());else{var t=r(u);null!==t&&N(S,t.startTime-e)}}var x,E=!1,A=-1,_=5,C=-1;function P(){return!!y||!(t.unstable_now()-C<_)}function T(){if(y=!1,E){var e=t.unstable_now();C=e;var n=!0;try{e:{h=!1,g&&(g=!1,v(A),A=-1),m=!0;var o=f;try{t:{for(k(e),p=r(c);null!==p&&!(p.expirationTime>e&&P());){var i=p.callback;if("function"==typeof i){p.callback=null,f=p.priorityLevel;var l=i(p.expirationTime<=e);if(e=t.unstable_now(),"function"==typeof l){p.callback=l,k(e),n=!0;break t}p===r(c)&&a(c),k(e)}else a(c);p=r(c)}if(null!==p)n=!0;else{var s=r(u);null!==s&&N(S,s.startTime-e),n=!1}}break e}finally{p=null,f=o,m=!1}n=void 0}}finally{n?x():E=!1}}}if("function"==typeof w)x=function(){w(T)};else if("undefined"!=typeof MessageChannel){var j=new MessageChannel,L=j.port2;j.port1.onmessage=T,x=function(){L.postMessage(null)}}else x=function(){b(T,0)};function N(e,n){A=b((function(){e(t.unstable_now())}),n)}t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):_=0<e?Math.floor(1e3/e):5},t.unstable_getCurrentPriorityLevel=function(){return f},t.unstable_next=function(e){switch(f){case 1:case 2:case 3:var t=3;break;default:t=f}var n=f;f=t;try{return e()}finally{f=n}},t.unstable_requestPaint=function(){y=!0},t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=f;f=e;try{return t()}finally{f=n}},t.unstable_scheduleCallback=function(e,a,o){var i=t.unstable_now();switch("object"==typeof o&&null!==o?o="number"==typeof(o=o.delay)&&0<o?i+o:i:o=i,e){case 1:var l=-1;break;case 2:l=250;break;case 5:l=1073741823;break;case 4:l=1e4;break;default:l=5e3}return e={id:d++,callback:a,priorityLevel:e,startTime:o,expirationTime:l=o+l,sortIndex:-1},o>i?(e.sortIndex=o,n(u,e),null===r(c)&&e===r(u)&&(g?(v(A),A=-1):g=!0,N(S,o-i))):(e.sortIndex=l,n(c,e),h||m||(h=!0,E||(E=!0,x()))),e},t.unstable_shouldYield=P,t.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}},4563:(e,t,n)=>{"use strict";n.d(t,{AL:()=>u,s$:()=>d});var r=n(6540),a=n(4586),o=n(6803),i=n(9532),l=n(4848);const s=({title:e,siteTitle:t,titleDelimiter:n})=>{const r=e?.trim();return r&&r!==t?`${r} ${n} ${t}`:t},c=(0,r.createContext)(null);function u({formatter:e,children:t}){return(0,l.jsx)(c.Provider,{value:e,children:t})}function d(){const e=function(){const e=(0,r.useContext)(c);if(null===e)throw new i.dV("TitleFormatterProvider");return e}(),{siteConfig:t}=(0,a.A)(),{title:n,titleDelimiter:l}=t,{plugin:u}=(0,o.A)();return{format:t=>e({title:t,siteTitle:n,titleDelimiter:l,plugin:u,defaultFormatter:s})}}},4581:(e,t,n)=>{"use strict";n.d(t,{l:()=>l});var r=n(6540),a=n(8193);const o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l({desktopBreakpoint:e=i}={}){const[t,n]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function t(){n(function(e){if(!a.A.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?o.desktop:o.mobile}(e))}return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}},4586:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=n(6540),a=n(6988);function o(){return(0,r.useContext)(a.o)}},4625:(e,t,n)=>{"use strict";n.d(t,{I9:()=>d,Kd:()=>u,N_:()=>y,k2:()=>w});var r=n(6347),a=n(2892),o=n(6540),i=n(1513),l=n(8168),s=n(8587),c=n(1561),u=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];return(t=e.call.apply(e,[this].concat(r))||this).history=(0,i.zR)(t.props),t}return(0,a.A)(t,e),t.prototype.render=function(){return o.createElement(r.Ix,{history:this.history,children:this.props.children})},t}(o.Component);var d=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];return(t=e.call.apply(e,[this].concat(r))||this).history=(0,i.TM)(t.props),t}return(0,a.A)(t,e),t.prototype.render=function(){return o.createElement(r.Ix,{history:this.history,children:this.props.children})},t}(o.Component);var p=function(e,t){return"function"==typeof e?e(t):e},f=function(e,t){return"string"==typeof e?(0,i.yJ)(e,null,null,t):e},m=function(e){return e},h=o.forwardRef;void 0===h&&(h=m);var g=h((function(e,t){var n=e.innerRef,r=e.navigate,a=e.onClick,i=(0,s.A)(e,["innerRef","navigate","onClick"]),c=i.target,u=(0,l.A)({},i,{onClick:function(e){try{a&&a(e)}catch(t){throw e.preventDefault(),t}e.defaultPrevented||0!==e.button||c&&"_self"!==c||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e)||(e.preventDefault(),r())}});return u.ref=m!==h&&t||n,o.createElement("a",u)}));var y=h((function(e,t){var n=e.component,a=void 0===n?g:n,u=e.replace,d=e.to,y=e.innerRef,b=(0,s.A)(e,["component","replace","to","innerRef"]);return o.createElement(r.XZ.Consumer,null,(function(e){e||(0,c.A)(!1);var n=e.history,r=f(p(d,e.location),e.location),s=r?n.createHref(r):"",g=(0,l.A)({},b,{href:s,navigate:function(){var t=p(d,e.location),r=(0,i.AO)(e.location)===(0,i.AO)(f(t));(u||r?n.replace:n.push)(t)}});return m!==h?g.ref=t||y:g.innerRef=y,o.createElement(a,g)}))})),b=function(e){return e},v=o.forwardRef;void 0===v&&(v=b);var w=v((function(e,t){var n=e["aria-current"],a=void 0===n?"page":n,i=e.activeClassName,u=void 0===i?"active":i,d=e.activeStyle,m=e.className,h=e.exact,g=e.isActive,w=e.location,k=e.sensitive,S=e.strict,x=e.style,E=e.to,A=e.innerRef,_=(0,s.A)(e,["aria-current","activeClassName","activeStyle","className","exact","isActive","location","sensitive","strict","style","to","innerRef"]);return o.createElement(r.XZ.Consumer,null,(function(e){e||(0,c.A)(!1);var n=w||e.location,i=f(p(E,n),n),s=i.pathname,C=s&&s.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1"),P=C?(0,r.B6)(n.pathname,{path:C,exact:h,sensitive:k,strict:S}):null,T=!!(g?g(P,n):P),j="function"==typeof m?m(T):m,L="function"==typeof x?x(T):x;T&&(j=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return e})).join(" ")}(j,u),L=(0,l.A)({},L,d));var N=(0,l.A)({"aria-current":T&&a||null,className:j,style:L,to:i},_);return b!==v?N.ref=t||A:N.innerRef=A,o.createElement(y,N)}))}))},4634:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},4784:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={title:"Reanimated Color Picker",tagline:"A Pure JavaScript Color Picker for React Native",url:"https://alabsi91.github.io",baseUrl:"/reanimated-color-picker/",onBrokenLinks:"warn",onBrokenMarkdownLinks:"warn",favicon:"img/favicon.ico",i18n:{defaultLocale:"en",locales:["en"],path:"i18n",localeConfigs:{}},scripts:[{src:"https://snack.expo.dev/embed.js",async:!0}],presets:[["classic",{docs:{sidebarPath:"/Users/plant/Documents/DEV/reanimated-color-picker/docs/sidebars.js"},blog:!1,theme:{customCss:"/Users/plant/Documents/DEV/reanimated-color-picker/docs/src/css/custom.css"}}]],themeConfig:{metadata:[{name:"keywords",content:"react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"}],colorMode:{defaultMode:"dark",disableSwitch:!0,respectPrefersColorScheme:!1},navbar:{title:"Home",items:[{type:"doc",docId:"intro",position:"left",label:"Docs"},{href:"https://github.com/alabsi91/reanimated-color-picker",label:"GitHub",position:"right"}],hideOnScroll:!1},footer:{style:"dark",copyright:"Released under the MIT License.",links:[]},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:[],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},blog:{sidebar:{groupByYear:!0}},tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},baseUrlIssueBanner:!0,future:{v4:{removeLegacyPostBuildHeadAttribute:!1,useCssCascadeLayers:!1},experimental_faster:{swcJsLoader:!1,swcJsMinimizer:!1,swcHtmlMinimizer:!1,lightningCssMinimizer:!1,mdxCrossCompilerCache:!1,rspackBundler:!1,rspackPersistentCache:!1,ssgWorkerThreads:!1},experimental_storage:{type:"localStorage",namespace:!1},experimental_router:"browser"},onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},plugins:[],themes:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0},anchors:{maintainCase:!1}}}},4848:(e,t,n)=>{"use strict";e.exports=n(9698)},5041:(e,t,n)=>{"use strict";n.d(t,{M:()=>h,o:()=>m});var r=n(6540),a=n(2303),o=n(679),i=n(9532),l=n(6342),s=n(4848);const c=(0,o.Wf)("docusaurus.announcement.dismiss"),u=(0,o.Wf)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function m({children:e}){const t=function(){const{announcementBar:e}=(0,l.p)(),t=(0,a.A)(),[n,o]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{o(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,s.jsx)(f.Provider,{value:t,children:e})}function h(){const e=(0,r.useContext)(f);if(!e)throw new i.dV("AnnouncementBarProvider");return e}},5062:(e,t,n)=>{"use strict";n.d(t,{$:()=>i});var r=n(6540),a=n(6347),o=n(9532);function i(e){const t=(0,a.zy)(),n=(0,o.ZC)(t),i=(0,o._q)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},5260:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});n(6540);var r=n(545),a=n(4848);function o(e){return(0,a.jsx)(r.mg,{...e})}},5293:(e,t,n)=>{"use strict";n.d(t,{G:()=>w,a:()=>v});var r=n(6540),a=n(9532),o=n(679),i=n(6342),l=n(4848);function s(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function c(e){return function(e,t){const n=window.matchMedia(e);return n.addEventListener("change",t),()=>n.removeEventListener("change",t)}("(prefers-color-scheme: dark)",(()=>e(s())))}const u=r.createContext(void 0),d=(0,o.Wf)("theme"),p="system",f=e=>"dark"===e?"dark":"light",m=e=>null===e||e===p?null:f(e),h={get:()=>f(document.documentElement.getAttribute("data-theme")),set:e=>{document.documentElement.setAttribute("data-theme",f(e))}},g={get:()=>m(document.documentElement.getAttribute("data-theme-choice")),set:e=>{document.documentElement.setAttribute("data-theme-choice",m(e)??p)}},y=e=>{null===e?d.del():d.set(f(e))};function b(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,i.p)(),{colorMode:a,setColorModeState:o,colorModeChoice:l,setColorModeChoiceState:u}=function(){const{colorMode:{defaultMode:e}}=(0,i.p)(),[t,n]=(0,r.useState)(e),[a,o]=(0,r.useState)(null);return(0,r.useEffect)((()=>{n(h.get()),o(g.get())}),[]),{colorMode:t,setColorModeState:n,colorModeChoice:a,setColorModeChoiceState:o}}();(0,r.useEffect)((()=>{t&&d.del()}),[t]);const p=(0,r.useCallback)(((t,r={})=>{const{persist:a=!0}=r;if(null===t){const t=n?s():e;h.set(t),o(t),g.set(null),u(null)}else h.set(t),g.set(t),o(t),u(t);a&&y(t)}),[o,u,n,e]);return(0,r.useEffect)((()=>d.listen((e=>{p(m(e.newValue))}))),[p]),(0,r.useEffect)((()=>{if(null===l&&n)return c((e=>{o(e),h.set(e)}))}),[n,l,o]),(0,r.useMemo)((()=>({colorMode:a,colorModeChoice:l,setColorMode:p,get isDarkTheme(){return"dark"===a},setLightTheme(){p("light")},setDarkTheme(){p("dark")}})),[a,l,p])}function v({children:e}){const t=b();return(0,l.jsx)(u.Provider,{value:t,children:e})}function w(){const e=(0,r.useContext)(u);if(null==e)throw new a.dV("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},5302:(e,t,n)=>{var r=n(4634);e.exports=m,e.exports.parse=o,e.exports.compile=function(e,t){return s(o(e,t),t)},e.exports.tokensToFunction=s,e.exports.tokensToRegExp=f;var a=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function o(e,t){for(var n,r=[],o=0,l=0,s="",c=t&&t.delimiter||"/";null!=(n=a.exec(e));){var d=n[0],p=n[1],f=n.index;if(s+=e.slice(l,f),l=f+d.length,p)s+=p[1];else{var m=e[l],h=n[2],g=n[3],y=n[4],b=n[5],v=n[6],w=n[7];s&&(r.push(s),s="");var k=null!=h&&null!=m&&m!==h,S="+"===v||"*"===v,x="?"===v||"*"===v,E=h||c,A=y||b,_=h||("string"==typeof r[r.length-1]?r[r.length-1]:"");r.push({name:g||o++,prefix:h||"",delimiter:E,optional:x,repeat:S,partial:k,asterisk:!!w,pattern:A?u(A):w?".*":i(E,_)})}}return l<e.length&&(s+=e.substr(l)),s&&r.push(s),r}function i(e,t){return!t||t.indexOf(e)>-1?"[^"+c(e)+"]+?":c(t)+"|(?:(?!"+c(t)+")[^"+c(e)+"])+?"}function l(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function s(e,t){for(var n=new Array(e.length),a=0;a<e.length;a++)"object"==typeof e[a]&&(n[a]=new RegExp("^(?:"+e[a].pattern+")$",p(t)));return function(t,a){for(var o="",i=t||{},s=(a||{}).pretty?l:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var d,p=i[u.name];if(null==p){if(u.optional){u.partial&&(o+=u.prefix);continue}throw new TypeError('Expected "'+u.name+'" to be defined')}if(r(p)){if(!u.repeat)throw new TypeError('Expected "'+u.name+'" to not repeat, but received `'+JSON.stringify(p)+"`");if(0===p.length){if(u.optional)continue;throw new TypeError('Expected "'+u.name+'" to not be empty')}for(var f=0;f<p.length;f++){if(d=s(p[f]),!n[c].test(d))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(d)+"`");o+=(0===f?u.prefix:u.delimiter)+d}}else{if(d=u.asterisk?encodeURI(p).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):s(p),!n[c].test(d))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+d+'"');o+=u.prefix+d}}else o+=u}return o}}function c(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function u(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function d(e,t){return e.keys=t,e}function p(e){return e&&e.sensitive?"":"i"}function f(e,t,n){r(t)||(n=t||n,t=[]);for(var a=(n=n||{}).strict,o=!1!==n.end,i="",l=0;l<e.length;l++){var s=e[l];if("string"==typeof s)i+=c(s);else{var u=c(s.prefix),f="(?:"+s.pattern+")";t.push(s),s.repeat&&(f+="(?:"+u+f+")*"),i+=f=s.optional?s.partial?u+"("+f+")?":"(?:"+u+"("+f+"))?":u+"("+f+")"}}var m=c(n.delimiter||"/"),h=i.slice(-m.length)===m;return a||(i=(h?i.slice(0,-m.length):i)+"(?:"+m+"(?=$))?"),i+=o?"$":a&&h?"":"(?="+m+"|$)",d(new RegExp("^"+i,p(n)),t)}function m(e,t,n){return r(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return d(e,t)}(e,t):r(e)?function(e,t,n){for(var r=[],a=0;a<e.length;a++)r.push(m(e[a],t,n).source);return d(new RegExp("(?:"+r.join("|")+")",p(n)),t)}(e,t,n):function(e,t,n){return f(o(e,n),t,n)}(e,t,n)}},5338:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(1247)},5500:(e,t,n)=>{"use strict";n.d(t,{Jx:()=>y,be:()=>m,e3:()=>g});var r=n(6540),a=n(4164),o=n(5260),i=n(6803),l=n(6025),s=n(4563),c=n(4848);function u({title:e}){const t=(0,s.s$)().format(e);return(0,c.jsxs)(o.A,{children:[(0,c.jsx)("title",{children:t}),(0,c.jsx)("meta",{property:"og:title",content:t})]})}function d({description:e}){return(0,c.jsxs)(o.A,{children:[(0,c.jsx)("meta",{name:"description",content:e}),(0,c.jsx)("meta",{property:"og:description",content:e})]})}function p({image:e}){const{withBaseUrl:t}=(0,l.hH)(),n=t(e,{absolute:!0});return(0,c.jsxs)(o.A,{children:[(0,c.jsx)("meta",{property:"og:image",content:n}),(0,c.jsx)("meta",{name:"twitter:image",content:n})]})}function f({keywords:e}){return(0,c.jsx)(o.A,{children:(0,c.jsx)("meta",{name:"keywords",content:Array.isArray(e)?e.join(","):e})})}function m({title:e,description:t,keywords:n,image:r,children:a}){return(0,c.jsxs)(c.Fragment,{children:[e&&(0,c.jsx)(u,{title:e}),t&&(0,c.jsx)(d,{description:t}),n&&(0,c.jsx)(f,{keywords:n}),r&&(0,c.jsx)(p,{image:r}),a&&(0,c.jsx)(o.A,{children:a})]})}const h=r.createContext(void 0);function g({className:e,children:t}){const n=r.useContext(h),i=(0,a.A)(n,e);return(0,c.jsxs)(h.Provider,{value:i,children:[(0,c.jsx)(o.A,{children:(0,c.jsx)("html",{className:i})}),t]})}function y({children:e}){const t=(0,i.A)(),n=`plugin-${t.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const r=`plugin-id-${t.plugin.id}`;return(0,c.jsx)(g,{className:(0,a.A)(n,r),children:e})}},5556:(e,t,n)=>{e.exports=n(2694)()},5600:(e,t,n)=>{"use strict";n.d(t,{GX:()=>c,YL:()=>s,y_:()=>l});var r=n(6540),a=n(9532),o=n(4848);const i=r.createContext(null);function l({children:e}){const t=(0,r.useState)({component:null,props:null});return(0,o.jsx)(i.Provider,{value:t,children:e})}function s(){const e=(0,r.useContext)(i);if(!e)throw new a.dV("NavbarSecondaryMenuContentProvider");return e[0]}function c({component:e,props:t}){const n=(0,r.useContext)(i);if(!n)throw new a.dV("NavbarSecondaryMenuContentProvider");const[,o]=n,l=(0,a.Be)(t);return(0,r.useEffect)((()=>{o({component:e,props:l})}),[o,e,l]),(0,r.useEffect)((()=>()=>o({component:null,props:null})),[o]),null}},5947:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function a(e,t,n){return e<t?t:e>n?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),c=o.querySelector(r.barSelector),u=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(c,i(e,u,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0===--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),c=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},6025:(e,t,n)=>{"use strict";n.d(t,{Ay:()=>l,hH:()=>i});var r=n(6540),a=n(4586),o=n(6654);function i(){const{siteConfig:e}=(0,a.A)(),{baseUrl:t,url:n}=e,i=e.future.experimental_router,l=(0,r.useCallback)(((e,r)=>function({siteUrl:e,baseUrl:t,url:n,options:{forcePrependBaseUrl:r=!1,absolute:a=!1}={},router:i}){if(!n||n.startsWith("#")||(0,o.z)(n))return n;if("hash"===i)return n.startsWith("/")?`.${n}`:`./${n}`;if(r)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return a?e+l:l}({siteUrl:n,baseUrl:t,url:e,options:r,router:i})),[n,t,i]);return{withBaseUrl:l}}function l(e,t={}){const{withBaseUrl:n}=i();return n(e,t)}},6125:(e,t,n)=>{"use strict";n.d(t,{o:()=>o,x:()=>i});var r=n(6540),a=n(4848);const o=r.createContext(!1);function i({children:e}){const[t,n]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{n(!0)}),[]),(0,a.jsx)(o.Provider,{value:t,children:e})}},6134:(e,t,n)=>{"use strict";var r=n(1765),a=n(4784);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t,o=globalThis.Prism;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(9700),n(8692)(`./prism-${e}`)})),delete globalThis.Prism,void 0!==o&&(globalThis.Prism=e)}(r.My)},6221:(e,t,n)=>{"use strict";var r=n(6540);function a(e){var t="https://react.dev/errors/"+e;if(1<arguments.length){t+="?args[]="+encodeURIComponent(arguments[1]);for(var n=2;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n])}return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function o(){}var i={d:{f:o,r:function(){throw Error(a(522))},D:o,C:o,L:o,m:o,X:o,S:o,M:o},p:0,findDOMNode:null},l=Symbol.for("react.portal");var s=r.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;function c(e,t){return"font"===e?"":"string"==typeof t?"use-credentials"===t?t:"":void 0}t.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=i,t.createPortal=function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!t||1!==t.nodeType&&9!==t.nodeType&&11!==t.nodeType)throw Error(a(299));return function(e,t,n){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:l,key:null==r?null:""+r,children:e,containerInfo:t,implementation:n}}(e,t,null,n)},t.flushSync=function(e){var t=s.T,n=i.p;try{if(s.T=null,i.p=2,e)return e()}finally{s.T=t,i.p=n,i.d.f()}},t.preconnect=function(e,t){"string"==typeof e&&(t?t="string"==typeof(t=t.crossOrigin)?"use-credentials"===t?t:"":void 0:t=null,i.d.C(e,t))},t.prefetchDNS=function(e){"string"==typeof e&&i.d.D(e)},t.preinit=function(e,t){if("string"==typeof e&&t&&"string"==typeof t.as){var n=t.as,r=c(n,t.crossOrigin),a="string"==typeof t.integrity?t.integrity:void 0,o="string"==typeof t.fetchPriority?t.fetchPriority:void 0;"style"===n?i.d.S(e,"string"==typeof t.precedence?t.precedence:void 0,{crossOrigin:r,integrity:a,fetchPriority:o}):"script"===n&&i.d.X(e,{crossOrigin:r,integrity:a,fetchPriority:o,nonce:"string"==typeof t.nonce?t.nonce:void 0})}},t.preinitModule=function(e,t){if("string"==typeof e)if("object"==typeof t&&null!==t){if(null==t.as||"script"===t.as){var n=c(t.as,t.crossOrigin);i.d.M(e,{crossOrigin:n,integrity:"string"==typeof t.integrity?t.integrity:void 0,nonce:"string"==typeof t.nonce?t.nonce:void 0})}}else null==t&&i.d.M(e)},t.preload=function(e,t){if("string"==typeof e&&"object"==typeof t&&null!==t&&"string"==typeof t.as){var n=t.as,r=c(n,t.crossOrigin);i.d.L(e,n,{crossOrigin:r,integrity:"string"==typeof t.integrity?t.integrity:void 0,nonce:"string"==typeof t.nonce?t.nonce:void 0,type:"string"==typeof t.type?t.type:void 0,fetchPriority:"string"==typeof t.fetchPriority?t.fetchPriority:void 0,referrerPolicy:"string"==typeof t.referrerPolicy?t.referrerPolicy:void 0,imageSrcSet:"string"==typeof t.imageSrcSet?t.imageSrcSet:void 0,imageSizes:"string"==typeof t.imageSizes?t.imageSizes:void 0,media:"string"==typeof t.media?t.media:void 0})}},t.preloadModule=function(e,t){if("string"==typeof e)if(t){var n=c(t.as,t.crossOrigin);i.d.m(e,{as:"string"==typeof t.as&&"script"!==t.as?t.as:void 0,crossOrigin:n,integrity:"string"==typeof t.integrity?t.integrity:void 0})}else i.d.m(e)},t.requestFormReset=function(e){i.d.r(e)},t.unstable_batchedUpdates=function(e,t){return e(t)},t.useFormState=function(e,t,n){return s.H.useFormState(e,t,n)},t.useFormStatus=function(){return s.H.useHostTransitionStatus()},t.version="19.1.0"},6294:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(5947),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate({location:e,previousLocation:t}){if(t&&e.pathname!==t.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},6342:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var r=n(4586);function a(){return(0,r.A)().siteConfig.themeConfig}},6347:(e,t,n)=>{"use strict";n.d(t,{B6:()=>x,Ix:()=>v,W6:()=>N,XZ:()=>b,dO:()=>j,qh:()=>E,zy:()=>O});var r=n(2892),a=n(6540),o=n(5556),i=n.n(o),l=n(1513),s=n(1561),c=n(8168),u=n(5302),d=n.n(u),p=(n(4363),n(8587)),f=(n(4146),1073741823),m="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==n.g?n.g:{};var h=a.createContext||function(e,t){var n,o,l="__create-react-context-"+function(){var e="__global_unique_id__";return m[e]=(m[e]||0)+1}()+"__",s=function(e){function n(){for(var t,n,r,a=arguments.length,o=new Array(a),i=0;i<a;i++)o[i]=arguments[i];return(t=e.call.apply(e,[this].concat(o))||this).emitter=(n=t.props.value,r=[],{on:function(e){r.push(e)},off:function(e){r=r.filter((function(t){return t!==e}))},get:function(){return n},set:function(e,t){n=e,r.forEach((function(e){return e(n,t)}))}}),t}(0,r.A)(n,e);var a=n.prototype;return a.getChildContext=function(){var e;return(e={})[l]=this.emitter,e},a.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var n,r=this.props.value,a=e.value;((o=r)===(i=a)?0!==o||1/o==1/i:o!=o&&i!=i)?n=0:(n="function"==typeof t?t(r,a):f,0!==(n|=0)&&this.emitter.set(e.value,n))}var o,i},a.render=function(){return this.props.children},n}(a.Component);s.childContextTypes=((n={})[l]=i().object.isRequired,n);var c=function(t){function n(){for(var e,n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];return(e=t.call.apply(t,[this].concat(r))||this).observedBits=void 0,e.state={value:e.getValue()},e.onUpdate=function(t,n){0!==((0|e.observedBits)&n)&&e.setState({value:e.getValue()})},e}(0,r.A)(n,t);var a=n.prototype;return a.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?f:t},a.componentDidMount=function(){this.context[l]&&this.context[l].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?f:e},a.componentWillUnmount=function(){this.context[l]&&this.context[l].off(this.onUpdate)},a.getValue=function(){return this.context[l]?this.context[l].get():e},a.render=function(){return(e=this.props.children,Array.isArray(e)?e[0]:e)(this.state.value);var e},n}(a.Component);return c.contextTypes=((o={})[l]=i().object,o),{Provider:s,Consumer:c}},g=function(e){var t=h();return t.displayName=e,t},y=g("Router-History"),b=g("Router"),v=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={location:t.history.location},n._isMounted=!1,n._pendingLocation=null,t.staticContext||(n.unlisten=t.history.listen((function(e){n._pendingLocation=e}))),n}(0,r.A)(t,e),t.computeRootMatch=function(e){return{path:"/",url:"/",params:{},isExact:"/"===e}};var n=t.prototype;return n.componentDidMount=function(){var e=this;this._isMounted=!0,this.unlisten&&this.unlisten(),this.props.staticContext||(this.unlisten=this.props.history.listen((function(t){e._isMounted&&e.setState({location:t})}))),this._pendingLocation&&this.setState({location:this._pendingLocation})},n.componentWillUnmount=function(){this.unlisten&&(this.unlisten(),this._isMounted=!1,this._pendingLocation=null)},n.render=function(){return a.createElement(b.Provider,{value:{history:this.props.history,location:this.state.location,match:t.computeRootMatch(this.state.location.pathname),staticContext:this.props.staticContext}},a.createElement(y.Provider,{children:this.props.children||null,value:this.props.history}))},t}(a.Component);a.Component;a.Component;var w={},k=1e4,S=0;function x(e,t){void 0===t&&(t={}),("string"==typeof t||Array.isArray(t))&&(t={path:t});var n=t,r=n.path,a=n.exact,o=void 0!==a&&a,i=n.strict,l=void 0!==i&&i,s=n.sensitive,c=void 0!==s&&s;return[].concat(r).reduce((function(t,n){if(!n&&""!==n)return null;if(t)return t;var r=function(e,t){var n=""+t.end+t.strict+t.sensitive,r=w[n]||(w[n]={});if(r[e])return r[e];var a=[],o={regexp:d()(e,a,t),keys:a};return S<k&&(r[e]=o,S++),o}(n,{end:o,strict:l,sensitive:c}),a=r.regexp,i=r.keys,s=a.exec(e);if(!s)return null;var u=s[0],p=s.slice(1),f=e===u;return o&&!f?null:{path:n,url:"/"===n&&""===u?"/":u,isExact:f,params:i.reduce((function(e,t,n){return e[t.name]=p[n],e}),{})}}),null)}var E=function(e){function t(){return e.apply(this,arguments)||this}return(0,r.A)(t,e),t.prototype.render=function(){var e=this;return a.createElement(b.Consumer,null,(function(t){t||(0,s.A)(!1);var n=e.props.location||t.location,r=e.props.computedMatch?e.props.computedMatch:e.props.path?x(n.pathname,e.props):t.match,o=(0,c.A)({},t,{location:n,match:r}),i=e.props,l=i.children,u=i.component,d=i.render;return Array.isArray(l)&&function(e){return 0===a.Children.count(e)}(l)&&(l=null),a.createElement(b.Provider,{value:o},o.match?l?"function"==typeof l?l(o):l:u?a.createElement(u,o):d?d(o):null:"function"==typeof l?l(o):null)}))},t}(a.Component);function A(e){return"/"===e.charAt(0)?e:"/"+e}function _(e,t){if(!e)return t;var n=A(e);return 0!==t.pathname.indexOf(n)?t:(0,c.A)({},t,{pathname:t.pathname.substr(n.length)})}function C(e){return"string"==typeof e?e:(0,l.AO)(e)}function P(e){return function(){(0,s.A)(!1)}}function T(){}a.Component;var j=function(e){function t(){return e.apply(this,arguments)||this}return(0,r.A)(t,e),t.prototype.render=function(){var e=this;return a.createElement(b.Consumer,null,(function(t){t||(0,s.A)(!1);var n,r,o=e.props.location||t.location;return a.Children.forEach(e.props.children,(function(e){if(null==r&&a.isValidElement(e)){n=e;var i=e.props.path||e.props.from;r=i?x(o.pathname,(0,c.A)({},e.props,{path:i})):t.match}})),r?a.cloneElement(n,{location:o,computedMatch:r}):null}))},t}(a.Component);var L=a.useContext;function N(){return L(y)}function O(){return L(b).location}},6540:(e,t,n)=>{"use strict";e.exports=n(9869)},6654:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{A:()=>a,z:()=>r})},6803:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=n(6540),a=n(3102);function o(){const e=r.useContext(a.o);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}},6921:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((([n,o])=>{const i=a?`${a}.${n}`:n;r(o)?e(o,i):t[i]=o}))}(e),t}},6925:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},6969:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to <a href="https://webplatform.github.io/docs/">WebPlatform.org documentation</a>. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (<code>.comment</code> can become <code>.namespace--comment</code>) or replace them with your defined ones (like <code>.editor__comment</code>). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the <code>highlightAll</code> and <code>highlightAllUnder</code> methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},6972:(e,t,n)=>{"use strict";n.d(t,{$S:()=>m,B5:()=>_,Nr:()=>f,OF:()=>S,QB:()=>A,Vd:()=>x,Y:()=>w,a4:()=>h,cC:()=>p,d1:()=>C,fW:()=>E,w8:()=>b});var r=n(6540),a=n(6347),o=n(2831),i=n(4070),l=n(9169),s=n(1682),c=n(3886),u=n(3025),d=n(609);function p(e){const t=(0,u.r)();if(!e)return;const n=t.docs[e];if(!n)throw new Error(`no version doc found by id=${e}`);return n}function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}function m(){const{pathname:e}=(0,a.zy)(),t=(0,d.t)();if(!t)throw new Error("Unexpected: cant find current sidebar in context");const n=k({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];if(!n)throw new Error(`${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`);return n}function h(){const{pathname:e}=(0,a.zy)(),t=(0,d.t)();if(!t)throw new Error("Unexpected: cant find current sidebar in context");const n=k({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];return n?.items??t.items}const g=(e,t)=>void 0!==e&&(0,l.ys)(e,t),y=(e,t)=>e.some((e=>b(e,t)));function b(e,t){return"link"===e.type?g(e.href,t):"category"===e.type&&(g(e.href,t)||y(e.items,t))}function v(e,t){switch(e.type){case"category":return b(e,t)||void 0!==e.href&&!e.linkUnlisted||e.items.some((e=>v(e,t)));case"link":return!e.unlisted||b(e,t);default:return!0}}function w(e,t){return(0,r.useMemo)((()=>e.filter((e=>v(e,t)))),[e,t])}function k({sidebarItems:e,pathname:t,onlyCategories:n=!1}){const r=[];return function e(a){for(const o of a)if("category"===o.type&&((0,l.ys)(o.href,t)||e(o.items))||"link"===o.type&&(0,l.ys)(o.href,t)){return n&&"category"!==o.type||r.unshift(o),!0}return!1}(e),r}function S(){const e=(0,d.t)(),{pathname:t}=(0,a.zy)(),n=(0,i.vT)()?.pluginData.breadcrumbs;return!1!==n&&e?k({sidebarItems:e.items,pathname:t}):null}function x(e){const{activeVersion:t}=(0,i.zK)(e),{preferredVersion:n}=(0,c.g1)(e),a=(0,i.r7)(e);return(0,r.useMemo)((()=>(0,s.sb)([t,n,a].filter(Boolean))),[t,n,a])}function E(e,t){const n=x(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function A(e,t){const n=x(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${(0,s.sb)(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function _({route:e}){const t=(0,a.zy)(),n=(0,u.r)(),r=e.routes,i=r.find((e=>(0,a.B6)(t.pathname,e)));if(!i)return null;const l=i.sidebar,s=l?n.docsSidebars[l]:void 0;return{docElement:(0,o.v)(r),sidebarName:l,sidebarItems:s}}function C(e){return e.filter((e=>!("category"===e.type||"link"===e.type)||!!f(e)))}},6988:(e,t,n)=>{"use strict";n.d(t,{o:()=>d,l:()=>p});var r=n(6540),a=n(4784);const o=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/reanimated-color-picker/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/reanimated-color-picker/docs","mainDocId":"intro","docs":[{"id":"API/ColorPicker","path":"/reanimated-color-picker/docs/API/ColorPicker","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel1","path":"/reanimated-color-picker/docs/API/Panels/Panel1","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel2","path":"/reanimated-color-picker/docs/API/Panels/Panel2","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel3","path":"/reanimated-color-picker/docs/API/Panels/Panel3","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel4","path":"/reanimated-color-picker/docs/API/Panels/Panel4","sidebar":"tutorialSidebar"},{"id":"API/Panels/Panel5","path":"/reanimated-color-picker/docs/API/Panels/Panel5","sidebar":"tutorialSidebar"},{"id":"API/Preview/ExtraThumb","path":"/reanimated-color-picker/docs/API/Preview/ExtraThumb","sidebar":"tutorialSidebar"},{"id":"API/Preview/InputWidget","path":"/reanimated-color-picker/docs/API/Preview/InputWidget","sidebar":"tutorialSidebar"},{"id":"API/Preview/Preview","path":"/reanimated-color-picker/docs/API/Preview/","sidebar":"tutorialSidebar"},{"id":"API/Preview/PreviewText","path":"/reanimated-color-picker/docs/API/Preview/PreviewText","sidebar":"tutorialSidebar"},{"id":"API/Preview/Swatches","path":"/reanimated-color-picker/docs/API/Preview/Swatches","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSB/BrightnessSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSB/SaturationSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSL/HSLSaturationSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSL/LuminanceCircular","path":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular","sidebar":"tutorialSidebar"},{"id":"API/Sliders/HSL/LuminanceSlider","path":"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/Hue/HueCircular","path":"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular","sidebar":"tutorialSidebar"},{"id":"API/Sliders/Hue/HueSlider","path":"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/OpacitySlider","path":"/reanimated-color-picker/docs/API/Sliders/OpacitySlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/RGB/BlueSlider","path":"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/RGB/GreenSlider","path":"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider","sidebar":"tutorialSidebar"},{"id":"API/Sliders/RGB/RedSlider","path":"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider","sidebar":"tutorialSidebar"},{"id":"ColorKit","path":"/reanimated-color-picker/docs/ColorKit","sidebar":"tutorialSidebar"},{"id":"Examples","path":"/reanimated-color-picker/docs/Examples","sidebar":"tutorialSidebar"},{"id":"Installation","path":"/reanimated-color-picker/docs/Installation","sidebar":"tutorialSidebar"},{"id":"intro","path":"/reanimated-color-picker/docs/intro","sidebar":"tutorialSidebar"},{"id":"Usage","path":"/reanimated-color-picker/docs/Usage","sidebar":"tutorialSidebar"},{"id":"/category/api","path":"/reanimated-color-picker/docs/category/api","sidebar":"tutorialSidebar"},{"id":"/category/panels","path":"/reanimated-color-picker/docs/category/panels","sidebar":"tutorialSidebar"},{"id":"/category/sliders","path":"/reanimated-color-picker/docs/category/sliders","sidebar":"tutorialSidebar"},{"id":"/category/hue","path":"/reanimated-color-picker/docs/category/hue","sidebar":"tutorialSidebar"},{"id":"/category/hsb","path":"/reanimated-color-picker/docs/category/hsb","sidebar":"tutorialSidebar"},{"id":"/category/hsl","path":"/reanimated-color-picker/docs/category/hsl","sidebar":"tutorialSidebar"},{"id":"/category/rgb","path":"/reanimated-color-picker/docs/category/rgb","sidebar":"tutorialSidebar"},{"id":"/category/preview","path":"/reanimated-color-picker/docs/category/preview","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/reanimated-color-picker/docs/intro","label":"Introduction"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var l=n(2654);const s=JSON.parse('{"docusaurusVersion":"3.8.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.8.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.8.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.8.0"},"docusaurus-plugin-svgr":{"type":"package","name":"@docusaurus/plugin-svgr","version":"3.8.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.8.0"}}}');var c=n(4848);const u={siteConfig:a.default,siteMetadata:s,globalData:o,i18n:i,codeTranslations:l},d=r.createContext(u);function p({children:e}){return(0,c.jsx)(d.Provider,{value:u,children:e})}},7065:(e,t,n)=>{"use strict";n.d(t,{W:()=>r});const r="default"},7485:(e,t,n)=>{"use strict";n.d(t,{$Z:()=>i,aZ:()=>s});var r=n(6540),a=n(6347),o=n(9532);function i(e){!function(e){const t=(0,a.W6)(),n=(0,o._q)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function l(e){const t=(0,a.W6)();return(0,r.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}function s(e){return l((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}},7489:(e,t,n)=>{"use strict";n.d(t,{A:()=>h});var r=n(6540),a=n(8193),o=n(5260),i=n(440),l=n(1656),s=n(3102),c=n(4848);function u({error:e,tryAgain:t}){return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:t,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:e})]})}function d({error:e}){const t=(0,i.rA)(e).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:t})}function p({children:e}){return(0,c.jsx)(s.W,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:e})}function f({error:e,tryAgain:t}){return(0,c.jsx)(p,{children:(0,c.jsxs)(h,{fallback:()=>(0,c.jsx)(u,{error:e,tryAgain:t}),children:[(0,c.jsx)(o.A,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(l.A,{children:(0,c.jsx)(u,{error:e,tryAgain:t})})]})})}const m=e=>(0,c.jsx)(f,{...e});class h extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.A.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??m)(e)}return e??null}}},7559:(e,t,n)=>{"use strict";n.d(t,{G:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",blogAuthorsListPage:"blog-authors-list-page",blogAuthorsPostsPage:"blog-authors-posts-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",draftBanner:"theme-draft-banner",admonitionType:e=>`theme-admonition-${e}`},announcementBar:{container:"theme-announcement-bar"},layout:{navbar:{container:"theme-layout-navbar",containerLeft:"theme-layout-navbar-left",containerRight:"theme-layout-navbar-right",mobileSidebar:{container:"theme-layout-navbar-sidebar",panel:"theme-layout-navbar-sidebar-panel"}},main:{container:"theme-layout-main"},footer:{container:"theme-layout-footer",column:"theme-layout-footer-column"}},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},8168:(e,t,n)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(null,arguments)}n.d(t,{A:()=>r})},8193:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},8328:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});n(6540);var r=n(3259),a=n.n(r),o=n(4054);const i={"0489dd59":[()=>n.e(80).then(n.t.bind(n,5455,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-rgb-bcb.json",5455],"126391be":[()=>n.e(10).then(n.bind(n,6086)),"@site/docs/API/Preview/PreviewText.md",6086],"140a8099":[()=>n.e(439).then(n.bind(n,8505)),"@site/docs/API/Sliders/Hue/HueSlider.mdx",8505],"14eb3368":[()=>Promise.all([n.e(869),n.e(969)]).then(n.bind(n,6098)),"@theme/DocCategoryGeneratedIndexPage",6098],17896441:[()=>Promise.all([n.e(869),n.e(246),n.e(401)]).then(n.bind(n,5587)),"@theme/DocItem",5587],"1e2bc623":[()=>n.e(219).then(n.t.bind(n,2524,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-panels-2ae.json",2524],"2487527e":[()=>n.e(915).then(n.t.bind(n,7071,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-sliders-9a0.json",7071],"2b9ac54a":[()=>n.e(588).then(n.bind(n,3560)),"@site/docs/API/Preview/InputWidget.md",3560],"2de8a64b":[()=>n.e(685).then(n.bind(n,7256)),"@site/docs/API/Panels/Panel2.mdx",7256],"2fc6c5ee":[()=>n.e(54).then(n.bind(n,3536)),"@site/docs/ColorKit.mdx",3536],"39eaec8f":[()=>Promise.all([n.e(869),n.e(91)]).then(n.bind(n,7187)),"@site/docs/Installation.mdx",7187],"42602a95":[()=>n.e(202).then(n.t.bind(n,2308,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-hue-25f.json",2308],"56316f3f":[()=>n.e(541).then(n.bind(n,5448)),"@site/docs/API/Preview/Preview.md",5448],"58a57edf":[()=>n.e(888).then(n.bind(n,8883)),"@site/docs/API/Sliders/RGB/RedSlider.mdx",8883],"5e95c892":[()=>n.e(647).then(n.bind(n,7121)),"@theme/DocsRoot",7121],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,4784)),"@generated/docusaurus.config",4784],"63def8f5":[()=>n.e(574).then(n.bind(n,1251)),"@site/docs/API/Panels/Panel3.mdx",1251],"7166dec0":[()=>n.e(107).then(n.bind(n,4851)),"@site/docs/API/Preview/Swatches.md",4851],"79d873be":[()=>n.e(982).then(n.bind(n,3813)),"@site/docs/API/Sliders/HSB/BrightnessSlider.mdx",3813],"84f4edb4":[()=>n.e(100).then(n.t.bind(n,9003,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-hsb-ca3.json",9003],"8771582a":[()=>n.e(56).then(n.bind(n,9567)),"@site/docs/API/Panels/Panel5.mdx",9567],"8bf99691":[()=>n.e(201).then(n.bind(n,2993)),"@site/docs/Examples.mdx",2993],"8d402cb0":[()=>n.e(176).then(n.bind(n,3791)),"@site/docs/API/Sliders/HSL/HSLSaturationSlider.mdx",3791],"90e27583":[()=>n.e(794).then(n.bind(n,540)),"@site/docs/API/Preview/ExtraThumb.mdx",540],"9180b37b":[()=>n.e(419).then(n.bind(n,9108)),"@site/docs/API/Sliders/Hue/HueCircular.mdx",9108],"932438b4":[()=>n.e(514).then(n.bind(n,5783)),"@site/docs/API/Sliders/RGB/BlueSlider.mdx",5783],"94e8e772":[()=>n.e(60).then(n.bind(n,3522)),"@site/docs/API/Sliders/OpacitySlider.mdx",3522],"9edb15d8":[()=>n.e(669).then(n.bind(n,7276)),"@site/docs/API/Sliders/RGB/GreenSlider.mdx",7276],a44a6861:[()=>n.e(948).then(n.bind(n,9932)),"@site/docs/API/Panels/Panel1.mdx",9932],a7456010:[()=>n.e(235).then(n.t.bind(n,8552,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",8552],a7bd4aaa:[()=>n.e(98).then(n.bind(n,1723)),"@theme/DocVersionRoot",1723],a94703ab:[()=>Promise.all([n.e(869),n.e(48)]).then(n.bind(n,1377)),"@theme/DocRoot",1377],aba21aa0:[()=>n.e(742).then(n.t.bind(n,7093,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",7093],ba30bb47:[()=>n.e(326).then(n.bind(n,6117)),"@site/docs/API/Sliders/HSL/LuminanceSlider.mdx",6117],bf417703:[()=>n.e(571).then(n.bind(n,1919)),"@site/docs/Usage.md",1919],c23bd39a:[()=>n.e(622).then(n.bind(n,5606)),"@site/docs/API/Panels/Panel4.mdx",5606],c4f5d8e4:[()=>Promise.all([n.e(869),n.e(634)]).then(n.bind(n,1459)),"@site/src/pages/index.js",1459],c9dca19d:[()=>n.e(557).then(n.t.bind(n,2684,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-02a.json",2684],da90494d:[()=>n.e(536).then(n.t.bind(n,8488,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-api-b10.json",8488],dabf05c1:[()=>n.e(315).then(n.t.bind(n,1873,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-hsl-3ce.json",1873],e0d6e6dc:[()=>n.e(328).then(n.bind(n,5881)),"@site/docs/API/Sliders/HSB/SaturationSlider.mdx",5881],e73706c6:[()=>n.e(160).then(n.bind(n,1427)),"@site/docs/API/Sliders/HSL/LuminanceCircular.mdx",1427],efeb2804:[()=>n.e(585).then(n.bind(n,3594)),"@site/docs/API/ColorPicker.mdx",3594],f299953f:[()=>n.e(144).then(n.t.bind(n,6533,19)),"@generated/docusaurus-plugin-content-docs/default/p/reanimated-color-picker-docs-category-preview-85a.json",6533],f8409a7e:[()=>n.e(903).then(n.bind(n,7455)),"@site/docs/intro.mdx",7455]};var l=n(4848);function s({error:e,retry:t,pastDelay:n}){return e?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(e)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:t,children:"Retry"})})]}):n?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(6921),u=n(3102);function d(e,t){if("*"===e)return a()({loading:s,loader:()=>n.e(237).then(n.bind(n,2237)),modules:["@theme/NotFound"],webpack:()=>[2237],render(e,t){const n=e.default;return(0,l.jsx)(u.W,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const r=o[`${e}-${t}`],d={},p=[],f=[],m=(0,c.A)(r);return Object.entries(m).forEach((([e,t])=>{const n=i[t];n&&(d[e]=n[0],p.push(n[1]),f.push(n[2]))})),a().Map({loading:s,loader:d,modules:p,webpack:()=>f,render(t,n){const a=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((([t,n])=>{const r=n.default;if(!r)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof r&&"function"!=typeof r||Object.keys(n).filter((e=>"default"!==e)).forEach((e=>{r[e]=n[e]}));let o=a;const i=t.split(".");i.slice(0,-1).forEach((e=>{o=o[e]})),o[i[i.length-1]]=r}));const o=a.__comp;delete a.__comp;const i=a.__context;delete a.__context;const s=a.__props;return delete a.__props,(0,l.jsx)(u.W,{value:i,children:(0,l.jsx)(o,{...a,...s,...n})})}})}const p=[{path:"/reanimated-color-picker/docs",component:d("/reanimated-color-picker/docs","801"),routes:[{path:"/reanimated-color-picker/docs",component:d("/reanimated-color-picker/docs","214"),routes:[{path:"/reanimated-color-picker/docs",component:d("/reanimated-color-picker/docs","ec0"),routes:[{path:"/reanimated-color-picker/docs/API/ColorPicker",component:d("/reanimated-color-picker/docs/API/ColorPicker","603"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Panels/Panel1",component:d("/reanimated-color-picker/docs/API/Panels/Panel1","b8e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Panels/Panel2",component:d("/reanimated-color-picker/docs/API/Panels/Panel2","f21"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Panels/Panel3",component:d("/reanimated-color-picker/docs/API/Panels/Panel3","c6b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Panels/Panel4",component:d("/reanimated-color-picker/docs/API/Panels/Panel4","4bb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Panels/Panel5",component:d("/reanimated-color-picker/docs/API/Panels/Panel5","97d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Preview/",component:d("/reanimated-color-picker/docs/API/Preview/","78b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Preview/ExtraThumb",component:d("/reanimated-color-picker/docs/API/Preview/ExtraThumb","d5d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Preview/InputWidget",component:d("/reanimated-color-picker/docs/API/Preview/InputWidget","691"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Preview/PreviewText",component:d("/reanimated-color-picker/docs/API/Preview/PreviewText","979"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Preview/Swatches",component:d("/reanimated-color-picker/docs/API/Preview/Swatches","3f3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider",component:d("/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider","e7f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider",component:d("/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider","6b2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider",component:d("/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider","a01"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular",component:d("/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular","3f4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider",component:d("/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider","969"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular",component:d("/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular","366"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider",component:d("/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider","ae0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/OpacitySlider",component:d("/reanimated-color-picker/docs/API/Sliders/OpacitySlider","fc3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider",component:d("/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider","2d6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider",component:d("/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider","0dd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider",component:d("/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider","3de"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/api",component:d("/reanimated-color-picker/docs/category/api","9dd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/hsb",component:d("/reanimated-color-picker/docs/category/hsb","83b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/hsl",component:d("/reanimated-color-picker/docs/category/hsl","a61"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/hue",component:d("/reanimated-color-picker/docs/category/hue","530"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/panels",component:d("/reanimated-color-picker/docs/category/panels","492"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/preview",component:d("/reanimated-color-picker/docs/category/preview","8d8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/rgb",component:d("/reanimated-color-picker/docs/category/rgb","fee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/category/sliders",component:d("/reanimated-color-picker/docs/category/sliders","583"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/ColorKit",component:d("/reanimated-color-picker/docs/ColorKit","928"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/Examples",component:d("/reanimated-color-picker/docs/Examples","f0f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/Installation",component:d("/reanimated-color-picker/docs/Installation","92f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/intro",component:d("/reanimated-color-picker/docs/intro","514"),exact:!0,sidebar:"tutorialSidebar"},{path:"/reanimated-color-picker/docs/Usage",component:d("/reanimated-color-picker/docs/Usage","c9e"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"/reanimated-color-picker/",component:d("/reanimated-color-picker/","697"),exact:!0},{path:"*",component:d("*")}]},8380:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n<r;n++)t[e[n]]=!0;return t}function r(e){var n={},r=[];function a(r,o){if(!(r in n)){o.push(r);var i=o.indexOf(r);if(i<o.length-1)throw new Error("Circular dependency: "+o.slice(i).join(" -> "));var l={},s=e[r];if(s){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,c),t(s.optional,c),t(s.modify,c)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(c),l=(l||[]).map(c);var u=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(s),m=u;a(m);){for(var h in p={},m){var g=s[h];t(g&&g.modify,(function(e){e in d&&(p[e]=!0)}))}for(var y in d)if(!(y in u))for(var b in f(y))if(b in u){p[y]=!0;break}for(var v in m=p)u[v]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function c(e){if(e in l)return l[e];s[e]=!0;var a,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)a=r(e);else{var p=i(u.map((function(e){var t=c(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var u in n)c(u);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,u,t,n)}};return w}}();e.exports=t},8587:(e,t,n)=>{"use strict";function r(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}n.d(t,{A:()=>r})},8600:(e,t,n)=>{"use strict";var r=n(6540),a=n(5338),o=n(545),i=n(4625),l=n(4784),s=n(8193);const c=[n(119),n(6134),n(6294),n(1043)];var u=n(8328),d=n(6347),p=n(2831),f=n(4848);function m({children:e}){return(0,f.jsx)(f.Fragment,{children:e})}var h=n(4563);const g=e=>e.defaultFormatter(e);function y({children:e}){return(0,f.jsx)(h.AL,{formatter:g,children:e})}function b({children:e}){return(0,f.jsx)(y,{children:e})}var v=n(5260),w=n(4586),k=n(6025),S=n(6342),x=n(5500),E=n(2131),A=n(4090);var _=n(440),C=n(1463);function P(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,w.A)(),r=(0,E.o)(),a=n[e].htmlLang,o=e=>e.replace("-","_");return(0,f.jsxs)(v.A,{children:[Object.entries(n).map((([e,{htmlLang:t}])=>(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:e,fullyQualified:!0}),hrefLang:t},e))),(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,f.jsx)("meta",{property:"og:locale",content:o(a)}),Object.values(n).filter((e=>a!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:o(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function T({permalink:e}){const{siteConfig:{url:t}}=(0,w.A)(),n=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,w.A)(),{pathname:r}=(0,d.zy)();return e+(0,_.Ks)((0,k.Ay)(r),{trailingSlash:n,baseUrl:t})}(),r=e?`${t}${e}`:n;return(0,f.jsxs)(v.A,{children:[(0,f.jsx)("meta",{property:"og:url",content:r}),(0,f.jsx)("link",{rel:"canonical",href:r})]})}function j(){const{i18n:{currentLocale:e}}=(0,w.A)(),{metadata:t,image:n}=(0,S.p)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(v.A,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:A.w})]}),n&&(0,f.jsx)(x.be,{image:n}),(0,f.jsx)(T,{}),(0,f.jsx)(P,{}),(0,f.jsx)(C.A,{tag:"default",locale:e}),(0,f.jsx)(v.A,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const L=new Map;var N=n(6125),O=n(6988),R=n(205);function I(e,...t){const n=c.map((n=>{const r=n.default?.[e]??n[e];return r?.(...t)}));return()=>n.forEach((e=>e?.()))}const D=function({children:e,location:t,previousLocation:n}){return(0,R.A)((()=>{n!==t&&(!function({location:e,previousLocation:t}){if(!t)return;const n=e.pathname===t.pathname,r=e.hash===t.hash,a=e.search===t.search;if(n&&r&&!a)return;const{hash:o}=e;if(o){const e=decodeURIComponent(o.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:t,previousLocation:n}),I("onRouteDidUpdate",{previousLocation:n,location:t}))}),[n,t]),e};function F(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,p.u)(u.A,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class M extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=s.A.canUseDOM?I("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=I("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),F(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,f.jsx)(D,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(d.qh,{location:t,render:()=>e})})}}const z=M,B="__docusaurus-base-url-issue-banner-suggestion-container";function $(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n  var shouldInsert = typeof window['docusaurus'] === 'undefined';\n  shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n  var bannerContainer = document.createElement('div');\n  bannerContainer.id = '__docusaurus-base-url-issue-banner-container';\n  var bannerHtml = ${JSON.stringify(function(e){return`\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">${e}</span> ${"/"===e?" (default value)":""}</p>\n   <p>We suggest trying baseUrl = <span id="${B}" style="font-weight: bold; color: green;"></span></p>\n</div>\n`}(e)).replace(/</g,"\\<")};\n  bannerContainer.innerHTML = bannerHtml;\n  document.body.prepend(bannerContainer);\n  var suggestionContainer = document.getElementById('${B}');\n  var actualHomePagePath = window.location.pathname;\n  var suggestedBaseUrl = actualHomePagePath.substr(-1) === '/'\n        ? actualHomePagePath\n        : actualHomePagePath + '/';\n  suggestionContainer.innerHTML = suggestedBaseUrl;\n}\n`}function U(){const{siteConfig:{baseUrl:e}}=(0,w.A)();return(0,f.jsx)(f.Fragment,{children:!s.A.canUseDOM&&(0,f.jsx)(v.A,{children:(0,f.jsx)("script",{children:$(e)})})})}function H(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,w.A)(),{pathname:n}=(0,d.zy)();return t&&n===e?(0,f.jsx)(U,{}):null}function q(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:r,localeConfigs:a}}=(0,w.A)(),o=(0,k.Ay)(e),{htmlLang:i,direction:l}=a[r];return(0,f.jsxs)(v.A,{children:[(0,f.jsx)("html",{lang:i,dir:l}),(0,f.jsx)("title",{children:t}),(0,f.jsx)("meta",{property:"og:title",content:t}),(0,f.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&(0,f.jsx)("meta",{name:"robots",content:"noindex, nofollow"}),e&&(0,f.jsx)("link",{rel:"icon",href:o})]})}var G=n(7489),V=n(2303);function W(){const e=(0,V.A)();return(0,f.jsx)(v.A,{children:(0,f.jsx)("html",{"data-has-hydrated":e})})}const K=(0,p.v)(u.A);function Q(){const e=function(e){if(L.has(e.pathname))return{...e,pathname:L.get(e.pathname)};if((0,p.u)(u.A,e.pathname).some((({route:e})=>!0===e.exact)))return L.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return L.set(e.pathname,t),{...e,pathname:t}}((0,d.zy)());return(0,f.jsx)(z,{location:e,children:K})}function Y(){return(0,f.jsx)(G.A,{children:(0,f.jsx)(O.l,{children:(0,f.jsxs)(N.x,{children:[(0,f.jsx)(m,{children:(0,f.jsxs)(b,{children:[(0,f.jsx)(q,{}),(0,f.jsx)(j,{}),(0,f.jsx)(H,{}),(0,f.jsx)(Q,{})]})}),(0,f.jsx)(W,{})]})})})}var X=n(4054);const Z=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const a=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;a?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var J=n(6921);const ee=new Set,te=new Set,ne=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,re={prefetch:e=>{if(!(e=>!ne()&&!te.has(e)&&!ee.has(e))(e))return!1;ee.add(e);const t=(0,p.u)(u.A,e).flatMap((e=>{return t=e.route.path,Object.entries(X).filter((([e])=>e.replace(/-[^-]+$/,"")===t)).flatMap((([,e])=>Object.values((0,J.A)(e))));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Z(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!ne()&&!te.has(e))(e)&&(te.add(e),F(e))},ae=Object.freeze(re);function oe({children:e}){return"hash"===l.default.future.experimental_router?(0,f.jsx)(i.I9,{children:e}):(0,f.jsx)(i.Kd,{children:e})}const ie=Boolean(!0);if(s.A.canUseDOM){window.docusaurus=ae;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(o.vd,{children:(0,f.jsx)(oe,{children:(0,f.jsx)(Y,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},i=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(ie)window.docusaurusRoot=a.hydrateRoot(e,t,{onRecoverableError:n});else{const r=a.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};F(window.location.pathname).then((()=>{(0,r.startTransition)(i)}))}},8692:(e,t,n)=>{var r={"./":8722};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=8692},8722:(e,t,n)=>{const r=n(6969),a=n(8380),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(3157).resolve(t)],delete Prism.languages[e],n(3157)(t),o.add(e)}))}i.silent=!1,e.exports=i},8774:(e,t,n)=>{"use strict";n.d(t,{A:()=>f});var r=n(6540),a=n(4625),o=n(440),i=n(4586),l=n(6654),s=n(8193),c=n(3427),u=n(6025),d=n(4848);function p({isNavLink:e,to:t,href:n,activeClassName:p,isActive:f,"data-noBrokenLinkCheck":m,autoAddBaseUrl:h=!0,...g},y){const{siteConfig:b}=(0,i.A)(),{trailingSlash:v,baseUrl:w}=b,k=b.future.experimental_router,{withBaseUrl:S}=(0,u.hH)(),x=(0,c.A)(),E=(0,r.useRef)(null);(0,r.useImperativeHandle)(y,(()=>E.current));const A=t||n;const _=(0,l.A)(A),C=A?.replace("pathname://","");let P=void 0!==C?(T=C,h&&(e=>e.startsWith("/"))(T)?S(T):T):void 0;var T;"hash"===k&&P?.startsWith("./")&&(P=P?.slice(1)),P&&_&&(P=(0,o.Ks)(P,{trailingSlash:v,baseUrl:w}));const j=(0,r.useRef)(!1),L=e?a.k2:a.N_,N=s.A.canUseIntersectionObserver,O=(0,r.useRef)(),R=()=>{j.current||null==P||(window.docusaurus.preload(P),j.current=!0)};(0,r.useEffect)((()=>(!N&&_&&s.A.canUseDOM&&null!=P&&window.docusaurus.prefetch(P),()=>{N&&O.current&&O.current.disconnect()})),[O,P,N,_]);const I=P?.startsWith("#")??!1,D=!g.target||"_self"===g.target,F=!P||!_||!D||I&&"hash"!==k;m||!I&&F||x.collectLink(P),g.id&&x.collectAnchor(g.id);const M={};return F?(0,d.jsx)("a",{ref:E,href:P,...A&&!_&&{target:"_blank",rel:"noopener noreferrer"},...g,...M}):(0,d.jsx)(L,{...g,onMouseEnter:R,onTouchStart:R,innerRef:e=>{E.current=e,N&&e&&_&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=P&&window.docusaurus.prefetch(P))}))})),O.current.observe(e))},to:P,...e&&{isActive:f,activeClassName:p},...M})}const f=r.forwardRef(p)},9169:(e,t,n)=>{"use strict";n.d(t,{Dt:()=>l,ys:()=>i});var r=n(6540),a=n(8328),o=n(4586);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.A)().siteConfig;return(0,r.useMemo)((()=>function({baseUrl:e,routes:t}){function n(t){return t.path===e&&!0===t.exact}function r(t){return t.path===e&&!t.exact}return function e(t){if(0===t.length)return;return t.find(n)||e(t.filter(r).flatMap((e=>e.routes??[])))}(t)}({routes:a.A,baseUrl:e})),[e])}},9532:(e,t,n)=>{"use strict";n.d(t,{Be:()=>c,ZC:()=>l,_q:()=>i,dV:()=>s,fM:()=>u});var r=n(6540),a=n(205),o=n(4848);function i(e){const t=(0,r.useRef)(e);return(0,a.A)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])}function l(e){const t=(0,r.useRef)();return(0,a.A)((()=>{t.current=e})),t.current}class s extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?<name>\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return({children:t})=>(0,o.jsx)(o.Fragment,{children:e.reduceRight(((e,t)=>(0,o.jsx)(t,{children:e})),t)})}},9698:(e,t)=>{"use strict";var n=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function a(e,t,r){var a=null;if(void 0!==r&&(a=""+r),void 0!==t.key&&(a=""+t.key),"key"in t)for(var o in r={},t)"key"!==o&&(r[o]=t[o]);else r=t;return t=r.ref,{$$typeof:n,type:e,key:a,ref:void 0!==t?t:null,props:r}}t.Fragment=r,t.jsx=a,t.jsxs=a},9700:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s<l.length&&!(a>=o.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=o[a],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),m=p.indexOf(f);if(m>-1){++a;var h=p.substring(0,m),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),y=p.substring(m+f.length),b=[];h&&b.push.apply(b,i([h])),b.push(g),y&&b.push.apply(b,i([y])),"string"==typeof c?l.splice.apply(l,[s,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return l}(n.tokens)}}}})}(Prism)},9869:(e,t)=>{"use strict";var n=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),l=Symbol.for("react.consumer"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),f=Symbol.iterator;var m={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},h=Object.assign,g={};function y(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||m}function b(){}function v(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||m}y.prototype.isReactComponent={},y.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=y.prototype;var w=v.prototype=new b;w.constructor=v,h(w,y.prototype),w.isPureReactComponent=!0;var k=Array.isArray,S={H:null,A:null,T:null,S:null,V:null},x=Object.prototype.hasOwnProperty;function E(e,t,r,a,o,i){return r=i.ref,{$$typeof:n,type:e,key:t,ref:void 0!==r?r:null,props:i}}function A(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}var _=/\/+/g;function C(e,t){return"object"==typeof e&&null!==e&&null!=e.key?(n=""+e.key,r={"=":"=0",":":"=2"},"$"+n.replace(/[=:]/g,(function(e){return r[e]}))):t.toString(36);var n,r}function P(){}function T(e,t,a,o,i){var l=typeof e;"undefined"!==l&&"boolean"!==l||(e=null);var s,c,u=!1;if(null===e)u=!0;else switch(l){case"bigint":case"string":case"number":u=!0;break;case"object":switch(e.$$typeof){case n:case r:u=!0;break;case p:return T((u=e._init)(e._payload),t,a,o,i)}}if(u)return i=i(e),u=""===o?"."+C(e,0):o,k(i)?(a="",null!=u&&(a=u.replace(_,"$&/")+"/"),T(i,t,a,"",(function(e){return e}))):null!=i&&(A(i)&&(s=i,c=a+(null==i.key||e&&e.key===i.key?"":(""+i.key).replace(_,"$&/")+"/")+u,i=E(s.type,c,void 0,0,0,s.props)),t.push(i)),1;u=0;var d,m=""===o?".":o+":";if(k(e))for(var h=0;h<e.length;h++)u+=T(o=e[h],t,a,l=m+C(o,h),i);else if("function"==typeof(h=null===(d=e)||"object"!=typeof d?null:"function"==typeof(d=f&&d[f]||d["@@iterator"])?d:null))for(e=h.call(e),h=0;!(o=e.next()).done;)u+=T(o=o.value,t,a,l=m+C(o,h++),i);else if("object"===l){if("function"==typeof e.then)return T(function(e){switch(e.status){case"fulfilled":return e.value;case"rejected":throw e.reason;default:switch("string"==typeof e.status?e.then(P,P):(e.status="pending",e.then((function(t){"pending"===e.status&&(e.status="fulfilled",e.value=t)}),(function(t){"pending"===e.status&&(e.status="rejected",e.reason=t)}))),e.status){case"fulfilled":return e.value;case"rejected":throw e.reason}}throw e}(e),t,a,o,i);throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.")}return u}function j(e,t,n){if(null==e)return e;var r=[],a=0;return T(e,r,"","",(function(e){return t.call(n,e,a++)})),r}function L(e){if(-1===e._status){var t=e._result;(t=t()).then((function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)}),(function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)})),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var N="function"==typeof reportError?reportError:function(e){if("object"==typeof window&&"function"==typeof window.ErrorEvent){var t=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:"object"==typeof e&&null!==e&&"string"==typeof e.message?String(e.message):String(e),error:e});if(!window.dispatchEvent(t))return}else if("object"==typeof process&&"function"==typeof process.emit)return void process.emit("uncaughtException",e);console.error(e)};function O(){}t.Children={map:j,forEach:function(e,t,n){j(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return j(e,(function(){t++})),t},toArray:function(e){return j(e,(function(e){return e}))||[]},only:function(e){if(!A(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},t.Component=y,t.Fragment=a,t.Profiler=i,t.PureComponent=v,t.StrictMode=o,t.Suspense=u,t.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=S,t.__COMPILER_RUNTIME={__proto__:null,c:function(e){return S.H.useMemoCache(e)}},t.cache=function(e){return function(){return e.apply(null,arguments)}},t.cloneElement=function(e,t,n){if(null==e)throw Error("The argument must be a React element, but you passed "+e+".");var r=h({},e.props),a=e.key;if(null!=t)for(o in void 0!==t.ref&&void 0,void 0!==t.key&&(a=""+t.key),t)!x.call(t,o)||"key"===o||"__self"===o||"__source"===o||"ref"===o&&void 0===t.ref||(r[o]=t[o]);var o=arguments.length-2;if(1===o)r.children=n;else if(1<o){for(var i=Array(o),l=0;l<o;l++)i[l]=arguments[l+2];r.children=i}return E(e.type,a,void 0,0,0,r)},t.createContext=function(e){return(e={$$typeof:s,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider=e,e.Consumer={$$typeof:l,_context:e},e},t.createElement=function(e,t,n){var r,a={},o=null;if(null!=t)for(r in void 0!==t.key&&(o=""+t.key),t)x.call(t,r)&&"key"!==r&&"__self"!==r&&"__source"!==r&&(a[r]=t[r]);var i=arguments.length-2;if(1===i)a.children=n;else if(1<i){for(var l=Array(i),s=0;s<i;s++)l[s]=arguments[s+2];a.children=l}if(e&&e.defaultProps)for(r in i=e.defaultProps)void 0===a[r]&&(a[r]=i[r]);return E(e,o,void 0,0,0,a)},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:c,render:e}},t.isValidElement=A,t.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:L}},t.memo=function(e,t){return{$$typeof:d,type:e,compare:void 0===t?null:t}},t.startTransition=function(e){var t=S.T,n={};S.T=n;try{var r=e(),a=S.S;null!==a&&a(n,r),"object"==typeof r&&null!==r&&"function"==typeof r.then&&r.then(O,N)}catch(o){N(o)}finally{S.T=t}},t.unstable_useCacheRefresh=function(){return S.H.useCacheRefresh()},t.use=function(e){return S.H.use(e)},t.useActionState=function(e,t,n){return S.H.useActionState(e,t,n)},t.useCallback=function(e,t){return S.H.useCallback(e,t)},t.useContext=function(e){return S.H.useContext(e)},t.useDebugValue=function(){},t.useDeferredValue=function(e,t){return S.H.useDeferredValue(e,t)},t.useEffect=function(e,t,n){var r=S.H;if("function"==typeof n)throw Error("useEffect CRUD overload is not enabled in this build of React.");return r.useEffect(e,t)},t.useId=function(){return S.H.useId()},t.useImperativeHandle=function(e,t,n){return S.H.useImperativeHandle(e,t,n)},t.useInsertionEffect=function(e,t){return S.H.useInsertionEffect(e,t)},t.useLayoutEffect=function(e,t){return S.H.useLayoutEffect(e,t)},t.useMemo=function(e,t){return S.H.useMemo(e,t)},t.useOptimistic=function(e,t){return S.H.useOptimistic(e,t)},t.useReducer=function(e,t,n){return S.H.useReducer(e,t,n)},t.useRef=function(e){return S.H.useRef(e)},t.useState=function(e){return S.H.useState(e)},t.useSyncExternalStore=function(e,t,n){return S.H.useSyncExternalStore(e,t,n)},t.useTransition=function(){return S.H.useTransition()},t.version="19.1.0"},9982:(e,t,n)=>{"use strict";e.exports=n(4477)}},e=>{e.O(0,[869],(()=>{return t=8600,e(e.s=t);var t}));e.O()}]);
\ No newline at end of file
diff --git a/docs/build/assets/js/runtime~main.0577ba40.js b/docs/build/assets/js/runtime~main.0577ba40.js
deleted file mode 100644
index 04ff418..0000000
--- a/docs/build/assets/js/runtime~main.0577ba40.js
+++ /dev/null
@@ -1 +0,0 @@
-(()=>{"use strict";var e,a,t,r,d,f={},o={};function c(e){var a=o[e];if(void 0!==a)return a.exports;var t=o[e]={id:e,loaded:!1,exports:{}};return f[e].call(t.exports,t,t.exports,c),t.loaded=!0,t.exports}c.m=f,c.c=o,e=[],c.O=(a,t,r,d)=>{if(!t){var f=1/0;for(i=0;i<e.length;i++){t=e[i][0],r=e[i][1],d=e[i][2];for(var o=!0,b=0;b<t.length;b++)(!1&d||f>=d)&&Object.keys(c.O).every((e=>c.O[e](t[b])))?t.splice(b--,1):(o=!1,d<f&&(f=d));if(o){e.splice(i--,1);var n=r();void 0!==n&&(a=n)}}return a}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[t,r,d]},c.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return c.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var d=Object.create(null);c.r(d);var f={};a=a||[null,t({}),t([]),t(t)];for(var o=2&r&&e;"object"==typeof o&&!~a.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach((a=>f[a]=()=>e[a]));return f.default=()=>e,c.d(d,f),d},c.d=(e,a)=>{for(var t in a)c.o(a,t)&&!c.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((a,t)=>(c.f[t](e,a),a)),[])),c.u=e=>"assets/js/"+({10:"126391be",48:"a94703ab",54:"2fc6c5ee",56:"8771582a",60:"94e8e772",80:"0489dd59",91:"39eaec8f",98:"a7bd4aaa",100:"84f4edb4",107:"7166dec0",144:"f299953f",160:"e73706c6",176:"8d402cb0",201:"8bf99691",202:"42602a95",219:"1e2bc623",235:"a7456010",315:"dabf05c1",326:"ba30bb47",328:"e0d6e6dc",401:"17896441",419:"9180b37b",439:"140a8099",514:"932438b4",536:"da90494d",541:"56316f3f",557:"c9dca19d",571:"bf417703",574:"63def8f5",585:"efeb2804",588:"2b9ac54a",622:"c23bd39a",634:"c4f5d8e4",647:"5e95c892",669:"9edb15d8",685:"2de8a64b",742:"aba21aa0",794:"90e27583",888:"58a57edf",903:"f8409a7e",915:"2487527e",948:"a44a6861",969:"14eb3368",982:"79d873be"}[e]||e)+"."+{10:"301971e7",48:"12f8560b",54:"7800c1e6",56:"73eb78a1",60:"1dc5c6b9",80:"8ae8e7ae",91:"fa4a8b07",98:"e5e02b8a",100:"3674461d",107:"29cabd74",144:"8356c462",160:"e20c27e9",176:"4ccae590",201:"1b4d3a70",202:"2fa4cfe2",219:"2a975454",235:"2f7a7300",237:"f6a779dd",246:"02bf6ef0",315:"5edf4374",326:"a96cda2c",328:"14c0f3a7",401:"6bb8ff9c",419:"28ec37b5",439:"6ce55756",514:"f4616486",536:"e34f8aa9",541:"075f3cb7",557:"c9998678",571:"ee6ddaa7",574:"84f1a65b",585:"a37ff4d9",588:"57f0e62e",622:"0cdec3d1",634:"3582c315",647:"72fff1a5",669:"b6ea81c2",685:"0aeb7b31",742:"d09a9927",794:"36e02f53",888:"072ec09f",903:"6f2e90a9",915:"8180fe4e",948:"eaf8176c",969:"dea5486b",982:"14b90328"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},d="my-docs:",c.l=(e,a,t,f)=>{if(r[e])r[e].push(a);else{var o,b;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i<n.length;i++){var u=n[i];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==d+t){o=u;break}}o||(b=!0,(o=document.createElement("script")).charset="utf-8",o.timeout=120,c.nc&&o.setAttribute("nonce",c.nc),o.setAttribute("data-webpack",d+t),o.src=e),r[e]=[a];var l=(a,t)=>{o.onerror=o.onload=null,clearTimeout(s);var d=r[e];if(delete r[e],o.parentNode&&o.parentNode.removeChild(o),d&&d.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=l.bind(null,o.onerror),o.onload=l.bind(null,o.onload),b&&document.head.appendChild(o)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/reanimated-color-picker/",c.gca=function(e){return e={17896441:"401","126391be":"10",a94703ab:"48","2fc6c5ee":"54","8771582a":"56","94e8e772":"60","0489dd59":"80","39eaec8f":"91",a7bd4aaa:"98","84f4edb4":"100","7166dec0":"107",f299953f:"144",e73706c6:"160","8d402cb0":"176","8bf99691":"201","42602a95":"202","1e2bc623":"219",a7456010:"235",dabf05c1:"315",ba30bb47:"326",e0d6e6dc:"328","9180b37b":"419","140a8099":"439","932438b4":"514",da90494d:"536","56316f3f":"541",c9dca19d:"557",bf417703:"571","63def8f5":"574",efeb2804:"585","2b9ac54a":"588",c23bd39a:"622",c4f5d8e4:"634","5e95c892":"647","9edb15d8":"669","2de8a64b":"685",aba21aa0:"742","90e27583":"794","58a57edf":"888",f8409a7e:"903","2487527e":"915",a44a6861:"948","14eb3368":"969","79d873be":"982"}[e]||e,c.p+c.u(e)},(()=>{var e={354:0,869:0};c.f.j=(a,t)=>{var r=c.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(354|869)$/.test(a))e[a]=0;else{var d=new Promise(((t,d)=>r=e[a]=[t,d]));t.push(r[2]=d);var f=c.p+c.u(a),o=new Error;c.l(f,(t=>{if(c.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var d=t&&("load"===t.type?"missing":t.type),f=t&&t.target&&t.target.src;o.message="Loading chunk "+a+" failed.\n("+d+": "+f+")",o.name="ChunkLoadError",o.type=d,o.request=f,r[1](o)}}),"chunk-"+a,a)}},c.O.j=a=>0===e[a];var a=(a,t)=>{var r,d,f=t[0],o=t[1],b=t[2],n=0;if(f.some((a=>0!==e[a]))){for(r in o)c.o(o,r)&&(c.m[r]=o[r]);if(b)var i=b(c)}for(a&&a(t);n<f.length;n++)d=f[n],c.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return c.O(i)},t=self.webpackChunkmy_docs=self.webpackChunkmy_docs||[];t.forEach(a.bind(null,0)),t.push=a.bind(null,t.push.bind(t))})()})();
\ No newline at end of file
diff --git a/docs/build/assets/js/runtime~main.0a48d42a.js b/docs/build/assets/js/runtime~main.0a48d42a.js
new file mode 100644
index 0000000..62bdb61
--- /dev/null
+++ b/docs/build/assets/js/runtime~main.0a48d42a.js
@@ -0,0 +1,306 @@
+(() => {
+  'use strict';
+  var e,
+    a,
+    t,
+    r,
+    f,
+    c = {},
+    b = {};
+  function d(e) {
+    var a = b[e];
+    if (void 0 !== a) return a.exports;
+    var t = (b[e] = { id: e, loaded: !1, exports: {} });
+    return c[e].call(t.exports, t, t.exports, d), (t.loaded = !0), t.exports;
+  }
+  (d.m = c),
+    (d.c = b),
+    (e = []),
+    (d.O = (a, t, r, f) => {
+      if (!t) {
+        var c = 1 / 0;
+        for (i = 0; i < e.length; i++) {
+          (t = e[i][0]), (r = e[i][1]), (f = e[i][2]);
+          for (var b = !0, o = 0; o < t.length; o++)
+            (!1 & f || c >= f) && Object.keys(d.O).every(e => d.O[e](t[o])) ? t.splice(o--, 1) : ((b = !1), f < c && (c = f));
+          if (b) {
+            e.splice(i--, 1);
+            var n = r();
+            void 0 !== n && (a = n);
+          }
+        }
+        return a;
+      }
+      f = f || 0;
+      for (var i = e.length; i > 0 && e[i - 1][2] > f; i--) e[i] = e[i - 1];
+      e[i] = [t, r, f];
+    }),
+    (d.n = e => {
+      var a = e && e.__esModule ? () => e.default : () => e;
+      return d.d(a, { a: a }), a;
+    }),
+    (t = Object.getPrototypeOf ? e => Object.getPrototypeOf(e) : e => e.__proto__),
+    (d.t = function (e, r) {
+      if ((1 & r && (e = this(e)), 8 & r)) return e;
+      if ('object' == typeof e && e) {
+        if (4 & r && e.__esModule) return e;
+        if (16 & r && 'function' == typeof e.then) return e;
+      }
+      var f = Object.create(null);
+      d.r(f);
+      var c = {};
+      a = a || [null, t({}), t([]), t(t)];
+      for (var b = 2 & r && e; 'object' == typeof b && !~a.indexOf(b); b = t(b))
+        Object.getOwnPropertyNames(b).forEach(a => (c[a] = () => e[a]));
+      return (c.default = () => e), d.d(f, c), f;
+    }),
+    (d.d = (e, a) => {
+      for (var t in a) d.o(a, t) && !d.o(e, t) && Object.defineProperty(e, t, { enumerable: !0, get: a[t] });
+    }),
+    (d.f = {}),
+    (d.e = e => Promise.all(Object.keys(d.f).reduce((a, t) => (d.f[t](e, a), a), []))),
+    (d.u = e =>
+      'assets/js/' +
+      ({
+        53: '935f2afb',
+        99: '2b9ac54a',
+        114: '7166dec0',
+        166: '140a8099',
+        176: 'c7c5d45f',
+        181: 'a44a6861',
+        195: 'c4f5d8e4',
+        202: '4bdabec4',
+        206: 'f8409a7e',
+        218: 'e73706c6',
+        241: '359ca393',
+        257: '56316f3f',
+        287: '8771582a',
+        368: 'a94703ab',
+        371: '63def8f5',
+        387: 'ba30bb47',
+        390: '932438b4',
+        404: '9edb15d8',
+        405: '8bf99691',
+        412: 'c098eb0d',
+        447: 'be41ce4f',
+        454: '2de8a64b',
+        476: 'bf417703',
+        518: 'a7bd4aaa',
+        519: 'e0d6e6dc',
+        529: '8d402cb0',
+        617: '739c95ba',
+        622: '79d873be',
+        639: '2fc6c5ee',
+        657: 'd779562e',
+        661: '5e95c892',
+        753: 'efeb2804',
+        756: '702bc698',
+        782: 'ef3214ef',
+        786: '94e8e772',
+        817: '14eb3368',
+        839: '90e27583',
+        873: '39eaec8f',
+        875: 'c23bd39a',
+        918: '17896441',
+        928: '5de8bf0b',
+        943: '58a57edf',
+        985: '126391be',
+        998: '9180b37b',
+      }[e] || e) +
+      '.' +
+      {
+        53: '5d5bf7e1',
+        99: 'e4b8602a',
+        114: '40c52d8e',
+        166: 'f3bff30f',
+        176: '85ccb7c9',
+        181: '9fbac2d7',
+        195: '255fcf4f',
+        202: '40ea22e5',
+        206: '0aa7ddad',
+        218: 'c748fb3d',
+        241: 'e03a07f3',
+        257: '45150f4e',
+        287: '504eedc5',
+        349: '4d780a60',
+        368: 'ddd5d0fe',
+        371: 'b163646c',
+        387: 'c09e211f',
+        390: '2530e524',
+        404: '7157147b',
+        405: 'f30381ff',
+        412: '7d5059b8',
+        447: 'be45697c',
+        454: 'b97d2da5',
+        476: 'bb817925',
+        518: 'a2f791de',
+        519: 'bfc78ff8',
+        529: '2d42b477',
+        617: '9edf9d13',
+        622: 'd3b401d6',
+        639: '64a63f09',
+        657: 'c9406fac',
+        661: '1cff72b0',
+        753: 'b279341f',
+        756: '050574b1',
+        772: 'c9c858f4',
+        782: '2a11b714',
+        786: '5fa20434',
+        817: '4bda261b',
+        839: '4a3037b6',
+        873: '4f480351',
+        875: 'bf7f31af',
+        918: 'd60327e5',
+        928: '62db067d',
+        943: '66c25246',
+        985: 'ea648361',
+        998: 'd8341b90',
+      }[e] +
+      '.js'),
+    (d.miniCssF = e => {}),
+    (d.g = (function () {
+      if ('object' == typeof globalThis) return globalThis;
+      try {
+        return this || new Function('return this')();
+      } catch (e) {
+        if ('object' == typeof window) return window;
+      }
+    })()),
+    (d.o = (e, a) => Object.prototype.hasOwnProperty.call(e, a)),
+    (r = {}),
+    (f = 'my-docs:'),
+    (d.l = (e, a, t, c) => {
+      if (r[e]) r[e].push(a);
+      else {
+        var b, o;
+        if (void 0 !== t)
+          for (var n = document.getElementsByTagName('script'), i = 0; i < n.length; i++) {
+            var u = n[i];
+            if (u.getAttribute('src') == e || u.getAttribute('data-webpack') == f + t) {
+              b = u;
+              break;
+            }
+          }
+        b ||
+          ((o = !0),
+          ((b = document.createElement('script')).charset = 'utf-8'),
+          (b.timeout = 120),
+          d.nc && b.setAttribute('nonce', d.nc),
+          b.setAttribute('data-webpack', f + t),
+          (b.src = e)),
+          (r[e] = [a]);
+        var l = (a, t) => {
+            (b.onerror = b.onload = null), clearTimeout(s);
+            var f = r[e];
+            if ((delete r[e], b.parentNode && b.parentNode.removeChild(b), f && f.forEach(e => e(t)), a)) return a(t);
+          },
+          s = setTimeout(l.bind(null, void 0, { type: 'timeout', target: b }), 12e4);
+        (b.onerror = l.bind(null, b.onerror)), (b.onload = l.bind(null, b.onload)), o && document.head.appendChild(b);
+      }
+    }),
+    (d.r = e => {
+      'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
+        Object.defineProperty(e, '__esModule', { value: !0 });
+    }),
+    (d.p = '/reanimated-color-picker/'),
+    (d.gca = function (e) {
+      return (
+        (e =
+          {
+            17896441: '918',
+            '935f2afb': '53',
+            '2b9ac54a': '99',
+            '7166dec0': '114',
+            '140a8099': '166',
+            c7c5d45f: '176',
+            a44a6861: '181',
+            c4f5d8e4: '195',
+            '4bdabec4': '202',
+            f8409a7e: '206',
+            e73706c6: '218',
+            '359ca393': '241',
+            '56316f3f': '257',
+            '8771582a': '287',
+            a94703ab: '368',
+            '63def8f5': '371',
+            ba30bb47: '387',
+            '932438b4': '390',
+            '9edb15d8': '404',
+            '8bf99691': '405',
+            c098eb0d: '412',
+            be41ce4f: '447',
+            '2de8a64b': '454',
+            bf417703: '476',
+            a7bd4aaa: '518',
+            e0d6e6dc: '519',
+            '8d402cb0': '529',
+            '739c95ba': '617',
+            '79d873be': '622',
+            '2fc6c5ee': '639',
+            d779562e: '657',
+            '5e95c892': '661',
+            efeb2804: '753',
+            '702bc698': '756',
+            ef3214ef: '782',
+            '94e8e772': '786',
+            '14eb3368': '817',
+            '90e27583': '839',
+            '39eaec8f': '873',
+            c23bd39a: '875',
+            '5de8bf0b': '928',
+            '58a57edf': '943',
+            '126391be': '985',
+            '9180b37b': '998',
+          }[e] || e),
+        d.p + d.u(e)
+      );
+    }),
+    (() => {
+      var e = { 303: 0, 532: 0 };
+      (d.f.j = (a, t) => {
+        var r = d.o(e, a) ? e[a] : void 0;
+        if (0 !== r)
+          if (r) t.push(r[2]);
+          else if (/^(303|532)$/.test(a)) e[a] = 0;
+          else {
+            var f = new Promise((t, f) => (r = e[a] = [t, f]));
+            t.push((r[2] = f));
+            var c = d.p + d.u(a),
+              b = new Error();
+            d.l(
+              c,
+              t => {
+                if (d.o(e, a) && (0 !== (r = e[a]) && (e[a] = void 0), r)) {
+                  var f = t && ('load' === t.type ? 'missing' : t.type),
+                    c = t && t.target && t.target.src;
+                  (b.message = 'Loading chunk ' + a + ' failed.\n(' + f + ': ' + c + ')'),
+                    (b.name = 'ChunkLoadError'),
+                    (b.type = f),
+                    (b.request = c),
+                    r[1](b);
+                }
+              },
+              'chunk-' + a,
+              a,
+            );
+          }
+      }),
+        (d.O.j = a => 0 === e[a]);
+      var a = (a, t) => {
+          var r,
+            f,
+            c = t[0],
+            b = t[1],
+            o = t[2],
+            n = 0;
+          if (c.some(a => 0 !== e[a])) {
+            for (r in b) d.o(b, r) && (d.m[r] = b[r]);
+            if (o) var i = o(d);
+          }
+          for (a && a(t); n < c.length; n++) (f = c[n]), d.o(e, f) && e[f] && e[f][0](), (e[f] = 0);
+          return d.O(i);
+        },
+        t = (self.webpackChunkmy_docs = self.webpackChunkmy_docs || []);
+      t.forEach(a.bind(null, 0)), (t.push = a.bind(null, t.push.bind(t)));
+    })();
+})();
diff --git a/docs/build/docs/API/ColorPicker/index.html b/docs/build/docs/API/ColorPicker/index.html
index 9c2c5ae..b19a28a 100644
--- a/docs/build/docs/API/ColorPicker/index.html
+++ b/docs/build/docs/API/ColorPicker/index.html
@@ -1,178 +1,992 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/ColorPicker" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">ColorPicker Wrapper | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="ColorPicker Wrapper | Reanimated Color Picker"><meta data-rh="true" name="description" content="Responsible for managing the built-in components"><meta data-rh="true" property="og:description" content="Responsible for managing the built-in components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"ColorPicker Wrapper","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">ColorPicker Wrapper</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>ColorPicker Wrapper</h1></header>
-<ul>
-<li>The <code>ColorPicker</code> Wrapper is responsible for managing the built-in components.</li>
-</ul>
-<div class="theme-admonition theme-admonition-caution admonition_xJq3 alert alert--warning"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_BuS1"><p>All built-in components should be wrapped within the <code>ColorPicker</code> component.</p></div></div>
-<ul>
-<li>You can nest components within the <code>ColorPicker</code> wrapper to achieve the desired level of customization.</li>
-</ul>
-<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Preview</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel1</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">HueSlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">vertical</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Text</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text">Opacity</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Text</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">OpacitySlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Swatches</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><br></span></code></pre></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="value"><code>value</code><a href="#value" class="hash-link" aria-label="Direct link to value" title="Direct link to value">​</a></h3>
-<ul>
-<li>The initial color that should be displayed when the <code>ColorPicker</code> is loaded.</li>
-<li>If the <code>value</code> property is modified, the <code>ColorPicker</code> will automatically update the displayed color.</li>
-<li>Accepts: <code>&#x27;hex&#x27; | &#x27;rgb&#x27; | &#x27;rgba&#x27; | &#x27;hsl&#x27; | &#x27;hsla&#x27; | &#x27;hsv&#x27; | &#x27;hsva&#x27; | &#x27;hwb&#x27; | &#x27;hwba&#x27; | named colors</code> formats.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;#fff&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>A global property that allows the slider background color spectrum to adapt to changes in brightness and saturation for all descendant slider components.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>A global property for all descendant sliders and panels components.</li>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>A global property that allows for changing the thickness of all descendant slider components.</li>
-<li>The thickness refers to the <code>width</code> of the slider in the case of a <code>vertical</code> orientation, and the <code>height</code> in the case of a <code>horizontal</code> orientation.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbanimationduration"><code>thumbAnimationDuration</code><a href="#thumbanimationduration" class="hash-link" aria-label="Direct link to thumbanimationduration" title="Direct link to thumbanimationduration">​</a></h3>
-<ul>
-<li>A global property to change the duration which the thumbs animate when the value prop changes.</li>
-<li><code>type: number</code></li>
-<li><code>default: 200</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>A global property for changing the thumb size of all descendant slider components.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>A global property for changing the thumb color of all descendant slider components.</li>
-<li><code>type: string</code></li>
-<li><code>default: undefined</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>A global property that allows for the alteration of the thumb shape and appearance of all descendant slider components.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>A global property to change the style of the thumb&#x27;s View for all descendant sliders components.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>A global property to change the color of the thumb&#x27;s inner View(s) for all descendant sliders components.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>A global property to controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>A global property to sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The container style of the <code>ColorPicker</code>.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchange"><code>onChange</code><a href="#onchange" class="hash-link" aria-label="Direct link to onchange" title="Direct link to onchange">​</a></h3>
-<ul>
-<li>Triggers every time the user modifies the color.</li>
-<li>Accepts <code>worklet</code> function only. For non-<code>worklet</code> functions, use <code>onChangeJS</code>.</li>
-<li>The passed color object has the following properties: <code>hex</code>, <code>rgb</code>, <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>, <code>hsl</code>, and <code>hsla</code></li>
-<li><code>type: (color: object) =&gt; void</code></li>
-<li><code>default: undefined</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchangejs"><code>onChangeJS</code><a href="#onchangejs" class="hash-link" aria-label="Direct link to onchangejs" title="Direct link to onchangejs">​</a></h3>
-<ul>
-<li>Triggers every time the user modifies the color.</li>
-<li>Accepts none-<code>worklet</code> function. For <code>worklet</code> functions, use <code>onChange</code>.</li>
-<li>The passed color object has the following properties: <code>hex</code>, <code>rgb</code>, <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>, <code>hsl</code>, and <code>hsla</code></li>
-<li><code>type: (color: object) =&gt; void</code></li>
-<li><code>default: undefined</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><ul>
-<li>To prevent performance issues, it is best to avoid using <code>setState</code> in the <code>onChange</code> callback.</li>
-<li>It is highly recommended to utilize the <code>useSharedValue</code> function from the <code>react-native-reanimated</code> library.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="oncomplete"><code>onComplete</code><a href="#oncomplete" class="hash-link" aria-label="Direct link to oncomplete" title="Direct link to oncomplete">​</a></h3>
-<ul>
-<li>Triggered upon the user releasing the slider handle or clicking on a swatch.</li>
-<li>Accepts <code>worklet</code> function only. For non-<code>worklet</code> functions, use <code>onCompleteJS</code>.</li>
-<li>The function passed can be a <code>worklet</code> function.</li>
-<li>The passed color object has the following properties: <code>hex</code>, <code>rgb</code>, <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>, <code>hsl</code>, and <code>hsla</code></li>
-<li><code>type: (color: object) =&gt; void</code></li>
-<li><code>default: undefined</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="oncompletejs"><code>onCompleteJS</code><a href="#oncompletejs" class="hash-link" aria-label="Direct link to oncompletejs" title="Direct link to oncompletejs">​</a></h3>
-<ul>
-<li>Triggered upon the user releasing the slider handle or clicking on a swatch.</li>
-<li>Accepts none-<code>worklet</code> function. For <code>worklet</code> functions, use <code>onComplete</code>.</li>
-<li>The function passed can be a <code>worklet</code> function.</li>
-<li>The passed color object has the following properties: <code>hex</code>, <code>rgb</code>, <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>, <code>hsl</code>, and <code>hsla</code></li>
-<li><code>type: (color: object) =&gt; void</code></li>
-<li><code>default: undefined</code></li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="methods">Methods<a href="#methods" class="hash-link" aria-label="Direct link to Methods" title="Direct link to Methods">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setcolor"><code>setColor</code><a href="#setcolor" class="hash-link" aria-label="Direct link to setcolor" title="Direct link to setcolor">​</a></h3>
-<ul>
-<li>
-<p>Set the currently displayed color in the color picker to a new one.</p>
-</li>
-<li>
-<p>Note that this won’t trigger any events like <code>onChange</code> or <code>onComplete</code>.</p>
-</li>
-<li>
-<p>This is useful if you want to update the displayed color without binding a state to the color picker <code>value</code> property.</p>
-</li>
-<li>
-<p><code>type: (color: string, duration?: number) =&gt; void</code></p>
-</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ColorPicker</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">ColorPickerRef</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyComponent</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> pickerRef </span><span class="token operator">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:rgb(80, 250, 123)">useRef</span><span class="token generic-function generic class-name operator">&lt;</span><span class="token generic-function generic class-name">ColorPickerRef</span><span class="token generic-function generic class-name operator">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">null</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(80, 250, 123)">setNewColorHandle</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">pickerRef</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">      pickerRef</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">pickerRef</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token comment" style="color:rgb(98, 114, 164)">/* the rest of your code */</span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/api"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">API</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/panels"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Panels</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#value" class="table-of-contents__link toc-highlight"><code>value</code></a></li><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbanimationduration" class="table-of-contents__link toc-highlight"><code>thumbAnimationDuration</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li><li><a href="#onchange" class="table-of-contents__link toc-highlight"><code>onChange</code></a></li><li><a href="#onchangejs" class="table-of-contents__link toc-highlight"><code>onChangeJS</code></a></li><li><a href="#oncomplete" class="table-of-contents__link toc-highlight"><code>onComplete</code></a></li><li><a href="#oncompletejs" class="table-of-contents__link toc-highlight"><code>onCompleteJS</code></a></li></ul></li><li><a href="#methods" class="table-of-contents__link toc-highlight">Methods</a><ul><li><a href="#setcolor" class="table-of-contents__link toc-highlight"><code>setColor</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/ColorPicker"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">ColorPicker Wrapper | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="ColorPicker Wrapper | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="Responsible for managing the built-in components" />
+    <meta data-rh="true" property="og:description" content="Responsible for managing the built-in components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/ColorPicker"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a
+                              class="menu__link menu__link--active"
+                              aria-current="page"
+                              tabindex="0"
+                              href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">ColorPicker Wrapper</span
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1>ColorPicker Wrapper</h1>
+                          <ul>
+                            <li>The <code>ColorPicker</code> Wrapper is responsible for managing the built-in components.</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-caution admonition_xJq3 alert alert--warning">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 16 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
+                                  ></path></svg></span
+                              >caution
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <p>All built-in components should be wrapped within the <code>ColorPicker</code> component.</p>
+                            </div>
+                          </div>
+                          <ul>
+                            <li>
+                              You can nest components within the <code>ColorPicker</code> wrapper to achieve the desired level of
+                              customization.
+                            </li>
+                          </ul>
+                          <div
+                            class="language-jsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Preview</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel1</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">HueSlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">vertical</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Text</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text">Opacity</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Text</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">OpacitySlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Swatches</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="value">
+                            <code>value</code
+                            ><a href="#value" class="hash-link" aria-label="Direct link to value" title="Direct link to value"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The initial color that should be displayed when the <code>ColorPicker</code> is loaded.</li>
+                            <li>
+                              If the <code>value</code> property is modified, the <code>ColorPicker</code> will automatically
+                              update the displayed color.
+                            </li>
+                            <li>
+                              Accepts:
+                              <code
+                                >&#x27;hex&#x27; | &#x27;rgb&#x27; | &#x27;rgba&#x27; | &#x27;hsl&#x27; | &#x27;hsla&#x27; |
+                                &#x27;hsv&#x27; | &#x27;hsva&#x27; | &#x27;hwb&#x27; | &#x27;hwba&#x27; | named colors</code
+                              >
+                              formats.
+                            </li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;#fff&#x27;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              A global property that allows the slider background color spectrum to adapt to changes in brightness
+                              and saturation for all descendant slider components.
+                            </li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>A global property for all descendant sliders and panels components.</li>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>A global property that allows for changing the thickness of all descendant slider components.</li>
+                            <li>
+                              The thickness refers to the <code>width</code> of the slider in the case of a
+                              <code>vertical</code> orientation, and the <code>height</code> in the case of a
+                              <code>horizontal</code> orientation.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbanimationduration">
+                            <code>thumbAnimationDuration</code
+                            ><a
+                              href="#thumbanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbanimationduration"
+                              title="Direct link to thumbanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              A global property to change the duration which the thumbs animate when the value prop changes.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 200</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>A global property for changing the thumb size of all descendant slider components.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>A global property for changing the thumb color of all descendant slider components.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: undefined</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              A global property that allows for the alteration of the thumb shape and appearance of all descendant
+                              slider components.
+                            </li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              A global property to change the style of the thumb&#x27;s View for all descendant sliders
+                              components.
+                            </li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              A global property to change the color of the thumb&#x27;s inner View(s) for all descendant sliders
+                              components.
+                            </li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>A global property to controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>A global property to sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The container style of the <code>ColorPicker</code>.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchange">
+                            <code>onChange</code
+                            ><a
+                              href="#onchange"
+                              class="hash-link"
+                              aria-label="Direct link to onchange"
+                              title="Direct link to onchange"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Triggers every time the user modifies the color.</li>
+                            <li>
+                              Accepts <code>worklet</code> function only. For non-<code>worklet</code> functions, use
+                              <code>onChangeJS</code>.
+                            </li>
+                            <li>
+                              The passed color object has the following properties: <code>hex</code>, <code>rgb</code>,
+                              <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>,
+                              <code>hsl</code>, and <code>hsla</code>
+                            </li>
+                            <li><code>type: (color: object) =&gt; void</code></li>
+                            <li><code>default: undefined</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchangejs">
+                            <code>onChangeJS</code
+                            ><a
+                              href="#onchangejs"
+                              class="hash-link"
+                              aria-label="Direct link to onchangejs"
+                              title="Direct link to onchangejs"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Triggers every time the user modifies the color.</li>
+                            <li>
+                              Accepts none-<code>worklet</code> function. For <code>worklet</code> functions, use
+                              <code>onChange</code>.
+                            </li>
+                            <li>
+                              The passed color object has the following properties: <code>hex</code>, <code>rgb</code>,
+                              <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>,
+                              <code>hsl</code>, and <code>hsla</code>
+                            </li>
+                            <li><code>type: (color: object) =&gt; void</code></li>
+                            <li><code>default: undefined</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+                                  ></path></svg></span
+                              >tip
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  To prevent performance issues, it is best to avoid using <code>setState</code> in the
+                                  <code>onChange</code> callback.
+                                </li>
+                                <li>
+                                  It is highly recommended to utilize the <code>useSharedValue</code> function from the
+                                  <code>react-native-reanimated</code> library.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="oncomplete">
+                            <code>onComplete</code
+                            ><a
+                              href="#oncomplete"
+                              class="hash-link"
+                              aria-label="Direct link to oncomplete"
+                              title="Direct link to oncomplete"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Triggered upon the user releasing the slider handle or clicking on a swatch.</li>
+                            <li>
+                              Accepts <code>worklet</code> function only. For non-<code>worklet</code> functions, use
+                              <code>onCompleteJS</code>.
+                            </li>
+                            <li>The function passed can be a <code>worklet</code> function.</li>
+                            <li>
+                              The passed color object has the following properties: <code>hex</code>, <code>rgb</code>,
+                              <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>,
+                              <code>hsl</code>, and <code>hsla</code>
+                            </li>
+                            <li><code>type: (color: object) =&gt; void</code></li>
+                            <li><code>default: undefined</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="oncompletejs">
+                            <code>onCompleteJS</code
+                            ><a
+                              href="#oncompletejs"
+                              class="hash-link"
+                              aria-label="Direct link to oncompletejs"
+                              title="Direct link to oncompletejs"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Triggered upon the user releasing the slider handle or clicking on a swatch.</li>
+                            <li>
+                              Accepts none-<code>worklet</code> function. For <code>worklet</code> functions, use
+                              <code>onComplete</code>.
+                            </li>
+                            <li>The function passed can be a <code>worklet</code> function.</li>
+                            <li>
+                              The passed color object has the following properties: <code>hex</code>, <code>rgb</code>,
+                              <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>,
+                              <code>hsl</code>, and <code>hsla</code>
+                            </li>
+                            <li><code>type: (color: object) =&gt; void</code></li>
+                            <li><code>default: undefined</code></li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="methods">
+                            Methods<a
+                              href="#methods"
+                              class="hash-link"
+                              aria-label="Direct link to Methods"
+                              title="Direct link to Methods"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setcolor">
+                            <code>setColor</code
+                            ><a
+                              href="#setcolor"
+                              class="hash-link"
+                              aria-label="Direct link to setcolor"
+                              title="Direct link to setcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              <p>Set the currently displayed color in the color picker to a new one.</p>
+                            </li>
+                            <li>
+                              <p>
+                                Note that this won’t trigger any events like <code>onChange</code> or <code>onComplete</code>.
+                              </p>
+                            </li>
+                            <li>
+                              <p>
+                                This is useful if you want to update the displayed color without binding a state to the color
+                                picker <code>value</code> property.
+                              </p>
+                            </li>
+                            <li>
+                              <p><code>type: (color: string, duration?: number) =&gt; void</code></p>
+                            </li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ColorPicker</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">ColorPickerRef</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyComponent</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> pickerRef </span><span class="token operator">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:rgb(80, 250, 123)">useRef</span><span class="token generic-function generic class-name operator">&lt;</span><span class="token generic-function generic class-name">ColorPickerRef</span><span class="token generic-function generic class-name operator">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">null</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(80, 250, 123)">setNewColorHandle</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">pickerRef</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">      pickerRef</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">pickerRef</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token comment" style="color:rgb(98, 114, 164)">/* the rest of your code */</span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/category/api"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">API</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/category/panels"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Panels</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#value" class="table-of-contents__link toc-highlight"><code>value</code></a>
+                            </li>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a>
+                            </li>
+                            <li>
+                              <a href="#sliderthickness" class="table-of-contents__link toc-highlight"
+                                ><code>sliderThickness</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbanimationduration" class="table-of-contents__link toc-highlight"
+                                ><code>thumbAnimationDuration</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>thumbInnerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationValue</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationDuration</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                            <li>
+                              <a href="#onchange" class="table-of-contents__link toc-highlight"><code>onChange</code></a>
+                            </li>
+                            <li>
+                              <a href="#onchangejs" class="table-of-contents__link toc-highlight"><code>onChangeJS</code></a>
+                            </li>
+                            <li>
+                              <a href="#oncomplete" class="table-of-contents__link toc-highlight"><code>onComplete</code></a>
+                            </li>
+                            <li>
+                              <a href="#oncompletejs" class="table-of-contents__link toc-highlight"><code>onCompleteJS</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <a href="#methods" class="table-of-contents__link toc-highlight">Methods</a>
+                          <ul>
+                            <li>
+                              <a href="#setcolor" class="table-of-contents__link toc-highlight"><code>setColor</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Panels/Panel1/index.html b/docs/build/docs/API/Panels/Panel1/index.html
index 316c393..acce0df 100644
--- a/docs/build/docs/API/Panels/Panel1/index.html
+++ b/docs/build/docs/API/Panels/Panel1/index.html
@@ -1,111 +1,745 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel1" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;Panel1 /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;Panel1 /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors."><meta data-rh="true" property="og:description" content="A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Panels","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"},{"@type":"ListItem","position":3,"name":"Panel1","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Collapse sidebar category &#x27;Panels&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/panels"><span>Panels</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Panel1</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;Panel1 /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="panel1" src="/reanimated-color-picker/assets/images/panel1-467da7d5cafc669fd31a29110ad12315.png" width="200" height="200" class="img_ev3q"></p>
-<ul>
-<li>
-<p>A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors..</p>
-</li>
-<li>
-<p>Move the handle horizontally to change the color&#x27;s saturation.</p>
-</li>
-<li>
-<p>Move the handle vertically to change the color&#x27;s brightness.</p>
-</li>
-</ul>
-<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><ul>
-<li>Add <a href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"><code>&lt;HueSlider /&gt;</code></a> component also to gain control over the three color channels.</li>
-</ul></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<ul>
-<li>Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.</li>
-<li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>Panel&#x27;s handle (thumb) size (height*width).</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s color.</li>
-<li><code>type: string</code></li>
-<li><code>default</code>: interactive*</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s shape and appearance.</li>
-<li><code>type: string</code></li>
-<li><code>values</code>: <code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Panel&#x27;s container style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/panels"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Panels</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Panels/Panel2"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Panel2</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel1"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;Panel1 /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;Panel1 /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel1"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                                  >Panel1</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                                  >Panel2</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                                  >Panel3</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                                  >Panel4</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                                  >Panel5</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/panels"
+                                ><span itemprop="name">Panels</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Panel1</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;Panel1 /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="panel1"
+                              src="/reanimated-color-picker/assets/images/panel1-467da7d5cafc669fd31a29110ad12315.png"
+                              width="200"
+                              height="200"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <p>
+                                A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and
+                                saturation of colors..
+                              </p>
+                            </li>
+                            <li>
+                              <p>Move the handle horizontally to change the color&#x27;s saturation.</p>
+                            </li>
+                            <li>
+                              <p>Move the handle vertically to change the color&#x27;s brightness.</p>
+                            </li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+                                  ></path></svg></span
+                              >tip
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  Add
+                                  <a href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+                                    ><code>&lt;HueSlider /&gt;</code></a
+                                  >
+                                  component also to gain control over the three color channels.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Determines whether the panel slider thumb (or handle) should be constrained to stay within the
+                              boundaries of the panel.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s handle (thumb) size (height*width).</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s color.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default</code>: interactive*</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s shape and appearance.</li>
+                            <li><code>type: string</code></li>
+                            <li>
+                              <code>values</code>:
+                              <code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s container style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/category/panels"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Panels</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Panel2</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>thumbInnerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationValue</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationDuration</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a>
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Panels/Panel2/index.html b/docs/build/docs/API/Panels/Panel2/index.html
index cf386c1..3a9d9b0 100644
--- a/docs/build/docs/API/Panels/Panel2/index.html
+++ b/docs/build/docs/API/Panels/Panel2/index.html
@@ -1,133 +1,859 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel2" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;Panel2 /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;Panel2 /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels."><meta data-rh="true" property="og:description" content="A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Panels","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"},{"@type":"ListItem","position":3,"name":"Panel2","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Collapse sidebar category &#x27;Panels&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/panels"><span>Panels</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Panel2</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;Panel2 /&gt;</code></h1></header>
-<table><thead><tr><th style="text-align:center"><strong>vertical channel: &quot;saturation&quot;</strong></th><th style="text-align:center"><strong>vertical channel: &quot;brightness&quot;</strong></th><th style="text-align:center"><strong>vertical channel: &quot;hsl-saturation&quot;</strong></th></tr></thead><tbody><tr><td style="text-align:center"><img decoding="async" loading="lazy" alt="panel2-saturation" src="/reanimated-color-picker/assets/images/panel2-saturation-bc20014dcc48696ed58273d705b447c4.png" width="200" height="200" class="img_ev3q"></td><td style="text-align:center"><img decoding="async" loading="lazy" alt="panel2-brightness" src="/reanimated-color-picker/assets/images/panel2-brightness-389d07bf3f673e64e02a6b9d52f36e59.png" width="200" height="200" class="img_ev3q"></td><td style="text-align:center"><img decoding="async" loading="lazy" alt="panel2-hsl-saturation" src="/reanimated-color-picker/assets/images/panel2-hsl-saturation-c1190fbd46bfd8ff0bdf4bc45be99a8f.png" width="200" height="200" class="img_ev3q"></td></tr></tbody></table>
-<ul>
-<li>
-<p>A square-shaped slider (windows style) is utilized to adjust the hue and (saturation or brightness) channels.</p>
-</li>
-<li>
-<p>Move the thumb (handle) horizontally to change the color&#x27;s hue.</p>
-</li>
-<li>
-<p>Drag the thumb (handle) up or down to adjust either the saturation or the brightness of the color, depending on the <code>verticalChannel</code> prop.</p>
-</li>
-</ul>
-<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>If you want to give your users more control over the color selection, you can add another slider next to <code>Panel2</code> that adjusts the opposite channel. For example, if <code>verticalChannel</code> is <code>&quot;saturation&quot;</code>, you can add a <a href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"><code>&lt;BrightnessSlider /&gt;</code></a>, and vice versa.</p></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="verticalchannel"><code>verticalChannel</code><a href="#verticalchannel" class="hash-link" aria-label="Direct link to verticalchannel" title="Direct link to verticalchannel">​</a></h3>
-<ul>
-<li>Determines which color channel to adjust when moving the thumb vertically on the slider.</li>
-<li><code>type: &quot;saturation&quot; | &quot;brightness&quot; | &quot;hsl-saturation&quot;</code></li>
-<li><code>default: &quot;saturation&quot;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<ul>
-<li>Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.</li>
-<li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>Panel&#x27;s handle (thumb) size (height*width).</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s color.</li>
-<li><code>type: string</code></li>
-<li><code>default</code>: interactive*</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The thumb color will be changed depending on the contrast ratio if no color value is passed.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s shape and appearance.</li>
-<li><code>type: string</code></li>
-<li><code>values</code>: <code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reversehue"><code>reverseHue</code><a href="#reversehue" class="hash-link" aria-label="Direct link to reversehue" title="Direct link to reversehue">​</a></h3>
-<ul>
-<li>Reverse (flip) hue direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverseverticalchannel"><code>reverseVerticalChannel</code><a href="#reverseverticalchannel" class="hash-link" aria-label="Direct link to reverseverticalchannel" title="Direct link to reverseverticalchannel">​</a></h3>
-<ul>
-<li>Reverse (flip) the direction of the vertical channel&#x27;s saturation or brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Panel&#x27;s container style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Panels/Panel1"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Panel1</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Panels/Panel3"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Panel3</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#verticalchannel" class="table-of-contents__link toc-highlight"><code>verticalChannel</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#reversehue" class="table-of-contents__link toc-highlight"><code>reverseHue</code></a></li><li><a href="#reverseverticalchannel" class="table-of-contents__link toc-highlight"><code>reverseVerticalChannel</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel2"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;Panel2 /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;Panel2 /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel2"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                                  >Panel1</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                                  >Panel2</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                                  >Panel3</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                                  >Panel4</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                                  >Panel5</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/panels"
+                                ><span itemprop="name">Panels</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Panel2</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;Panel2 /&gt;</code></h1>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center"><strong>vertical channel: &quot;saturation&quot;</strong></th>
+                                <th style="text-align: center"><strong>vertical channel: &quot;brightness&quot;</strong></th>
+                                <th style="text-align: center"><strong>vertical channel: &quot;hsl-saturation&quot;</strong></th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center">
+                                  <img
+                                    loading="lazy"
+                                    alt="panel2-saturation"
+                                    src="/reanimated-color-picker/assets/images/panel2-saturation-bc20014dcc48696ed58273d705b447c4.png"
+                                    width="200"
+                                    height="200"
+                                    class="img_ev3q"
+                                  />
+                                </td>
+                                <td style="text-align: center">
+                                  <img
+                                    loading="lazy"
+                                    alt="panel2-brightness"
+                                    src="/reanimated-color-picker/assets/images/panel2-brightness-389d07bf3f673e64e02a6b9d52f36e59.png"
+                                    width="200"
+                                    height="200"
+                                    class="img_ev3q"
+                                  />
+                                </td>
+                                <td style="text-align: center">
+                                  <img
+                                    loading="lazy"
+                                    alt="panel2-hsl-saturation"
+                                    src="/reanimated-color-picker/assets/images/panel2-hsl-saturation-c1190fbd46bfd8ff0bdf4bc45be99a8f.png"
+                                    width="200"
+                                    height="200"
+                                    class="img_ev3q"
+                                  />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>
+                              <p>
+                                A square-shaped slider (windows style) is utilized to adjust the hue and (saturation or
+                                brightness) channels.
+                              </p>
+                            </li>
+                            <li>
+                              <p>Move the thumb (handle) horizontally to change the color&#x27;s hue.</p>
+                            </li>
+                            <li>
+                              <p>
+                                Drag the thumb (handle) up or down to adjust either the saturation or the brightness of the color,
+                                depending on the <code>verticalChannel</code> prop.
+                              </p>
+                            </li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+                                  ></path></svg></span
+                              >tip
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <p>
+                                If you want to give your users more control over the color selection, you can add another slider
+                                next to <code>Panel2</code> that adjusts the opposite channel. For example, if
+                                <code>verticalChannel</code> is <code>&quot;saturation&quot;</code>, you can add a
+                                <a href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                                  ><code>&lt;BrightnessSlider /&gt;</code></a
+                                >, and vice versa.
+                              </p>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="verticalchannel">
+                            <code>verticalChannel</code
+                            ><a
+                              href="#verticalchannel"
+                              class="hash-link"
+                              aria-label="Direct link to verticalchannel"
+                              title="Direct link to verticalchannel"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Determines which color channel to adjust when moving the thumb vertically on the slider.</li>
+                            <li>
+                              <code>type: &quot;saturation&quot; | &quot;brightness&quot; | &quot;hsl-saturation&quot;</code>
+                            </li>
+                            <li><code>default: &quot;saturation&quot;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Determines whether the panel slider thumb (or handle) should be constrained to stay within the
+                              boundaries of the panel.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s handle (thumb) size (height*width).</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s color.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default</code>: interactive*</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The thumb color will be changed depending on the contrast ratio if no color value is passed.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s shape and appearance.</li>
+                            <li><code>type: string</code></li>
+                            <li>
+                              <code>values</code>:
+                              <code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reversehue">
+                            <code>reverseHue</code
+                            ><a
+                              href="#reversehue"
+                              class="hash-link"
+                              aria-label="Direct link to reversehue"
+                              title="Direct link to reversehue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse (flip) hue direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverseverticalchannel">
+                            <code>reverseVerticalChannel</code
+                            ><a
+                              href="#reverseverticalchannel"
+                              class="hash-link"
+                              aria-label="Direct link to reverseverticalchannel"
+                              title="Direct link to reverseverticalchannel"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse (flip) the direction of the vertical channel&#x27;s saturation or brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s container style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Panel1</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Panel3</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#verticalchannel" class="table-of-contents__link toc-highlight"
+                                ><code>verticalChannel</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>thumbInnerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationValue</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationDuration</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a>
+                            </li>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#reversehue" class="table-of-contents__link toc-highlight"><code>reverseHue</code></a>
+                            </li>
+                            <li>
+                              <a href="#reverseverticalchannel" class="table-of-contents__link toc-highlight"
+                                ><code>reverseVerticalChannel</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Panels/Panel3/index.html b/docs/build/docs/API/Panels/Panel3/index.html
index eec742f..187ac70 100644
--- a/docs/build/docs/API/Panels/Panel3/index.html
+++ b/docs/build/docs/API/Panels/Panel3/index.html
@@ -1,133 +1,859 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel3" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;Panel3 /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;Panel3 /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors."><meta data-rh="true" property="og:description" content="The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Panels","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"},{"@type":"ListItem","position":3,"name":"Panel3","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Collapse sidebar category &#x27;Panels&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/panels"><span>Panels</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Panel3</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;Panel3 /&gt;</code></h1></header>
-<table><thead><tr><th style="text-align:center"><strong>center channel: &quot;saturation&quot;</strong></th><th style="text-align:center"><strong>center channel: &quot;brightness&quot;</strong></th><th style="text-align:center"><strong>center channel: &quot;hsl-saturation&quot;</strong></th></tr></thead><tbody><tr><td style="text-align:center"><img decoding="async" loading="lazy" alt="panel3-saturation" src="/reanimated-color-picker/assets/images/panel3-saturation-dafb918fc53688c9bceef0165d7e545c.png" width="200" height="200" class="img_ev3q"></td><td style="text-align:center"><img decoding="async" loading="lazy" alt="panel3-brightness" src="/reanimated-color-picker/assets/images/panel3-brightness-968159b4b60646446d28a458e40cf53b.png" width="200" height="200" class="img_ev3q"></td><td style="text-align:center"><img decoding="async" loading="lazy" alt="panel3-hsl-saturation" src="/reanimated-color-picker/assets/images/panel3-hsl-saturation-d7bb5c9c7d0865bcf4c0f7bc60f91534.png" width="200" height="200" class="img_ev3q"></td></tr></tbody></table>
-<ul>
-<li>
-<p>The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and (saturation or brightness) of colors.</p>
-</li>
-<li>
-<p>Move thumb (handle) around the center to change the color&#x27;s hue.</p>
-</li>
-<li>
-<p>Move thumb (handle) away or toward the center to change the saturation or the brightness of the color, depending on the <code>verticalChannel</code> prop..</p>
-</li>
-</ul>
-<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>If you want to give your users more control over the color selection, you can add another slider next to this one that adjusts the opposite channel. For example, if <code>centerChannel</code> is <code>&quot;saturation&quot;</code>, you can add a <a href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"><code>&lt;BrightnessSlider /&gt;</code></a> slider, and vice versa.</p></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="centerchannel"><code>centerChannel</code><a href="#centerchannel" class="hash-link" aria-label="Direct link to centerchannel" title="Direct link to centerchannel">​</a></h3>
-<ul>
-<li>Determines which color channel to adjust when moving the thumb towards or away from the center of the circular slider.</li>
-<li><code>type: &quot;saturation&quot; | &quot;brightness&quot; | &quot;hsl-saturation&quot;</code></li>
-<li><code>default: &quot;saturation&quot;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="rotate"><code>rotate</code><a href="#rotate" class="hash-link" aria-label="Direct link to rotate" title="Direct link to rotate">​</a></h3>
-<ul>
-<li>Specify a degree of rotation for the hue circle</li>
-<li><code>type: number</code></li>
-<li><code>default: 0</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="rendercenterline"><code>renderCenterLine</code><a href="#rendercenterline" class="hash-link" aria-label="Direct link to rendercenterline" title="Direct link to rendercenterline">​</a></h3>
-<ul>
-<li>Controls whether to render a line from the center of the panel to the thumb (handle).</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<ul>
-<li>Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.</li>
-<li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>Panel&#x27;s handle (thumb) size (height*width).</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s color.</li>
-<li><code>type: string</code></li>
-<li><code>default</code>: interactive*</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The thumb color will be changed depending on the contrast ratio if no color value is passed.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s shape and appearance.</li>
-<li><code>type: string</code></li>
-<li><code>values</code>: <code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Panel&#x27;s container style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Panels/Panel2"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Panel2</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Panels/Panel4"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Panel4</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#centerchannel" class="table-of-contents__link toc-highlight"><code>centerChannel</code></a></li><li><a href="#rotate" class="table-of-contents__link toc-highlight"><code>rotate</code></a></li><li><a href="#rendercenterline" class="table-of-contents__link toc-highlight"><code>renderCenterLine</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel3"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;Panel3 /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;Panel3 /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel3"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                                  >Panel1</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                                  >Panel2</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                                  >Panel3</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                                  >Panel4</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                                  >Panel5</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/panels"
+                                ><span itemprop="name">Panels</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Panel3</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;Panel3 /&gt;</code></h1>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center"><strong>center channel: &quot;saturation&quot;</strong></th>
+                                <th style="text-align: center"><strong>center channel: &quot;brightness&quot;</strong></th>
+                                <th style="text-align: center"><strong>center channel: &quot;hsl-saturation&quot;</strong></th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center">
+                                  <img
+                                    loading="lazy"
+                                    alt="panel3-saturation"
+                                    src="/reanimated-color-picker/assets/images/panel3-saturation-dafb918fc53688c9bceef0165d7e545c.png"
+                                    width="200"
+                                    height="200"
+                                    class="img_ev3q"
+                                  />
+                                </td>
+                                <td style="text-align: center">
+                                  <img
+                                    loading="lazy"
+                                    alt="panel3-brightness"
+                                    src="/reanimated-color-picker/assets/images/panel3-brightness-968159b4b60646446d28a458e40cf53b.png"
+                                    width="200"
+                                    height="200"
+                                    class="img_ev3q"
+                                  />
+                                </td>
+                                <td style="text-align: center">
+                                  <img
+                                    loading="lazy"
+                                    alt="panel3-hsl-saturation"
+                                    src="/reanimated-color-picker/assets/images/panel3-hsl-saturation-d7bb5c9c7d0865bcf4c0f7bc60f91534.png"
+                                    width="200"
+                                    height="200"
+                                    class="img_ev3q"
+                                  />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>
+                              <p>
+                                The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and
+                                (saturation or brightness) of colors.
+                              </p>
+                            </li>
+                            <li>
+                              <p>Move thumb (handle) around the center to change the color&#x27;s hue.</p>
+                            </li>
+                            <li>
+                              <p>
+                                Move thumb (handle) away or toward the center to change the saturation or the brightness of the
+                                color, depending on the <code>verticalChannel</code> prop..
+                              </p>
+                            </li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+                                  ></path></svg></span
+                              >tip
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <p>
+                                If you want to give your users more control over the color selection, you can add another slider
+                                next to this one that adjusts the opposite channel. For example, if <code>centerChannel</code> is
+                                <code>&quot;saturation&quot;</code>, you can add a
+                                <a href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                                  ><code>&lt;BrightnessSlider /&gt;</code></a
+                                >
+                                slider, and vice versa.
+                              </p>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="centerchannel">
+                            <code>centerChannel</code
+                            ><a
+                              href="#centerchannel"
+                              class="hash-link"
+                              aria-label="Direct link to centerchannel"
+                              title="Direct link to centerchannel"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Determines which color channel to adjust when moving the thumb towards or away from the center of
+                              the circular slider.
+                            </li>
+                            <li>
+                              <code>type: &quot;saturation&quot; | &quot;brightness&quot; | &quot;hsl-saturation&quot;</code>
+                            </li>
+                            <li><code>default: &quot;saturation&quot;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="rotate">
+                            <code>rotate</code
+                            ><a href="#rotate" class="hash-link" aria-label="Direct link to rotate" title="Direct link to rotate"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Specify a degree of rotation for the hue circle</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 0</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="rendercenterline">
+                            <code>renderCenterLine</code
+                            ><a
+                              href="#rendercenterline"
+                              class="hash-link"
+                              aria-label="Direct link to rendercenterline"
+                              title="Direct link to rendercenterline"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls whether to render a line from the center of the panel to the thumb (handle).</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Determines whether the panel slider thumb (or handle) should be constrained to stay within the
+                              boundaries of the panel.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s handle (thumb) size (height*width).</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s color.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default</code>: interactive*</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The thumb color will be changed depending on the contrast ratio if no color value is passed.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s shape and appearance.</li>
+                            <li><code>type: string</code></li>
+                            <li>
+                              <code>values</code>:
+                              <code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s container style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Panel2</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Panel4</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#centerchannel" class="table-of-contents__link toc-highlight"
+                                ><code>centerChannel</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#rotate" class="table-of-contents__link toc-highlight"><code>rotate</code></a>
+                            </li>
+                            <li>
+                              <a href="#rendercenterline" class="table-of-contents__link toc-highlight"
+                                ><code>renderCenterLine</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>thumbInnerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationValue</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationDuration</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a>
+                            </li>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Panels/Panel4/index.html b/docs/build/docs/API/Panels/Panel4/index.html
index ab1807e..9a045be 100644
--- a/docs/build/docs/API/Panels/Panel4/index.html
+++ b/docs/build/docs/API/Panels/Panel4/index.html
@@ -1,121 +1,771 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel4" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;Panel4 /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;Panel4 /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."><meta data-rh="true" property="og:description" content="A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Panels","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"},{"@type":"ListItem","position":3,"name":"Panel4","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Collapse sidebar category &#x27;Panels&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/panels"><span>Panels</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Panel4</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;Panel4 /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="panel4" src="/reanimated-color-picker/assets/images/panel4-fdad34ed193f56d62d7c09ca309bedf6.png" width="200" height="200" class="img_ev3q"></p>
-<ul>
-<li>
-<p>A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.</p>
-</li>
-<li>
-<p>To adjust the color&#x27;s saturation and brightness, move the handle horizontally..</p>
-</li>
-<li>
-<p>Move the handle vertically to change the color&#x27;s hue.</p>
-</li>
-</ul>
-<div class="theme-admonition theme-admonition-danger admonition_xJq3 alert alert--danger"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>danger</div><div class="admonitionContent_BuS1"><p>This panel cannot show all colors because it has a limited range of colors it can display. For example, if the input color has 50% saturation and 50% brightness, the panel thumb (handle) location won’t be accurate because it cannot show that color. This means that the color you select may not be exactly what you see in the panel.</p></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<ul>
-<li>Determines whether the panel slider thumb (or handle) should be constrained to stay within the boundaries of the panel.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.</li>
-<li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>Panel&#x27;s handle (thumb) size (height*width).</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s color.</li>
-<li><code>type: string</code></li>
-<li><code>default</code>: interactive*</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The thumb color will be changed depending on the contrast ratio if no color value is passed.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s shape and appearance.</li>
-<li><code>type: string</code></li>
-<li><code>values</code>: <shapes></shapes></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reversehue"><code>reverseHue</code><a href="#reversehue" class="hash-link" aria-label="Direct link to reversehue" title="Direct link to reversehue">​</a></h3>
-<ul>
-<li>Reverse (flip) hue direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reversehorizontalchannels"><code>reverseHorizontalChannels</code><a href="#reversehorizontalchannels" class="hash-link" aria-label="Direct link to reversehorizontalchannels" title="Direct link to reversehorizontalchannels">​</a></h3>
-<ul>
-<li>Reverse (flip) the direction of the horizontal channel&#x27;s brightness and saturation..</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Panel&#x27;s container style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Panels/Panel3"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Panel3</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Panels/Panel5"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Panel5</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#reversehue" class="table-of-contents__link toc-highlight"><code>reverseHue</code></a></li><li><a href="#reversehorizontalchannels" class="table-of-contents__link toc-highlight"><code>reverseHorizontalChannels</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel4"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;Panel4 /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;Panel4 /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel4"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                                  >Panel1</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                                  >Panel2</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                                  >Panel3</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                                  >Panel4</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                                  >Panel5</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/panels"
+                                ><span itemprop="name">Panels</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Panel4</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;Panel4 /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="panel4"
+                              src="/reanimated-color-picker/assets/images/panel4-fdad34ed193f56d62d7c09ca309bedf6.png"
+                              width="200"
+                              height="200"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <p>
+                                A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.
+                              </p>
+                            </li>
+                            <li>
+                              <p>To adjust the color&#x27;s saturation and brightness, move the handle horizontally..</p>
+                            </li>
+                            <li>
+                              <p>Move the handle vertically to change the color&#x27;s hue.</p>
+                            </li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-danger admonition_xJq3 alert alert--danger">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
+                                  ></path></svg></span
+                              >danger
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <p>
+                                This panel cannot show all colors because it has a limited range of colors it can display. For
+                                example, if the input color has 50% saturation and 50% brightness, the panel thumb (handle)
+                                location won’t be accurate because it cannot show that color. This means that the color you select
+                                may not be exactly what you see in the panel.
+                              </p>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Determines whether the panel slider thumb (or handle) should be constrained to stay within the
+                              boundaries of the panel.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the panel.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the panel bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s handle (thumb) size (height*width).</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s color.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default</code>: interactive*</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The thumb color will be changed depending on the contrast ratio if no color value is passed.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s shape and appearance.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>values</code>: <shapes></shapes></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reversehue">
+                            <code>reverseHue</code
+                            ><a
+                              href="#reversehue"
+                              class="hash-link"
+                              aria-label="Direct link to reversehue"
+                              title="Direct link to reversehue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse (flip) hue direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reversehorizontalchannels">
+                            <code>reverseHorizontalChannels</code
+                            ><a
+                              href="#reversehorizontalchannels"
+                              class="hash-link"
+                              aria-label="Direct link to reversehorizontalchannels"
+                              title="Direct link to reversehorizontalchannels"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse (flip) the direction of the horizontal channel&#x27;s brightness and saturation..</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s container style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Panel3</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Panel5</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>thumbInnerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationValue</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationDuration</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a>
+                            </li>
+                            <li>
+                              <a href="#reversehue" class="table-of-contents__link toc-highlight"><code>reverseHue</code></a>
+                            </li>
+                            <li>
+                              <a href="#reversehorizontalchannels" class="table-of-contents__link toc-highlight"
+                                ><code>reverseHorizontalChannels</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Panels/Panel5/index.html b/docs/build/docs/API/Panels/Panel5/index.html
index a71b93b..70c825f 100644
--- a/docs/build/docs/API/Panels/Panel5/index.html
+++ b/docs/build/docs/API/Panels/Panel5/index.html
@@ -1,42 +1,459 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel5" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;Panel5 /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;Panel5 /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."><meta data-rh="true" property="og:description" content="This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Panels","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"},{"@type":"ListItem","position":3,"name":"Panel5","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Collapse sidebar category &#x27;Panels&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/panels"><span>Panels</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Panel5</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;Panel5 /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="panel5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADICAYAAADWfGxSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASKSURBVHgB7dzLapwFGMbxdw5NJjM0R5MekiYxtLUUBHEhFnHRvRtv2BsoxYU7EQVpa2tSKB6nNpnPjZfwLvrg73cBH3Pg/727Z7QaVkM1en3xujqdn59Xp4uLi+r0vn++/9v3fd8/39OnT6vTuIBYAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZg0/HnX1Wn0Yvr1Wn75bPqdGfU+87aHP1YnU7rRXVa7bdOntXqRrVazavVyd1qNducVqffF1vVyQWGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYNM6OKxWy4PqtPH6XXW6MVmvTtuTi+r00eh5dVr2TpTV0L2JtVmt9u/13qSNN2vV6dV4UZ1cYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2HX34sDoNf96uTrvfX1ano8W16nRz/Kw6fVq9lvvV6vK4Wl3tjarT8Wer6rT5alqdfpr2jpS5wBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBsOhzfq1Yvz6rTYue8Ot1an1enk8l31enj6rXcq1ZvD3s3rFa9E2p195NqNTzfqE5PljaxgP8IGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIJNa/9utVr0bmwdzH6oTsez3k2s08lmdbqzt1+tbvVuitWDanV1NFSn8dbj6nRQf1Wn7V97N7ZcYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2Hd3v3cR69KJa7Xz7qDrdn82q04PJN9VpOPuiWh0tq9XG39VpPO3dxBpdPqxOi8k/1en0Zu/zXGAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAINv16q1qdnfa+E3ZPdqvT/mxUnWa3ezfFRoe9m13DrXfVaq9306k2q9f4TnVam/T+fofzy+rkAkMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUOw6ePr1eqDk2o1/7J3w2prrVqt7Z5Vq52d6jTa7t1gGnavqtOwqFajce/vt35tVZ2OFr3Pc4EhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAh2OjJm2GoRuu/tT6u1n6pVjd6J7ZqvvFzdVpbX1arWe8G0zDvfV5d6/1DhvmsOr0der/vyz/eVicXGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIL9C+bjhZjLoiutAAAAAElFTkSuQmCC" width="240" height="200" class="img_ev3q"></p>
-<ul>
-<li>This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.</li>
-</ul>
-<div class="theme-admonition theme-admonition-danger admonition_xJq3 alert alert--danger"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>danger</div><div class="admonitionContent_BuS1"><p>This panel is limited to displaying only a fixed range of colors, and therefore cannot show all colors.</p></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Panel&#x27;s container style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="selectionstyle"><code>selectionStyle</code><a href="#selectionstyle" class="hash-link" aria-label="Direct link to selectionstyle" title="Direct link to selectionstyle">​</a></h3>
-<ul>
-<li>The style of the square that indicates the selected color.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Panels/Panel4"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Panel4</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/sliders"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Sliders</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li><li><a href="#selectionstyle" class="table-of-contents__link toc-highlight"><code>selectionStyle</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Panels/Panel5"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;Panel5 /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;Panel5 /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Panels/Panel5"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                                  >Panel1</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                                  >Panel2</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                                  >Panel3</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                                  >Panel4</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                                  >Panel5</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/panels"
+                                ><span itemprop="name">Panels</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Panel5</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;Panel5 /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="panel5"
+                              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADICAYAAADWfGxSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASKSURBVHgB7dzLapwFGMbxdw5NJjM0R5MekiYxtLUUBHEhFnHRvRtv2BsoxYU7EQVpa2tSKB6nNpnPjZfwLvrg73cBH3Pg/727Z7QaVkM1en3xujqdn59Xp4uLi+r0vn++/9v3fd8/39OnT6vTuIBYAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZgAoZg0/HnX1Wn0Yvr1Wn75bPqdGfU+87aHP1YnU7rRXVa7bdOntXqRrVazavVyd1qNducVqffF1vVyQWGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYAKGYNM6OKxWy4PqtPH6XXW6MVmvTtuTi+r00eh5dVr2TpTV0L2JtVmt9u/13qSNN2vV6dV4UZ1cYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2HX34sDoNf96uTrvfX1ano8W16nRz/Kw6fVq9lvvV6vK4Wl3tjarT8Wer6rT5alqdfpr2jpS5wBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBMwBBsOhzfq1Yvz6rTYue8Ot1an1enk8l31enj6rXcq1ZvD3s3rFa9E2p195NqNTzfqE5PljaxgP8IGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIJNa/9utVr0bmwdzH6oTsez3k2s08lmdbqzt1+tbvVuitWDanV1NFSn8dbj6nRQf1Wn7V97N7ZcYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAgmYAg2Hd3v3cR69KJa7Xz7qDrdn82q04PJN9VpOPuiWh0tq9XG39VpPO3dxBpdPqxOi8k/1en0Zu/zXGAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAIJmAINv16q1qdnfa+E3ZPdqvT/mxUnWa3ezfFRoe9m13DrXfVaq9306k2q9f4TnVam/T+fofzy+rkAkMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUOw6ePr1eqDk2o1/7J3w2prrVqt7Z5Vq52d6jTa7t1gGnavqtOwqFajce/vt35tVZ2OFr3Pc4EhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAh2OjJm2GoRuu/tT6u1n6pVjd6J7ZqvvFzdVpbX1arWe8G0zDvfV5d6/1DhvmsOr0der/vyz/eVicXGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIIJGIL9C+bjhZjLoiutAAAAAElFTkSuQmCC"
+                              width="240"
+                              height="200"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-danger admonition_xJq3 alert alert--danger">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
+                                  ></path></svg></span
+                              >danger
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <p>
+                                This panel is limited to displaying only a fixed range of colors, and therefore cannot show all
+                                colors.
+                              </p>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Panel&#x27;s container style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="selectionstyle">
+                            <code>selectionStyle</code
+                            ><a
+                              href="#selectionstyle"
+                              class="hash-link"
+                              aria-label="Direct link to selectionstyle"
+                              title="Direct link to selectionstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the square that indicates the selected color.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Panel4</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/category/sliders"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Sliders</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a>
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                            <li>
+                              <a href="#selectionstyle" class="table-of-contents__link toc-highlight"
+                                ><code>selectionStyle</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Preview/ExtraThumb/index.html b/docs/build/docs/API/Preview/ExtraThumb/index.html
index 9be94bb..337d208 100644
--- a/docs/build/docs/API/Preview/ExtraThumb/index.html
+++ b/docs/build/docs/API/Preview/ExtraThumb/index.html
@@ -1,114 +1,816 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/ExtraThumb" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;ExtraThumb /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;ExtraThumb /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="Adds an extra thumb to the Panel3 component."><meta data-rh="true" property="og:description" content="Adds an extra thumb to the Panel3 component."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Preview","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"},{"@type":"ListItem","position":3,"name":"ExtraThumb","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Collapse sidebar category &#x27;Preview&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/preview"><span>Preview</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">ExtraThumb</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;ExtraThumb /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="panel3-extraThumbs" src="/reanimated-color-picker/assets/images/panel3-extraThumbs-10b8ca0c3a22276a2024ccb2ec38524b.png" width="318" height="318" class="img_ev3q"></p>
-<p>Adds an extra thumb to the <code>Panel3</code> component.</p>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>Note</div><div class="admonitionContent_BuS1"><ul>
-<li>This component is used exclusively in the <code>Panel3</code> component.</li>
-<li>It serves as an indicator for the desired color and does not respond to any gestures.</li>
-</ul></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage">​</a></h2>
-<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel3</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">styles</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(255, 121, 198)">panelStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">renderCenterLine</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">adaptSpectrum</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">120</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">140</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">160</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token comment" style="color:rgb(98, 114, 164)">/* using colorTransform to transform the hue channel */</span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">colorTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript parameter" style="color:rgb(255, 121, 198)">color</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(255, 121, 198)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">      </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;worklet&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">      </span><span class="token tag script language-javascript keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> colorKit</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">runOnUI</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">spin</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">color</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">180</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">    </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">200</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">220</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">240</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel3</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><br></span></code></pre></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="colortransform"><code>colorTransform</code><a href="#colortransform" class="hash-link" aria-label="Direct link to colortransform" title="Direct link to colortransform">​</a></h3>
-<ul>
-<li>A Worklet function to transform or modify the color in the HSV (Hue, Saturation, Value) color space, taking an HSVA color object as input and returning a new HSVA color object. The returned object determines the thumb&#x27;s position inside the panel.</li>
-<li><strong>Type:</strong> <code>(color: HSVObject) =&gt; HSVObject</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="huetransform"><code>hueTransform</code><a href="#huetransform" class="hash-link" aria-label="Direct link to huetransform" title="Direct link to huetransform">​</a></h3>
-<ul>
-<li>An alternative to <code>colorTransform</code> for transforming the hue channel, where the transform amount can be a <code>number</code> or a <code>string</code>, allowing negative values. For example, it can be expressed as <code>&#x27;50%&#x27;</code> or <code>50</code>.</li>
-<li><strong>Type:</strong> <code>string | number</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="saturationtransform"><code>saturationTransform</code><a href="#saturationtransform" class="hash-link" aria-label="Direct link to saturationtransform" title="Direct link to saturationtransform">​</a></h3>
-<ul>
-<li>An alternative to <code>colorTransform</code> for transforming the saturation channel, where the transform amount can be a <code>number</code> or a <code>string</code>, allowing negative values. For example, it can be expressed as <code>&#x27;50%&#x27;</code> or <code>50</code>.</li>
-<li><strong>Type:</strong> <code>string | number</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="brightnesstransform"><code>brightnessTransform</code><a href="#brightnesstransform" class="hash-link" aria-label="Direct link to brightnesstransform" title="Direct link to brightnesstransform">​</a></h3>
-<ul>
-<li>An alternative to <code>colorTransform</code> for transforming the brightness channel, where the transform amount can be a <code>number</code> or a <code>string</code>, allowing negative values. For example, it can be expressed as <code>&#x27;50%&#x27;</code> or <code>50</code>.</li>
-<li><strong>Type:</strong> <code>string | number</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchange"><code>onChange</code><a href="#onchange" class="hash-link" aria-label="Direct link to onchange" title="Direct link to onchange">​</a></h3>
-<ul>
-<li>Triggers every time the user modifies the color, allowing you to get the transformed color through a worklet function passed as a callback.</li>
-<li>Accepts <code>worklet</code> function only. For non-<code>worklet</code> functions, use <code>onChangeJS</code>.</li>
-<li>The passed color object has the following properties: <code>hex</code>, <code>rgb</code>, <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>, <code>hsl</code>, and <code>hsla</code></li>
-<li><strong>Type:</strong> <code>(color: object) =&gt; void</code></li>
-<li><strong>Default:</strong> <code>undefined</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchangejs"><code>onChangeJS</code><a href="#onchangejs" class="hash-link" aria-label="Direct link to onchangejs" title="Direct link to onchangejs">​</a></h3>
-<ul>
-<li>Triggers every time the user modifies the color, allowing you to get the transformed color through a worklet function passed as a callback.</li>
-<li>Accepts none-<code>worklet</code> function. For <code>worklet</code> functions, use <code>onChange</code>.</li>
-<li>The passed color object has the following properties: <code>hex</code>, <code>rgb</code>, <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>, <code>hsl</code>, and <code>hsla</code></li>
-<li><strong>Type:</strong> <code>(color: object) =&gt; void</code></li>
-<li><strong>Default:</strong> <code>undefined</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><ul>
-<li>To prevent performance issues, it is best to avoid using <code>setState</code> in the <code>onChange</code> callback.</li>
-<li>It is highly recommended to utilize the <code>useSharedValue</code> function from the <code>react-native-reanimated</code> library.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>Thumb size (height*width).</li>
-<li><strong>Type:</strong> <code>number</code></li>
-<li><strong>Default:</strong> inherit from <code>Panel3</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s color.</li>
-<li><strong>Type:</strong> <code>string</code></li>
-<li><strong>Default:</strong> inherit from <code>Panel3</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>Change thumb&#x27;s shape and appearance.</li>
-<li><strong>Type:</strong> <code>string</code></li>
-<li><strong>Values:</strong> <code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-<li><strong>Default:</strong> inherit from <code>Panel3</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><strong>Type:</strong> <code>ViewStyle</code></li>
-<li><strong>Default:</strong> inherit from <code>Panel3</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><strong>Type:</strong> <code>ViewStyle</code></li>
-<li><strong>Default:</strong> inherit from <code>Panel3</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="rendercenterline"><code>renderCenterLine</code><a href="#rendercenterline" class="hash-link" aria-label="Direct link to rendercenterline" title="Direct link to rendercenterline">​</a></h3>
-<ul>
-<li>Controls whether to render a line from the center of the panel to the thumb (handle).</li>
-<li><strong>Type:</strong> <code>boolean</code></li>
-<li><strong>Default:</strong> inherit from <code>Panel3</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Preview/Swatches"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Swatches</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/ColorKit"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">ColorKit</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#colortransform" class="table-of-contents__link toc-highlight"><code>colorTransform</code></a></li><li><a href="#huetransform" class="table-of-contents__link toc-highlight"><code>hueTransform</code></a></li><li><a href="#saturationtransform" class="table-of-contents__link toc-highlight"><code>saturationTransform</code></a></li><li><a href="#brightnesstransform" class="table-of-contents__link toc-highlight"><code>brightnessTransform</code></a></li><li><a href="#onchange" class="table-of-contents__link toc-highlight"><code>onChange</code></a></li><li><a href="#onchangejs" class="table-of-contents__link toc-highlight"><code>onChangeJS</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#rendercenterline" class="table-of-contents__link toc-highlight"><code>renderCenterLine</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/ExtraThumb"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;ExtraThumb /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;ExtraThumb /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="Adds an extra thumb to the Panel3 component." />
+    <meta data-rh="true" property="og:description" content="Adds an extra thumb to the Panel3 component." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                                  >PreviewText</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                                  >InputWidget</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                                  >Swatches</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                                  >ExtraThumb</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/preview"
+                                ><span itemprop="name">Preview</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">ExtraThumb</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;ExtraThumb /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="panel3-extraThumbs"
+                              src="/reanimated-color-picker/assets/images/panel3-extraThumbs-10b8ca0c3a22276a2024ccb2ec38524b.png"
+                              width="318"
+                              height="318"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <p>Adds an extra thumb to the <code>Panel3</code> component.</p>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >Note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>This component is used exclusively in the <code>Panel3</code> component.</li>
+                                <li>It serves as an indicator for the desired color and does not respond to any gestures.</li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="usage">
+                            Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"
+                              >​</a
+                            >
+                          </h2>
+                          <div
+                            class="language-jsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel3</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">styles</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(255, 121, 198)">panelStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">renderCenterLine</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">adaptSpectrum</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">120</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">140</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">160</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token comment" style="color:rgb(98, 114, 164)">/* using colorTransform to transform the hue channel */</span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">colorTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript parameter" style="color:rgb(255, 121, 198)">color</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(255, 121, 198)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">      </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;worklet&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">      </span><span class="token tag script language-javascript keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> colorKit</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">runOnUI</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">spin</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">color</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">180</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">    </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">200</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">220</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ExtraThumb</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">thumbShape</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">circle</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">hueTransform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">240</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel3</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="colortransform">
+                            <code>colorTransform</code
+                            ><a
+                              href="#colortransform"
+                              class="hash-link"
+                              aria-label="Direct link to colortransform"
+                              title="Direct link to colortransform"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              A Worklet function to transform or modify the color in the HSV (Hue, Saturation, Value) color space,
+                              taking an HSVA color object as input and returning a new HSVA color object. The returned object
+                              determines the thumb&#x27;s position inside the panel.
+                            </li>
+                            <li><strong>Type:</strong> <code>(color: HSVObject) =&gt; HSVObject</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="huetransform">
+                            <code>hueTransform</code
+                            ><a
+                              href="#huetransform"
+                              class="hash-link"
+                              aria-label="Direct link to huetransform"
+                              title="Direct link to huetransform"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              An alternative to <code>colorTransform</code> for transforming the hue channel, where the transform
+                              amount can be a <code>number</code> or a <code>string</code>, allowing negative values. For example,
+                              it can be expressed as <code>&#x27;50%&#x27;</code> or <code>50</code>.
+                            </li>
+                            <li><strong>Type:</strong> <code>string | number</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="saturationtransform">
+                            <code>saturationTransform</code
+                            ><a
+                              href="#saturationtransform"
+                              class="hash-link"
+                              aria-label="Direct link to saturationtransform"
+                              title="Direct link to saturationtransform"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              An alternative to <code>colorTransform</code> for transforming the saturation channel, where the
+                              transform amount can be a <code>number</code> or a <code>string</code>, allowing negative values.
+                              For example, it can be expressed as <code>&#x27;50%&#x27;</code> or <code>50</code>.
+                            </li>
+                            <li><strong>Type:</strong> <code>string | number</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="brightnesstransform">
+                            <code>brightnessTransform</code
+                            ><a
+                              href="#brightnesstransform"
+                              class="hash-link"
+                              aria-label="Direct link to brightnesstransform"
+                              title="Direct link to brightnesstransform"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              An alternative to <code>colorTransform</code> for transforming the brightness channel, where the
+                              transform amount can be a <code>number</code> or a <code>string</code>, allowing negative values.
+                              For example, it can be expressed as <code>&#x27;50%&#x27;</code> or <code>50</code>.
+                            </li>
+                            <li><strong>Type:</strong> <code>string | number</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchange">
+                            <code>onChange</code
+                            ><a
+                              href="#onchange"
+                              class="hash-link"
+                              aria-label="Direct link to onchange"
+                              title="Direct link to onchange"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Triggers every time the user modifies the color, allowing you to get the transformed color through a
+                              worklet function passed as a callback.
+                            </li>
+                            <li>
+                              Accepts <code>worklet</code> function only. For non-<code>worklet</code> functions, use
+                              <code>onChangeJS</code>.
+                            </li>
+                            <li>
+                              The passed color object has the following properties: <code>hex</code>, <code>rgb</code>,
+                              <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>,
+                              <code>hsl</code>, and <code>hsla</code>
+                            </li>
+                            <li><strong>Type:</strong> <code>(color: object) =&gt; void</code></li>
+                            <li><strong>Default:</strong> <code>undefined</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="onchangejs">
+                            <code>onChangeJS</code
+                            ><a
+                              href="#onchangejs"
+                              class="hash-link"
+                              aria-label="Direct link to onchangejs"
+                              title="Direct link to onchangejs"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Triggers every time the user modifies the color, allowing you to get the transformed color through a
+                              worklet function passed as a callback.
+                            </li>
+                            <li>
+                              Accepts none-<code>worklet</code> function. For <code>worklet</code> functions, use
+                              <code>onChange</code>.
+                            </li>
+                            <li>
+                              The passed color object has the following properties: <code>hex</code>, <code>rgb</code>,
+                              <code>rgba</code>, <code>hsv</code>, <code>hsva</code>, <code>hwb</code>, <code>hwba</code>,
+                              <code>hsl</code>, and <code>hsla</code>
+                            </li>
+                            <li><strong>Type:</strong> <code>(color: object) =&gt; void</code></li>
+                            <li><strong>Default:</strong> <code>undefined</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+                                  ></path></svg></span
+                              >tip
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  To prevent performance issues, it is best to avoid using <code>setState</code> in the
+                                  <code>onChange</code> callback.
+                                </li>
+                                <li>
+                                  It is highly recommended to utilize the <code>useSharedValue</code> function from the
+                                  <code>react-native-reanimated</code> library.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb size (height*width).</li>
+                            <li><strong>Type:</strong> <code>number</code></li>
+                            <li><strong>Default:</strong> inherit from <code>Panel3</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s color.</li>
+                            <li><strong>Type:</strong> <code>string</code></li>
+                            <li><strong>Default:</strong> inherit from <code>Panel3</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change thumb&#x27;s shape and appearance.</li>
+                            <li><strong>Type:</strong> <code>string</code></li>
+                            <li>
+                              <strong>Values:</strong>
+                              <code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                            <li><strong>Default:</strong> inherit from <code>Panel3</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><strong>Type:</strong> <code>ViewStyle</code></li>
+                            <li><strong>Default:</strong> inherit from <code>Panel3</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><strong>Type:</strong> <code>ViewStyle</code></li>
+                            <li><strong>Default:</strong> inherit from <code>Panel3</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="rendercenterline">
+                            <code>renderCenterLine</code
+                            ><a
+                              href="#rendercenterline"
+                              class="hash-link"
+                              aria-label="Direct link to rendercenterline"
+                              title="Direct link to rendercenterline"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls whether to render a line from the center of the panel to the thumb (handle).</li>
+                            <li><strong>Type:</strong> <code>boolean</code></li>
+                            <li><strong>Default:</strong> inherit from <code>Panel3</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Swatches</div></a
+                        ><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/ColorKit"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">ColorKit</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#colortransform" class="table-of-contents__link toc-highlight"
+                                ><code>colorTransform</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#huetransform" class="table-of-contents__link toc-highlight"><code>hueTransform</code></a>
+                            </li>
+                            <li>
+                              <a href="#saturationtransform" class="table-of-contents__link toc-highlight"
+                                ><code>saturationTransform</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#brightnesstransform" class="table-of-contents__link toc-highlight"
+                                ><code>brightnessTransform</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#onchange" class="table-of-contents__link toc-highlight"><code>onChange</code></a>
+                            </li>
+                            <li>
+                              <a href="#onchangejs" class="table-of-contents__link toc-highlight"><code>onChangeJS</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>thumbInnerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#rendercenterline" class="table-of-contents__link toc-highlight"
+                                ><code>renderCenterLine</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Preview/InputWidget/index.html b/docs/build/docs/API/Preview/InputWidget/index.html
index fb0c37f..bde489f 100644
--- a/docs/build/docs/API/Preview/InputWidget/index.html
+++ b/docs/build/docs/API/Preview/InputWidget/index.html
@@ -1,68 +1,577 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/InputWidget" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;InputWidget /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;InputWidget /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="The input widget component allows you to input color values in various formats."><meta data-rh="true" property="og:description" content="The input widget component allows you to input color values in various formats."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Preview","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"},{"@type":"ListItem","position":3,"name":"InputWidget","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Collapse sidebar category &#x27;Preview&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/preview"><span>Preview</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">InputWidget</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;InputWidget /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="InputWidget" src="/reanimated-color-picker/assets/images/InputWidgets-01952ad7ad083d25cd90fcba19bfc4ad.png" width="300" height="455" class="img_ev3q"></p>
-<ul>
-<li>The input widget component allows you to input color values in various formats, including RGB, HEX, HSL, HWB, and HSV. The component features a button that lets you cycle through these formats, making it easy to switch between them and find the one that suits your needs.</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="defaultformat"><code>defaultFormat</code><a href="#defaultformat" class="hash-link" aria-label="Direct link to defaultformat" title="Direct link to defaultformat">​</a></h3>
-<ul>
-<li>The <code>defaultFormat</code> prop determines the initial color format for the input widget component.</li>
-<li>It accepts one of the following values: <code>&#x27;HEX&#x27; | &#x27;RGB&#x27; | &#x27;HSL&#x27; | &#x27;HWB&#x27; | &#x27;HSV&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="disablealphachannel"><code>disableAlphaChannel</code><a href="#disablealphachannel" class="hash-link" aria-label="Direct link to disablealphachannel" title="Direct link to disablealphachannel">​</a></h3>
-<ul>
-<li>This prop allows you to disable the alpha channel input. If set to true, the input widget will ignore the alpha channel and prevent users from setting the opacity of the selected color.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="formats"><code>formats</code><a href="#formats" class="hash-link" aria-label="Direct link to formats" title="Direct link to formats">​</a></h3>
-<ul>
-<li>The <code>formats</code> prop determines which color formats are included in the input widget component and the order they appear when cycling through them.</li>
-<li>It accepts an array of the following values: <code>&#x27;HEX&#x27; | &#x27;RGB&#x27; | &#x27;HSL&#x27; | &#x27;HWB&#x27; | &#x27;HSV&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="inputstyle"><code>inputStyle</code><a href="#inputstyle" class="hash-link" aria-label="Direct link to inputstyle" title="Direct link to inputstyle">​</a></h3>
-<ul>
-<li>The <code>inputStyle</code> prop sets the style for the <code>InputText</code> components that make up the input fields for each color format.</li>
-<li>It accepts a <code>StyleProp&lt;TextStyle&gt;</code> object.</li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="inputprops"><code>inputProps</code><a href="#inputprops" class="hash-link" aria-label="Direct link to inputprops" title="Direct link to inputprops">​</a></h3>
-<ul>
-<li>The <code>inputProps</code> prop sets the props for the <code>TextInput</code> components that make up the input fields for each color format.</li>
-<li>It accepts an <code>InputProps</code> object.</li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="inputtitlestyle"><code>inputTitleStyle</code><a href="#inputtitlestyle" class="hash-link" aria-label="Direct link to inputtitlestyle" title="Direct link to inputtitlestyle">​</a></h3>
-<ul>
-<li>The <code>inputTitleStyle</code> prop sets the style for the <code>Text</code> component that displays the title for the input fields.</li>
-<li>This title is located below the input fields and indicates which color format is currently displayed.</li>
-<li>It accepts a <code>StyleProp&lt;TextStyle&gt;</code> object.</li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="containerstyle"><code>containerStyle</code><a href="#containerstyle" class="hash-link" aria-label="Direct link to containerstyle" title="Direct link to containerstyle">​</a></h3>
-<ul>
-<li>The <code>containerStyle</code> prop sets the style for the <code>View</code> component that wraps around all the input fields and the cycle button.</li>
-<li>It accepts a <code>StyleProp&lt;ViewStyle&gt;</code> object.</li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="iconcolor"><code>iconColor</code><a href="#iconcolor" class="hash-link" aria-label="Direct link to iconcolor" title="Direct link to iconcolor">​</a></h3>
-<ul>
-<li>The <code>iconColor</code> prop sets the color for the cycle button icon, which is an Image component that cycles through the available color formats when clicked.</li>
-<li>It accepts a <code>string</code> representing a color value.</li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="iconstyle"><code>iconStyle</code><a href="#iconstyle" class="hash-link" aria-label="Direct link to iconstyle" title="Direct link to iconstyle">​</a></h3>
-<ul>
-<li>The <code>iconStyle</code> prop sets the style for the cycle button icon.</li>
-<li>It accepts a <code>StyleProp&lt;ImageStyle&gt;</code> object.</li>
-</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Preview/PreviewText"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">PreviewText</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Preview/Swatches"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Swatches</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#defaultformat" class="table-of-contents__link toc-highlight"><code>defaultFormat</code></a></li><li><a href="#disablealphachannel" class="table-of-contents__link toc-highlight"><code>disableAlphaChannel</code></a></li><li><a href="#formats" class="table-of-contents__link toc-highlight"><code>formats</code></a></li><li><a href="#inputstyle" class="table-of-contents__link toc-highlight"><code>inputStyle</code></a></li><li><a href="#inputprops" class="table-of-contents__link toc-highlight"><code>inputProps</code></a></li><li><a href="#inputtitlestyle" class="table-of-contents__link toc-highlight"><code>inputTitleStyle</code></a></li><li><a href="#containerstyle" class="table-of-contents__link toc-highlight"><code>containerStyle</code></a></li><li><a href="#iconcolor" class="table-of-contents__link toc-highlight"><code>iconColor</code></a></li><li><a href="#iconstyle" class="table-of-contents__link toc-highlight"><code>iconStyle</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/InputWidget"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;InputWidget /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;InputWidget /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="The input widget component allows you to input color values in various formats."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="The input widget component allows you to input color values in various formats."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/InputWidget"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                                  >PreviewText</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                                  >InputWidget</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                                  >Swatches</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                                  >ExtraThumb</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/preview"
+                                ><span itemprop="name">Preview</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">InputWidget</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;InputWidget /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="InputWidget"
+                              src="/reanimated-color-picker/assets/images/InputWidgets-01952ad7ad083d25cd90fcba19bfc4ad.png"
+                              width="300"
+                              height="455"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              The input widget component allows you to input color values in various formats, including RGB, HEX,
+                              HSL, HWB, and HSV. The component features a button that lets you cycle through these formats, making
+                              it easy to switch between them and find the one that suits your needs.
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="defaultformat">
+                            <code>defaultFormat</code
+                            ><a
+                              href="#defaultformat"
+                              class="hash-link"
+                              aria-label="Direct link to defaultformat"
+                              title="Direct link to defaultformat"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The <code>defaultFormat</code> prop determines the initial color format for the input widget
+                              component.
+                            </li>
+                            <li>
+                              It accepts one of the following values:
+                              <code>&#x27;HEX&#x27; | &#x27;RGB&#x27; | &#x27;HSL&#x27; | &#x27;HWB&#x27; | &#x27;HSV&#x27;</code>
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="disablealphachannel">
+                            <code>disableAlphaChannel</code
+                            ><a
+                              href="#disablealphachannel"
+                              class="hash-link"
+                              aria-label="Direct link to disablealphachannel"
+                              title="Direct link to disablealphachannel"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              This prop allows you to disable the alpha channel input. If set to true, the input widget will
+                              ignore the alpha channel and prevent users from setting the opacity of the selected color.
+                            </li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="formats">
+                            <code>formats</code
+                            ><a
+                              href="#formats"
+                              class="hash-link"
+                              aria-label="Direct link to formats"
+                              title="Direct link to formats"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The <code>formats</code> prop determines which color formats are included in the input widget
+                              component and the order they appear when cycling through them.
+                            </li>
+                            <li>
+                              It accepts an array of the following values:
+                              <code>&#x27;HEX&#x27; | &#x27;RGB&#x27; | &#x27;HSL&#x27; | &#x27;HWB&#x27; | &#x27;HSV&#x27;</code>
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="inputstyle">
+                            <code>inputStyle</code
+                            ><a
+                              href="#inputstyle"
+                              class="hash-link"
+                              aria-label="Direct link to inputstyle"
+                              title="Direct link to inputstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The <code>inputStyle</code> prop sets the style for the <code>InputText</code> components that make
+                              up the input fields for each color format.
+                            </li>
+                            <li>It accepts a <code>StyleProp&lt;TextStyle&gt;</code> object.</li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="inputprops">
+                            <code>inputProps</code
+                            ><a
+                              href="#inputprops"
+                              class="hash-link"
+                              aria-label="Direct link to inputprops"
+                              title="Direct link to inputprops"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The <code>inputProps</code> prop sets the props for the <code>TextInput</code> components that make
+                              up the input fields for each color format.
+                            </li>
+                            <li>It accepts an <code>InputProps</code> object.</li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="inputtitlestyle">
+                            <code>inputTitleStyle</code
+                            ><a
+                              href="#inputtitlestyle"
+                              class="hash-link"
+                              aria-label="Direct link to inputtitlestyle"
+                              title="Direct link to inputtitlestyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The <code>inputTitleStyle</code> prop sets the style for the <code>Text</code> component that
+                              displays the title for the input fields.
+                            </li>
+                            <li>
+                              This title is located below the input fields and indicates which color format is currently
+                              displayed.
+                            </li>
+                            <li>It accepts a <code>StyleProp&lt;TextStyle&gt;</code> object.</li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="containerstyle">
+                            <code>containerStyle</code
+                            ><a
+                              href="#containerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to containerstyle"
+                              title="Direct link to containerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The <code>containerStyle</code> prop sets the style for the <code>View</code> component that wraps
+                              around all the input fields and the cycle button.
+                            </li>
+                            <li>It accepts a <code>StyleProp&lt;ViewStyle&gt;</code> object.</li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="iconcolor">
+                            <code>iconColor</code
+                            ><a
+                              href="#iconcolor"
+                              class="hash-link"
+                              aria-label="Direct link to iconcolor"
+                              title="Direct link to iconcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The <code>iconColor</code> prop sets the color for the cycle button icon, which is an Image
+                              component that cycles through the available color formats when clicked.
+                            </li>
+                            <li>It accepts a <code>string</code> representing a color value.</li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="iconstyle">
+                            <code>iconStyle</code
+                            ><a
+                              href="#iconstyle"
+                              class="hash-link"
+                              aria-label="Direct link to iconstyle"
+                              title="Direct link to iconstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The <code>iconStyle</code> prop sets the style for the cycle button icon.</li>
+                            <li>It accepts a <code>StyleProp&lt;ImageStyle&gt;</code> object.</li>
+                          </ul>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">PreviewText</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Swatches</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#defaultformat" class="table-of-contents__link toc-highlight"
+                                ><code>defaultFormat</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#disablealphachannel" class="table-of-contents__link toc-highlight"
+                                ><code>disableAlphaChannel</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#formats" class="table-of-contents__link toc-highlight"><code>formats</code></a>
+                            </li>
+                            <li>
+                              <a href="#inputstyle" class="table-of-contents__link toc-highlight"><code>inputStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#inputprops" class="table-of-contents__link toc-highlight"><code>inputProps</code></a>
+                            </li>
+                            <li>
+                              <a href="#inputtitlestyle" class="table-of-contents__link toc-highlight"
+                                ><code>inputTitleStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#containerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>containerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#iconcolor" class="table-of-contents__link toc-highlight"><code>iconColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#iconstyle" class="table-of-contents__link toc-highlight"><code>iconStyle</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Preview/PreviewText/index.html b/docs/build/docs/API/Preview/PreviewText/index.html
index f7f2826..cee7ed1 100644
--- a/docs/build/docs/API/Preview/PreviewText/index.html
+++ b/docs/build/docs/API/Preview/PreviewText/index.html
@@ -1,31 +1,404 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/PreviewText" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;PreviewText /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;PreviewText /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A React Native &lt;Text&gt; component that displays the preview color text."><meta data-rh="true" property="og:description" content="A React Native &lt;Text&gt; component that displays the preview color text."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Preview","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"},{"@type":"ListItem","position":3,"name":"PreviewText","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Collapse sidebar category &#x27;Preview&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/preview"><span>Preview</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">PreviewText</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;PreviewText /&gt;</code></h1></header>
-<ul>
-<li>A React Native <code>&lt;Text&gt;</code> component that displays the preview color text.</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="colorformat"><code>colorFormat</code><a href="#colorformat" class="hash-link" aria-label="Direct link to colorformat" title="Direct link to colorformat">​</a></h3>
-<ul>
-<li>Preview color&#x27;s format.</li>
-<li><code>type: string</code></li>
-<li><code>values:</code><code>&#x27;hex&#x27; | &#x27;rgb&#x27; | &#x27;rgba&#x27; | &#x27;hsl&#x27; | &#x27;hsla&#x27; | &#x27;hsv&#x27; | &#x27;hsva&#x27; | &#x27;hwb&#x27; | &#x27;hwba&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Preview text style.</li>
-<li><code>type: TextStyle</code></li>
-</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Preview/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Preview</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Preview/InputWidget"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">InputWidget</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#colorformat" class="table-of-contents__link toc-highlight"><code>colorFormat</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/PreviewText"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;PreviewText /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;PreviewText /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A React Native &lt;Text&gt; component that displays the preview color text."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A React Native &lt;Text&gt; component that displays the preview color text."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/PreviewText"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                                  >PreviewText</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                                  >InputWidget</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                                  >Swatches</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                                  >ExtraThumb</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/preview"
+                                ><span itemprop="name">Preview</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">PreviewText</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;PreviewText /&gt;</code></h1>
+                          <ul>
+                            <li>A React Native <code>&lt;Text&gt;</code> component that displays the preview color text.</li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="colorformat">
+                            <code>colorFormat</code
+                            ><a
+                              href="#colorformat"
+                              class="hash-link"
+                              aria-label="Direct link to colorformat"
+                              title="Direct link to colorformat"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Preview color&#x27;s format.</li>
+                            <li><code>type: string</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;hex&#x27; | &#x27;rgb&#x27; | &#x27;rgba&#x27; | &#x27;hsl&#x27; | &#x27;hsla&#x27; |
+                                &#x27;hsv&#x27; | &#x27;hsva&#x27; | &#x27;hwb&#x27; | &#x27;hwba&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Preview text style.</li>
+                            <li><code>type: TextStyle</code></li>
+                          </ul>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Preview/"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Preview</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">InputWidget</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#colorformat" class="table-of-contents__link toc-highlight"><code>colorFormat</code></a>
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Preview/Swatches/index.html b/docs/build/docs/API/Preview/Swatches/index.html
index 0fe6cc1..5d848f8 100644
--- a/docs/build/docs/API/Preview/Swatches/index.html
+++ b/docs/build/docs/API/Preview/Swatches/index.html
@@ -1,40 +1,433 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/Swatches" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;Swatches /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;Swatches /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A list of color swatches is utilized for efficient color selection."><meta data-rh="true" property="og:description" content="A list of color swatches is utilized for efficient color selection."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Preview","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"},{"@type":"ListItem","position":3,"name":"Swatches","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Collapse sidebar category &#x27;Preview&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/preview"><span>Preview</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Swatches</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;Swatches /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="swatches" src="data:image/png;base64,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" width="234" height="50" class="img_ev3q"></p>
-<ul>
-<li>A list of color swatches is utilized for efficient color selection.</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="colors"><code>colors</code><a href="#colors" class="hash-link" aria-label="Direct link to colors" title="Direct link to colors">​</a></h3>
-<ul>
-<li>Custom swatches colors.</li>
-<li><code>type: string[]</code></li>
-<li><code>default: material colors</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Swatches container style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="swatchstyle"><code>swatchStyle</code><a href="#swatchstyle" class="hash-link" aria-label="Direct link to swatchstyle" title="Direct link to swatchstyle">​</a></h3>
-<ul>
-<li>Swatch style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Preview/InputWidget"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">InputWidget</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">ExtraThumb</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#colors" class="table-of-contents__link toc-highlight"><code>colors</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li><li><a href="#swatchstyle" class="table-of-contents__link toc-highlight"><code>swatchStyle</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/Swatches"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;Swatches /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;Swatches /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A list of color swatches is utilized for efficient color selection." />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A list of color swatches is utilized for efficient color selection."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/Swatches"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                                  >PreviewText</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                                  >InputWidget</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                                  >Swatches</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                                  >ExtraThumb</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/preview"
+                                ><span itemprop="name">Preview</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Swatches</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;Swatches /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="swatches"
+                              src="data:image/png;base64,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"
+                              width="234"
+                              height="50"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>A list of color swatches is utilized for efficient color selection.</li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="colors">
+                            <code>colors</code
+                            ><a href="#colors" class="hash-link" aria-label="Direct link to colors" title="Direct link to colors"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Custom swatches colors.</li>
+                            <li><code>type: string[]</code></li>
+                            <li><code>default: material colors</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Swatches container style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="swatchstyle">
+                            <code>swatchStyle</code
+                            ><a
+                              href="#swatchstyle"
+                              class="hash-link"
+                              aria-label="Direct link to swatchstyle"
+                              title="Direct link to swatchstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Swatch style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">InputWidget</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">ExtraThumb</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#colors" class="table-of-contents__link toc-highlight"><code>colors</code></a>
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                            <li>
+                              <a href="#swatchstyle" class="table-of-contents__link toc-highlight"><code>swatchStyle</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Preview/index.html b/docs/build/docs/API/Preview/index.html
index dc1cce1..1eacaf5 100644
--- a/docs/build/docs/API/Preview/index.html
+++ b/docs/build/docs/API/Preview/index.html
@@ -1,62 +1,520 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/Preview" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;Preview /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;Preview /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="The preview of the selected and the initial color."><meta data-rh="true" property="og:description" content="The preview of the selected and the initial color."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Preview","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"},{"@type":"ListItem","position":3,"name":"Preview","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Collapse sidebar category &#x27;Preview&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/preview"><span>Preview</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Preview</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;Preview /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="preview" src="data:image/png;base64,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" width="300" height="50" class="img_ev3q"></p>
-<ul>
-<li>The preview of the selected and the initial color.</li>
-</ul>
-<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><ul>
-<li>If you want only the preview text, you can use the <a href="/reanimated-color-picker/docs/API/Preview/PreviewText"><code>&lt;PreviewText /&gt;</code></a> component.</li>
-</ul></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="colorformat"><code>colorFormat</code><a href="#colorformat" class="hash-link" aria-label="Direct link to colorformat" title="Direct link to colorformat">​</a></h3>
-<ul>
-<li>Preview color&#x27;s format.</li>
-<li><code>type: string</code></li>
-<li><code>values:</code><code>&#x27;hex&#x27; | &#x27;rgb&#x27; | &#x27;rgba&#x27; | &#x27;hsl&#x27; | &#x27;hsla&#x27; | &#x27;hsv&#x27; | &#x27;hsva&#x27; | &#x27;hwb&#x27; | &#x27;hwba&#x27;</code></li>
-<li><code>default: &#x27;hex&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="hideinitialcolor"><code>hideInitialColor</code><a href="#hideinitialcolor" class="hash-link" aria-label="Direct link to hideinitialcolor" title="Direct link to hideinitialcolor">​</a></h3>
-<ul>
-<li>Hide the initial color preview part.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="hidetext"><code>hideText</code><a href="#hidetext" class="hash-link" aria-label="Direct link to hidetext" title="Direct link to hidetext">​</a></h3>
-<ul>
-<li>Hide preview texts.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="disableopacitytexture"><code>disableOpacityTexture</code><a href="#disableopacitytexture" class="hash-link" aria-label="Direct link to disableopacitytexture" title="Direct link to disableopacitytexture">​</a></h3>
-<ul>
-<li>Hide the preview background texture image that appears when the color has an opacity less than 1.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>Preview container style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="textstyle"><code>textStyle</code><a href="#textstyle" class="hash-link" aria-label="Direct link to textstyle" title="Direct link to textstyle">​</a></h3>
-<ul>
-<li>Preview texts style.</li>
-<li><code>type: TextStyle</code></li>
-</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/preview"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Preview</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Preview/PreviewText"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">PreviewText</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#colorformat" class="table-of-contents__link toc-highlight"><code>colorFormat</code></a></li><li><a href="#hideinitialcolor" class="table-of-contents__link toc-highlight"><code>hideInitialColor</code></a></li><li><a href="#hidetext" class="table-of-contents__link toc-highlight"><code>hideText</code></a></li><li><a href="#disableopacitytexture" class="table-of-contents__link toc-highlight"><code>disableOpacityTexture</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li><li><a href="#textstyle" class="table-of-contents__link toc-highlight"><code>textStyle</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Preview/Preview"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;Preview /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;Preview /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="The preview of the selected and the initial color." />
+    <meta data-rh="true" property="og:description" content="The preview of the selected and the initial color." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Preview/"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Preview/"
+                                  >Preview</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                                  >PreviewText</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                                  >InputWidget</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                                  >Swatches</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                                  >ExtraThumb</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/preview"
+                                ><span itemprop="name">Preview</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Preview</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;Preview /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="preview"
+                              src="data:image/png;base64,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"
+                              width="300"
+                              height="50"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>The preview of the selected and the initial color.</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 12 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+                                  ></path></svg></span
+                              >tip
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  If you want only the preview text, you can use the
+                                  <a href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                                    ><code>&lt;PreviewText /&gt;</code></a
+                                  >
+                                  component.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="colorformat">
+                            <code>colorFormat</code
+                            ><a
+                              href="#colorformat"
+                              class="hash-link"
+                              aria-label="Direct link to colorformat"
+                              title="Direct link to colorformat"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Preview color&#x27;s format.</li>
+                            <li><code>type: string</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;hex&#x27; | &#x27;rgb&#x27; | &#x27;rgba&#x27; | &#x27;hsl&#x27; | &#x27;hsla&#x27; |
+                                &#x27;hsv&#x27; | &#x27;hsva&#x27; | &#x27;hwb&#x27; | &#x27;hwba&#x27;</code
+                              >
+                            </li>
+                            <li><code>default: &#x27;hex&#x27;</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="hideinitialcolor">
+                            <code>hideInitialColor</code
+                            ><a
+                              href="#hideinitialcolor"
+                              class="hash-link"
+                              aria-label="Direct link to hideinitialcolor"
+                              title="Direct link to hideinitialcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Hide the initial color preview part.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="hidetext">
+                            <code>hideText</code
+                            ><a
+                              href="#hidetext"
+                              class="hash-link"
+                              aria-label="Direct link to hidetext"
+                              title="Direct link to hidetext"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Hide preview texts.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="disableopacitytexture">
+                            <code>disableOpacityTexture</code
+                            ><a
+                              href="#disableopacitytexture"
+                              class="hash-link"
+                              aria-label="Direct link to disableopacitytexture"
+                              title="Direct link to disableopacitytexture"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              Hide the preview background texture image that appears when the color has an opacity less than 1.
+                            </li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Preview container style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="textstyle">
+                            <code>textStyle</code
+                            ><a
+                              href="#textstyle"
+                              class="hash-link"
+                              aria-label="Direct link to textstyle"
+                              title="Direct link to textstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Preview texts style.</li>
+                            <li><code>type: TextStyle</code></li>
+                          </ul>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/category/preview"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Preview</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">PreviewText</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#colorformat" class="table-of-contents__link toc-highlight"><code>colorFormat</code></a>
+                            </li>
+                            <li>
+                              <a href="#hideinitialcolor" class="table-of-contents__link toc-highlight"
+                                ><code>hideInitialColor</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#hidetext" class="table-of-contents__link toc-highlight"><code>hideText</code></a>
+                            </li>
+                            <li>
+                              <a href="#disableopacitytexture" class="table-of-contents__link toc-highlight"
+                                ><code>disableOpacityTexture</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                            <li>
+                              <a href="#textstyle" class="table-of-contents__link toc-highlight"><code>textStyle</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/HSB/BrightnessSlider/index.html b/docs/build/docs/API/Sliders/HSB/BrightnessSlider/index.html
index 20f7006..cdb47ae 100644
--- a/docs/build/docs/API/Sliders/HSB/BrightnessSlider/index.html
+++ b/docs/build/docs/API/Sliders/HSB/BrightnessSlider/index.html
@@ -1,128 +1,855 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSB/BrightnessSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;BrightnessSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;BrightnessSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider for adjusting the color brightness channel in the HSV color space."><meta data-rh="true" property="og:description" content="A slider for adjusting the color brightness channel in the HSV color space."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"HSB","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb"},{"@type":"ListItem","position":4,"name":"BrightnessSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Collapse sidebar category &#x27;HSB&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider">BrightnessSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider">SaturationSlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/hsb"><span>HSB</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">BrightnessSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;BrightnessSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="brightness" src="data:image/png;base64,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" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space">A slider for adjusting the color brightness channel in the HSV color space.<a href="#a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space" class="hash-link" aria-label="Direct link to A slider for adjusting the color brightness channel in the HSV color space." title="Direct link to A slider for adjusting the color brightness channel in the HSV color space.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/hsb"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">HSB</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">SaturationSlider</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space" class="table-of-contents__link toc-highlight">A slider for adjusting the color brightness channel in the HSV color space.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSB/BrightnessSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;BrightnessSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;BrightnessSlider /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A slider for adjusting the color brightness channel in the HSV color space."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A slider for adjusting the color brightness channel in the HSV color space."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                                      >BrightnessSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+                                      >SaturationSlider</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/hsb"
+                                ><span itemprop="name">HSB</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">BrightnessSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;BrightnessSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="brightness"
+                              src="data:image/png;base64,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"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3
+                                class="anchor anchorWithStickyNavbar_LWe7"
+                                id="a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space"
+                              >
+                                A slider for adjusting the color brightness channel in the HSV color space.<a
+                                  href="#a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider for adjusting the color brightness channel in the HSV color space."
+                                  title="Direct link to A slider for adjusting the color brightness channel in the HSV color space."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/category/hsb"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">HSB</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">SaturationSlider</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a
+                            href="#a-slider-for-adjusting-the-color-brightness-channel-in-the-hsv-color-space"
+                            class="table-of-contents__link toc-highlight"
+                            >A slider for adjusting the color brightness channel in the HSV color space.</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/HSB/SaturationSlider/index.html b/docs/build/docs/API/Sliders/HSB/SaturationSlider/index.html
index 4bce84c..33c09dd 100644
--- a/docs/build/docs/API/Sliders/HSB/SaturationSlider/index.html
+++ b/docs/build/docs/API/Sliders/HSB/SaturationSlider/index.html
@@ -1,128 +1,855 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSB/SaturationSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;SaturationSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;SaturationSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider for adjusting the color saturation channel in the HSV color space."><meta data-rh="true" property="og:description" content="A slider for adjusting the color saturation channel in the HSV color space."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"HSB","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb"},{"@type":"ListItem","position":4,"name":"SaturationSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Collapse sidebar category &#x27;HSB&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider">BrightnessSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider">SaturationSlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/hsb"><span>HSB</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">SaturationSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;SaturationSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="saturation" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAoCAYAAAAR+iSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABRbSURBVHgB7V3br17HVf/N50scu3bthFIuoTqhSBQeWhuQaApSXERb8QBJoS9QAQ4SQsBDw1+QBMQrtIgHxEuhz5SkXCRAiDiiqqre4l7Vq3LSi9ombew6TmyfY3+rM3vv2d+aNb81e3++ya2+Je2z955Zs2bNmnWb2fs7O2ADG9iACyJyMp7eEI90Ph6Po8OR4Fw8tofjTDyeCiGcxg8QBGxgAxsoIBp9MvCH4/GueJyNx7fi8cxwvjQcCQ5g5RDujcdWPC7H43Q8HovOYBu3OWwcwAY2MMBg+I/G40/i8SH0Uf0c1oNE483oHcITuM0dwSwHsHtRTi4ED4QlTsoSWyJxkBIr1CEyIC+HMgzlS4Wny4ZrDNcipu1yKJOyvRj6Y/+Gppg+uzKs+tN9SatM8ViMB2bsDV7ctkslNybPpTPuJWqZqzPrp7sUwhPjk/Xt8SjT5WL4a7UXAZ8jcfj0yib4tDI69g7grlMxtH8xHp+JRTukb5T8j9e5b3W/OBzTg9cB++8Bnv/76EX+lfDjyWNiPF3Vko7xXDzOhHgsAz5w4sL0cqTpAK5clFML4JFk9F3BkjA1lFdldjKZ4L3JdAY54trBA6XglqgdEhOm5cuOEeCKrHgVc9/dmnG4itwYp7QUpGUw4LiVEVreweVAyz2erKNhc+7JsmEYzfE0cCblNhyv+nPg8NuAC/8bdf4FlDLR49H9BdRzBoOH3hEc/e3oAB4Hvv3XDk/pdLUeD7TsW2MEah3qj+3oDB59w6Xwz3CAOgC5KFuywOORwHE38jSYrJTY4q4zSTMMc1JBdGRUtPI1i6QuP6jH1BzPtRiMrmdya0UIxwlVmdhydenKcSLzKWRy1efpWg2zGgvWbD9RtjgE/MRfxfNB4KUPo4/6ViZAqXOmbiVEuJlCuAM48utxCJH+9jujqM6jLQ+gtjWvLN1H2YcA6gQG3O1o6W8+caleilQO4MpOF/X/NnZ2dByUl8YzRRCf0SIN99raAbD0VvcDRcMzmNy3lLSK8gkhuwZIImvFJ+uHTbzHJ3NIbIxWZopX1wgBT2nmtW/1LROym6DVauviZ9lP0E04r/nH/vrC/6/ajvTVeecb8diOthG3AK++iNFRhP3A3ruAPfHY/5p4/WMlH5bW4bf2xv/sO3HdzmuUBVbXLItQ7dNexkMndsITqmXpAOSKPBgF83ihHMsJAQ84c5W22dYqiFXkTEPgG9zS9KPaMyc19jVF004G41HRcOmZsY+44t8X/Vg5eEbDIiYbMzBf6Tw+18GdajvlQBq467T9kT8DDv4i8OL/lTLR50ufB17+eGT5AmbB4hXAnfFB4R2v9WkefkvMNj4SHyf8Zc0ryzDnOAXPQdL2wKkTu6slwSJfxB3QrVj/3tX90CCoY4CQr4PCgboWlKDqg6Fl6/XaakQTg2faVimapQk1Bj2ujCIOzVC2LcataQvqMdv2IGNnPMqMnVk9jjlgZaBuKd5UcWjgkrkQqWXnjlHLRAzNiTZhzpZ2pHXkbX00vvBBjpKi/Ll/ifVPzTf+BAn3pQ/2ba867RLNtCdw10Oo+M/8TYI392b8VG6Cdz99QLby7egAovd4EjK+4LASJlNsOGVM4XN9IEwN5UEPiBjOeM0M3SqXVc5Q90fLTB8h1P0UwJyj16+ulgkeHQcRCM/eHAlMH8SoCn50WyLjyhGLKm/NBVZ8ik5ZQfTAgpLrpGHPdYQR9sU0/a4/AM7/V2y2W9df/kI04PfHdP+7uGZYvhTp/0dcNnwVFZ9yOdb9O/Cj74pLh8Or8hGYDluYcuS5nFccxU7M8gfoHEBM/U8hvcQQGtSMR7d4gSg1ixxMaTyjZErCHIiQLKRQ2pxReIZqlV6UEdm+TdYTNB07BgamfQUth2sMmhqRKBlPOKag+bE8qbYsQ/LkzkCY07P0oBxSS/m9ADEHpDf+nW9GI30RZV/xvPNMXBI82Rvp9ULaJ7hwOjqUr6jCgd8rz8flxefi04eHy/LMB5XlUE5F48kdTnnA8af3yB+m6z4DWOCRooUXeW2dLXMizVgG+AkEiVZeNBnLmJC0cZgILQ5fwY7XOhCnj8I4mOx0GzHOQlAbl514S9NT+IXpzjNM69A0PwNPzJF77QNxGFTGhH/WNpj5otByJAS0fFP0P/imaOhfRqUbKe1/8TRuOLz8MbMcGPq7+InojH4vZgFHUDihppMMRDRMHjpDs1WrYPZoOi+6d52le7lnHhNaSWxWYNta5RM+yXRQIMblGBlLdULLcTkKXfCtcbPwlaG4NIVnPlVfmqbGm+tsAbrEovjCDdOTe8GHiZJVPcp6tsczFnnzmZVyacrB+5gEBzdF/7STP67rVf33/u3GRP6KlSETsLwtY18vP032AhaYdoIw9AK4o0d9H1Y6t/VRyMnU3QMFYiOqVqmwwqkM2yr80MbbJGJGEvTAgmmmFFM0n4Oyu2mnF+GMIJnzkansYaAXMl1gsn+2UVOM0cgZxJCLRgH1UsfSsAZOyLhZ1wSup7h0TOZM+3GcDpsLRl/Pz52vj5H3k6jg0heGJcFNgqtny6VA5v3SZ4G7/2goGyvNeSa4e3akLPe/d4EHkgM4ThVkpFwSoHwFJwMgjIQZylLQREm3iCSZJlBNeiBKRHfxtbMwdCpjCQ6PZuxiHYzioYLQKAqEpsIvojrrh/DrGV8hXxBaUtOm0yf1dfVESabbUFD8M8crgKtTyfixr4/+touXP4qbDhc/tbrOvKd3AtJx8I0G2dM30541adqUbSM42TsAoEyZ7YToFMLiAn6ksWUssl4LhPJwd5SN0slUBNV11imYcWSc5hMIz0A9p2CzDzh4tm+gPQfA9E76nHqjI242J057xaO0+mndT7DoQXIAKf23eLvfuLnRP0N6MnDl26v7PB9XngMO/PwMZ5qLBP7SWCabF31H2FpA1Bt/Xe3qYJtjo4IaIyx7QDvy6cgaSN1wDkZpKppi8ITwwYwQ4CkzSN9S96fHUKRuYugxno0jqDIaglOVa5I2Y2mBkZFUF5xX6jjtOFHW6TPLvGbbtcwsQ3v46eWc3W/VSGnn/1bBztdW19nedr8OHHojx6d+VAsub/56mQIcuivCRxdZcYoNLjvZngG0JN4y3HztZRJDu47RRclXofT1gFbRXvfBeNK4rXEouVSbblmRPUdo+i0Mzjo3dQ4Ep/mkosU7wOeC4UHJ12YPZIxMbmFh+mzxNQWCSX4rfOHt02u6KQoXdRGufAe3DHafq8tyBpDABqLg3qC2RQKtKciwGJVTRbDcYZEVMIVgjLDIbg3AlLPNPotDnYjNVAJq47J0A6GhaBVRz1M+JqPcl5CI6UVI+DKp+FT0KT5QR+xcHzh+YDQJz+4THgbemBmNKfAyEDFkbKYx4HTzMzxZ2PfqYfc/lEHkel74WRfYW4XpaUD3KBDg71tkYHVWt8VvXoDCW7gGNzXZzIgMVB7NGlsmxYyt5XwMb9UmnhPxisja8qgB9Z6IY+zuMoUYfbD9OWXi8G8VQkhZV6SylsqIWLTXMgqoDJU+nw+gSwDm0Nx3MmiDGrpN3QXqucygf19geMo8pl/+jT/i0ezdhEd/HhS/NlT9ZwfQF5Brz5LtXOl5b4Git6AVod1QvKhijEa8qGEYDg7TbGOyeskFaD8Csd1bvsUouO2HOSdFp3rcKOBPG8CNozhPyN3ihxZPFiH4ZGl0sQ6a4WVYOjx5ssvdWJn7qPzJirlnezk+QdyewGxQGnjXCQvXQBvKw6JeM41noPptpj6s3Cg4W6pUkcwToqZpox7D97Ihj2dx7i3vtt7ww7ICAXz6M3gUW+609R6frhCAZuRxspTxxZ9g0NY1Tm+eVb9p/Z9+vmvln36rf6ug61+D9P13/x8AdV0TBJO66E4HywCqN7jEuQbPAIpI2DAId8edQHMdrvoJtl+tsEwxrZFJA3/C6Jsv3Wiaqk2Bb9sE0D0W+rYj4wmgGRHLsmgG4Rm5h6f7cRxJtYEJko2hxpldPiwPWjTT+jsboGZvzytwy2DvsaF/Ja89r4xPB75OkB1ZUpw1q3XQKZcATImtocPpLDTKQkGiuqFLCptVDOXu++emH0tLzP2IrxVHKf0YHa3RWp4UnWI8wLQXt4ak22hnFsB/M0BkVgFzNMwhWp71nM0Zj5WHjkSk/YTuchB6WfOurnPf6U289I87Or1SaPt+ErcM9hxDGTTQr/93Bwcw+V4HAy/gzBRwcgDdfz1lL9N4P9ioDJMpFrvWwveUVRmZ+6IJUBls0T63VTyG/CeARyiWBTB8ccoAnj1YMO0CodHc51D9eOtiVk7L9P0c5TP3zblYKN7B8ULLAWKiXAhvRA+z3C5+un8SYJ3F/ntxy2D/T9Vl++7pfxmYwC4HmSg61SBzVWV9Av8FuRWcS08BtnsKqpgpAzNCHTFbih8MU8QILV53G2p6weNzhqcMmXYgvE8ZnL62TsqMx3uJKMzhV7ixF9da/myu7LXmyZCm+KHBN+G3IpjK1O//i8d4ylDt4z3RNCyEiSIxjsbg6wxA16UMYPxd/k2E9N+C9moHhP46OYX0/wib4wtlmf3fCh54T90UnEl++jRYfZhh1GrCZykTSLQF6hdsdP8s6hj6VUZiaXr8BPgKTMbCHFLV1gpd8VaNp+UQ5Nrx2GO70bis450yOKsHGsUqltRt6dnpKwDuEyHGt5i66v0HBelHQMnQkyHauoO/hJsO3W8RDKT1f/erwA/7Mu5gxpx57+zQ9hk1JAdwBR8YCWiF9RRQiMEG00cu03TCqknBaG4rZRkdQADd4KL6IiUvY1lL0AB3dFrBcoeevDz6QpyS1ErsGYtYnIaMClxNrjV2Oz+KT/ZuQAXWaXoOeAq0HhD+6C2LdGQ86V9z739tTeCO18XofDduGiSnc8dP1+WH7huiP3i0nwSGu4asYybxxCLsC6fTMiCQaBgch1B5WgF9ll4x1jLwYM6OQbGXcVxlmSNMO0YdrVv0VNSy5dXehXVAWlGF0IaqE6f6Gjw+zQoICr0J8OUpBNdmTp5eEFIjjRsAQRFO/+rrzvTabX4cqPo48hu4KY8E05OHI28py5IepOif1v/PvwdcZ6ZgXcdaw/YvIDzVPwVY4jGWgrAI7vJjB8AimnEaI1jjh6lTCjR3XyC00k1jgAGoFdwaKFQUZRFR8R7YmMENobm+9nhSbd1lCeG/AFHjaeEFUtWYv+Y7Hczxq3IvQ5OpslCcuK6G/l2A7/3n6t173X+K0ofehBsOiebCPGpMc5Z4OP8//a8Rc9laENYsR8XDo+ncOYCwN/xTbHimwLAGrDwmW2NWaZgX5S2uNkATHauUOSuY6Wvy55FzsgYPLzh1jpJZVBpxdZmliwZrniEw4zd0xeHVtmVLALC2TgYzztmi0XdusnBoG2bY69/0kZnHs7p/4X3R+H7GpPyDDA/8bP8fg29EJpAi/6Ff4Tv/6dFfF/3/Dn7AA9r7Ah7ILJztE1f7fw2+ehFogbfHjs9ZIxyZysTZxLeie9mx/3qvjawB/prdtGd8uBuYRHFG47JZheVHtxdOa0Sx8tC0lOyo5yfjHp2k6ttNG2154P5KDM7ojHWnTtsCR/ErU30PuN3v2pc1Lr23dczhKX4rB6vu0wtByQkc/jXUb+ZF2L8FHPud63sykJ42vPI3h+8DGB1JzuXoO/rUPz//z2Oyey1jhseCiIHg2SwqOHd52X28tAP1JmDYjm3+QvfiPR8Xz+O63KHt1RjzzDPCZAsWbJai+Ws4hMK49BiZsrXGqI3AZjQ6aoUGLab8IFmFGJ49njz6urrhsDGFkwkFtEHL0yq2dj4sENi+LOgfA6n7Dp3gpw91nv/vGKF/2fA30E/f8zv2u9FJnFzPEXTLiF/tjT/9+KigO9A+8lbg7PuHj4Wq8squcnMbMMCBvVIuXL8eug+rT4RV9OSyPCgB702fBisEaoTb1dkv11hjE4WnPH+Fw9q2vpKj75eEpv0KEOtbl5sv+FQ8gdBw5FDRa7UXPsbJrxXbMc34Qo77STWNN0fmE+Mp5G7bM971nLEx5jo2zhbNGWX3/E3/XcDu02AwfWJ13X0a7Nn+p8NXX8D4C8KUQSQHkZ7vd58Ge3XdVp+T8S/j+ZnfmtDZ5XAEtL73V8qC4Jn5SS/8Pay/CgQ4DqX7OGjAk7HxVmUEzie27GQWiqvLvTLLPFNGQe3ll0Qg1pCYsdjPZNnPgMHwIpwmUzA2Pu8bhJM01/xcmMdTNX4x4/TmQTh/6zjZuZ/s8j6z1hwPk9NUu6E+RenkBMK+3gkUPw1Wc0X3mMi1ODjJURy+PzqQ88DX/jSyd37GeG5AmSo/Ey397ezjoGwbBuHOsL04EO6NlQ9FD7FdDN6uVWwqp89Q91qYJgWvvCEUru7HQhawSrMzLlumcG9nJlgvNTRPoWKvbKuH1JKJSd9Z6lZch7I5XT7Y5UJLlhOpOluvVzDQoT/ssnisrVO/zk44eyFM1HV1KXU/aT/gq3/c/1PQow86X+pBoyx3wJZAw/3eV/X////CR4Bnf//6//+grIe+vUjfArwcTjDjV2xOdLor9y8v48HY+fGwxHFJ/0eQeNRCYZzIXEVBgEdMIR5eBjSyZGApO80ebP+aJlB7Tx3Bbd/AvNScZSQskovqRwhNL2vx+vJwNY+6vZYRwNN6KfuTuWWE18lsoRHJ5y6JZn28Vfrd/7tP9V8N2vlS+RPdavz2OveFVVmK+gfTh0J/Dngu7vaffV/d3v2KMVAvbVvjxkgrbeJvB8HpcBVPvP5SeAoTsIbP3cAGfrghfSA3nh5B/62M7Xg8ieHHcmtA+ie7J+JxXzz+IR6PxQ32dWncMtg4gA1swIByBCfjcSAez6B3CMmQz8bj0oB6YDh+PB5bwzk5gHfH4z23s+Fn2DiADWygAdEZ3I/eEaTvZ2wNR/6K9rnhSC/RnU7naPSTafftBN8Htj1/7BUCQzwAAAAASUVORK5CYII=" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space">A slider for adjusting the color saturation channel in the HSV color space.<a href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space" class="hash-link" aria-label="Direct link to A slider for adjusting the color saturation channel in the HSV color space." title="Direct link to A slider for adjusting the color saturation channel in the HSV color space.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">BrightnessSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/hsl"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">HSL</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space" class="table-of-contents__link toc-highlight">A slider for adjusting the color saturation channel in the HSV color space.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSB/SaturationSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;SaturationSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;SaturationSlider /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A slider for adjusting the color saturation channel in the HSV color space."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A slider for adjusting the color saturation channel in the HSV color space."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                                      >BrightnessSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+                                      >SaturationSlider</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/hsb"
+                                ><span itemprop="name">HSB</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">SaturationSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;SaturationSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="saturation"
+                              src="data:image/png;base64,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"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3
+                                class="anchor anchorWithStickyNavbar_LWe7"
+                                id="a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space"
+                              >
+                                A slider for adjusting the color saturation channel in the HSV color space.<a
+                                  href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider for adjusting the color saturation channel in the HSV color space."
+                                  title="Direct link to A slider for adjusting the color saturation channel in the HSV color space."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">BrightnessSlider</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/category/hsl"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">HSL</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a
+                            href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsv-color-space"
+                            class="table-of-contents__link toc-highlight"
+                            >A slider for adjusting the color saturation channel in the HSV color space.</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/HSL/HSLSaturationSlider/index.html b/docs/build/docs/API/Sliders/HSL/HSLSaturationSlider/index.html
index d25cdef..6051543 100644
--- a/docs/build/docs/API/Sliders/HSL/HSLSaturationSlider/index.html
+++ b/docs/build/docs/API/Sliders/HSL/HSLSaturationSlider/index.html
@@ -1,128 +1,863 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSL/HSLSaturationSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;HSLSaturationSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;HSLSaturationSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider for adjusting the color saturation channel in the HSL color space."><meta data-rh="true" property="og:description" content="A slider for adjusting the color saturation channel in the HSL color space."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"HSL","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"},{"@type":"ListItem","position":4,"name":"HSLSaturationSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Collapse sidebar category &#x27;HSL&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider">HSLSaturationSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider">LuminanceSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular">LuminanceCircular</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/hsl"><span>HSL</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">HSLSaturationSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;HSLSaturationSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="hsl_saturation" src="/reanimated-color-picker/assets/images/hsl_saturation-640380a560465175a49e9a4f74d54f0a.png" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space">A slider for adjusting the color saturation channel in the HSL color space.<a href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space" class="hash-link" aria-label="Direct link to A slider for adjusting the color saturation channel in the HSL color space." title="Direct link to A slider for adjusting the color saturation channel in the HSL color space.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/hsl"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">HSL</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">LuminanceSlider</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space" class="table-of-contents__link toc-highlight">A slider for adjusting the color saturation channel in the HSL color space.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSL/HSLSaturationSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;HSLSaturationSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;HSLSaturationSlider /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A slider for adjusting the color saturation channel in the HSL color space."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A slider for adjusting the color saturation channel in the HSL color space."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                                      >HSLSaturationSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+                                      >LuminanceSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+                                      >LuminanceCircular</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/hsl"
+                                ><span itemprop="name">HSL</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">HSLSaturationSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;HSLSaturationSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="hsl_saturation"
+                              src="/reanimated-color-picker/assets/images/hsl_saturation-640380a560465175a49e9a4f74d54f0a.png"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3
+                                class="anchor anchorWithStickyNavbar_LWe7"
+                                id="a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space"
+                              >
+                                A slider for adjusting the color saturation channel in the HSL color space.<a
+                                  href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider for adjusting the color saturation channel in the HSL color space."
+                                  title="Direct link to A slider for adjusting the color saturation channel in the HSL color space."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/category/hsl"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">HSL</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">LuminanceSlider</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a
+                            href="#a-slider-for-adjusting-the-color-saturation-channel-in-the-hsl-color-space"
+                            class="table-of-contents__link toc-highlight"
+                            >A slider for adjusting the color saturation channel in the HSL color space.</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/HSL/LuminanceCircular/index.html b/docs/build/docs/API/Sliders/HSL/LuminanceCircular/index.html
index f5d1ffb..5450cda 100644
--- a/docs/build/docs/API/Sliders/HSL/LuminanceCircular/index.html
+++ b/docs/build/docs/API/Sliders/HSL/LuminanceCircular/index.html
@@ -1,115 +1,865 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSL/LuminanceCircular" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;LuminanceCircular /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;LuminanceCircular /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A circular slider for adjusting the color luminance channel in the HSL color space."><meta data-rh="true" property="og:description" content="A circular slider for adjusting the color luminance channel in the HSL color space."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"HSL","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"},{"@type":"ListItem","position":4,"name":"LuminanceCircular","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Collapse sidebar category &#x27;HSL&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider">HSLSaturationSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider">LuminanceSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular">LuminanceCircular</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/hsl"><span>HSL</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">LuminanceCircular</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;LuminanceCircular /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="LuminanceCircular" src="/reanimated-color-picker/assets/images/LuminanceCircular-70dc877ca2fe4511bf017e519eb3a89c.png" width="200" height="200" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space">A circular slider for adjusting the color luminance channel in the HSL color space<a href="#a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space" class="hash-link" aria-label="Direct link to A circular slider for adjusting the color luminance channel in the HSL color space" title="Direct link to A circular slider for adjusting the color luminance channel in the HSL color space">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="rotate"><code>rotate</code><a href="#rotate" class="hash-link" aria-label="Direct link to rotate" title="Direct link to rotate">​</a></h3>
-<ul>
-<li>Specify a degree of rotation for the luminance circle</li>
-<li><code>type: number</code></li>
-<li><code>default: 0</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness of the slider.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="containerstyle"><code>containerStyle</code><a href="#containerstyle" class="hash-link" aria-label="Direct link to containerstyle" title="Direct link to containerstyle">​</a></h3>
-<ul>
-<li>The style of the container that wraps the given children.</li>
-<li><code>type: ViewStyle</code></li>
-</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">LuminanceSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/rgb"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">RGB</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space" class="table-of-contents__link toc-highlight">A circular slider for adjusting the color luminance channel in the HSL color space</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#rotate" class="table-of-contents__link toc-highlight"><code>rotate</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li><li><a href="#containerstyle" class="table-of-contents__link toc-highlight"><code>containerStyle</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSL/LuminanceCircular"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;LuminanceCircular /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;LuminanceCircular /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A circular slider for adjusting the color luminance channel in the HSL color space."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A circular slider for adjusting the color luminance channel in the HSL color space."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                                      >HSLSaturationSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+                                      >LuminanceSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+                                      >LuminanceCircular</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/hsl"
+                                ><span itemprop="name">HSL</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">LuminanceCircular</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;LuminanceCircular /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="LuminanceCircular"
+                              src="/reanimated-color-picker/assets/images/LuminanceCircular-70dc877ca2fe4511bf017e519eb3a89c.png"
+                              width="200"
+                              height="200"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3
+                                class="anchor anchorWithStickyNavbar_LWe7"
+                                id="a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space"
+                              >
+                                A circular slider for adjusting the color luminance channel in the HSL color space<a
+                                  href="#a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space"
+                                  class="hash-link"
+                                  aria-label="Direct link to A circular slider for adjusting the color luminance channel in the HSL color space"
+                                  title="Direct link to A circular slider for adjusting the color luminance channel in the HSL color space"
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="rotate">
+                            <code>rotate</code
+                            ><a href="#rotate" class="hash-link" aria-label="Direct link to rotate" title="Direct link to rotate"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Specify a degree of rotation for the luminance circle</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 0</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The thickness of the slider.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="containerstyle">
+                            <code>containerStyle</code
+                            ><a
+                              href="#containerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to containerstyle"
+                              title="Direct link to containerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the container that wraps the given children.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">LuminanceSlider</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/category/rgb"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">RGB</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a
+                            href="#a-circular-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space"
+                            class="table-of-contents__link toc-highlight"
+                            >A circular slider for adjusting the color luminance channel in the HSL color space</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#rotate" class="table-of-contents__link toc-highlight"><code>rotate</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a>
+                            </li>
+                            <li>
+                              <a href="#sliderthickness" class="table-of-contents__link toc-highlight"
+                                ><code>sliderThickness</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>thumbInnerStyle</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a>
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationValue</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"
+                                ><code>thumbScaleAnimationDuration</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a>
+                            </li>
+                            <li>
+                              <a href="#containerstyle" class="table-of-contents__link toc-highlight"
+                                ><code>containerStyle</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/HSL/LuminanceSlider/index.html b/docs/build/docs/API/Sliders/HSL/LuminanceSlider/index.html
index dc82aee..e3bbb97 100644
--- a/docs/build/docs/API/Sliders/HSL/LuminanceSlider/index.html
+++ b/docs/build/docs/API/Sliders/HSL/LuminanceSlider/index.html
@@ -1,128 +1,863 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSL/LuminanceSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;LuminanceSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;LuminanceSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider for adjusting the color luminance channel in the HSL color space."><meta data-rh="true" property="og:description" content="A slider for adjusting the color luminance channel in the HSL color space."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"HSL","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"},{"@type":"ListItem","position":4,"name":"LuminanceSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Collapse sidebar category &#x27;HSL&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider">HSLSaturationSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider">LuminanceSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular">LuminanceCircular</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/hsl"><span>HSL</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">LuminanceSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;LuminanceSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="luminance" src="data:image/png;base64,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" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space">A slider for adjusting the color luminance channel in the HSL color space.<a href="#a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space" class="hash-link" aria-label="Direct link to A slider for adjusting the color luminance channel in the HSL color space." title="Direct link to A slider for adjusting the color luminance channel in the HSL color space.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">HSLSaturationSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">LuminanceCircular</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space" class="table-of-contents__link toc-highlight">A slider for adjusting the color luminance channel in the HSL color space.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/HSL/LuminanceSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;LuminanceSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;LuminanceSlider /&gt; | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="A slider for adjusting the color luminance channel in the HSL color space."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="A slider for adjusting the color luminance channel in the HSL color space."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                                      >HSLSaturationSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+                                      >LuminanceSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+                                      >LuminanceCircular</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/hsl"
+                                ><span itemprop="name">HSL</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">LuminanceSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;LuminanceSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="luminance"
+                              src="data:image/png;base64,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"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3
+                                class="anchor anchorWithStickyNavbar_LWe7"
+                                id="a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space"
+                              >
+                                A slider for adjusting the color luminance channel in the HSL color space.<a
+                                  href="#a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider for adjusting the color luminance channel in the HSL color space."
+                                  title="Direct link to A slider for adjusting the color luminance channel in the HSL color space."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">HSLSaturationSlider</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">LuminanceCircular</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a
+                            href="#a-slider-for-adjusting-the-color-luminance-channel-in-the-hsl-color-space"
+                            class="table-of-contents__link toc-highlight"
+                            >A slider for adjusting the color luminance channel in the HSL color space.</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/Hue/HueCircular/index.html b/docs/build/docs/API/Sliders/Hue/HueCircular/index.html
index 01f1e4f..982d9b5 100644
--- a/docs/build/docs/API/Sliders/Hue/HueCircular/index.html
+++ b/docs/build/docs/API/Sliders/Hue/HueCircular/index.html
@@ -1,115 +1,430 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/Hue/HueCircular" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;HueCircular /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;HueCircular /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider to change the color&#x27;s hue."><meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s hue."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"Hue","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hue"},{"@type":"ListItem","position":4,"name":"HueCircular","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Collapse sidebar category &#x27;Hue&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider">HueSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular">HueCircular</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/hue"><span>Hue</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">HueCircular</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;HueCircular /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="HueCircular" src="/reanimated-color-picker/assets/images/HueCircular-3b05147e1c8a1622bff99e7baa3db115.png" width="200" height="200" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-circular-slider-to-change-the-colors-hue">A circular slider to change the color&#x27;s hue.<a href="#a-circular-slider-to-change-the-colors-hue" class="hash-link" aria-label="Direct link to A circular slider to change the color&#x27;s hue." title="Direct link to A circular slider to change the color&#x27;s hue.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="rotate"><code>rotate</code><a href="#rotate" class="hash-link" aria-label="Direct link to rotate" title="Direct link to rotate">​</a></h3>
-<ul>
-<li>Specify a degree of rotation for the hue circle.</li>
-<li><code>type: number</code></li>
-<li><code>default: 0</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness of the slider.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="containerstyle"><code>containerStyle</code><a href="#containerstyle" class="hash-link" aria-label="Direct link to containerstyle" title="Direct link to containerstyle">​</a></h3>
-<ul>
-<li>The style of the container that wraps the given children.</li>
-<li><code>type: ViewStyle</code></li>
-</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">HueSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/hsb"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">HSB</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-circular-slider-to-change-the-colors-hue" class="table-of-contents__link toc-highlight">A circular slider to change the color&#39;s hue.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#rotate" class="table-of-contents__link toc-highlight"><code>rotate</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li><li><a href="#containerstyle" class="table-of-contents__link toc-highlight"><code>containerStyle</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/Hue/HueCircular"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;HueCircular /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;HueCircular /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A slider to change the color&#x27;s hue." />
+    <meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s hue." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+                                      >HueSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+                                      >HueCircular</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/hue"
+                                ><span itemprop="name">Hue</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">HueCircular</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;HueCircular /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="HueCircular"
+                              src="/reanimated-color-picker/assets/images/HueCircular-3b05147e1c8a1622bff99e7baa3db115.png"
+                              width="200"
+                              height="200"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-circular-slider-to-change-the-colors-hue">
+                                A circular slider to change the color&#x27;s hue.<a
+                                  href="#a-circular-slider-to-change-the-colors-hue"
+                                  class="hash-link"
+                                  aria-label="Direct link to A circular slider to change the color&#x27;s hue."
+                                  title="Direct link to A circular slider to change the color&#x27;s hue."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a
+                              href="#props"
+                              class="hash-link"
+                              aria-label="Direct link to Props"
+                              title="Direct link to Props"
+                            ></a>
+                          </h2>
+                        </div>
+                      </article>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/Hue/HueSlider/index.html b/docs/build/docs/API/Sliders/Hue/HueSlider/index.html
index c374043..295fd49 100644
--- a/docs/build/docs/API/Sliders/Hue/HueSlider/index.html
+++ b/docs/build/docs/API/Sliders/Hue/HueSlider/index.html
@@ -1,128 +1,842 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/Hue/HueSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;HueSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;HueSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider to change the color&#x27;s hue."><meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s hue."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"Hue","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hue"},{"@type":"ListItem","position":4,"name":"HueSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Collapse sidebar category &#x27;Hue&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider">HueSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular">HueCircular</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/hue"><span>Hue</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">HueSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;HueSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="hue" src="data:image/png;base64,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" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-hue">A slider to change the color&#x27;s hue.<a href="#a-slider-to-change-the-colors-hue" class="hash-link" aria-label="Direct link to A slider to change the color&#x27;s hue." title="Direct link to A slider to change the color&#x27;s hue.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/hue"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Hue</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">HueCircular</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-to-change-the-colors-hue" class="table-of-contents__link toc-highlight">A slider to change the color&#39;s hue.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/Hue/HueSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;HueSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;HueSlider /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A slider to change the color&#x27;s hue." />
+    <meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s hue." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+                                      >HueSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+                                      >HueCircular</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/hue"
+                                ><span itemprop="name">Hue</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">HueSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;HueSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="hue"
+                              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAoCAYAAAAR+iSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABuxSURBVHgB7V3tr2ZXVf+t5869M1OhM2U0jAIztwYpfIBONcb2Cwx80GCkpSSaaCK00YAhJhT+gU7/AS0hUSJG2vChiSa0BONL1MwUjaAhTquJ0kroHRAZEtregdKZuXPvs1znnP3yW2vvc6eVzliTuydnzjn7Ze21117rt/bbea5gL+yFvTAbVPWk3W61a7ifsOtwuoawaddGup6w63EROYP/R0GwF/bCXnDBjH4w8Pvs+phdz9t13q5n0v1SuoZwABUQbrZr3a7Ldp2x6wEDgw28ysMeAOyFvZBCMvxTdn3Ern/E5NU38fLCQOPdmADhMbzKgeAlAYDebsOfNdxl10nsN5RbtUauWUK89tu12olfs2rWNOS1uFV1aZrTBhqrYu8Ktefl8LxPsVwAWwvBFVFcsSxXrOiWNeEKFJfteYgb4HeLLo67Ynm3LO9WiruS4i+ntCmflnxTnNFOdWx1aE13SbQE2+O1sJRVu/ZhmQSipWEshOldxvT9473m5fT9Iz0uKy7fnOD3T3ddrema6C5Xp/idxSTI7UGYMj1bY8SedSsIM12SBKeX++lzZfQydUi6y/C8PT0rdZhsDzxM5YZrYe+mAlhZTuoyqo7OqNuc+rEais/zC+brb78fePasXV+eeFgZ6kN77ZMpbTG8my6WZ+uRRbrkJmP01gUWP21yPPV94OELo6ZMwthCEW4WDAtoEIpeIQFensoMaZrLXEp5M62xrIHV1hNY2LXc+oLgK2dwlbBvt0R9O+4x6ZhYzOhFBoi0y+7W6H6B4T/JDzGB0hItlwYXr8M/Ta/jJWZMQ5zWrKiX2L+hjBRMU+JEKs2UIqFeTfmZYyXKqJxTHXApOY2p52emUWuEy6vEk5QWcKmYxumVM2XuNFJJQtWldaNJVBdTmaVr+MRL6U9fdyaR8/d6PMYV+kOa1DQllegGmfLn5AUTjs+Bx6JOQdUkqOF7HgTe/kHgPx8xM/rOYNSTgc+FUY9IqFMblPTR/n/e5H7G3MaTVs2DNig4YbDw8e+2zdQsEPVtEu2YURY2CUydlIfRx0kzlJN2v0/xsxuGrqcE//owZsKiF6lvxbq+DYaF+KwxsV44Lb2fc6beGaPFNyqnd+O4x8U3ML87/U6my3UUg1Pq0VxRVvqaR5LZizPfahQ+rpqsOrMs9oGe0UvzvnD8wtHJxqpNmzhWOuU1cILmXer/MoltrI+VRRLwjCCgHbFbfpFGYSvgerZ8z0z/SXjPXa8aM8M1RaRNZno5jzLtan2OfuRzkMUypR84BHzwDHDsncCTfwj88DvYPRRevc4LdqnveZPvH7wA/NINkLPHbIKwQsDKjIMaLhUEHMFWcyfBKJVVkINet/eHFG97xsx4HZ3QjAB0feUebO/8vo1zDjsGnNGTsWknLkOrBjXOIwgFGXvUhsHLp17SSlGTVyokEuI6uCfDYePVmffoQrT41dqxziCgZKDRoBUg80fbqmC43si1gRt1VL2cMjdcAygX/a8ZENP4KHWLLGk0RYVZGrWmtpdy/piW62UHpkKOizOhLezAg4GA7CXjfak7MoAO7SRIofL3np5oPP35OrxHh972ORtYP2X3b5pa2pLgOFIf4N1mWGtHBQeOKl77FsFrji+pv4jYJZP1Iy9A7r4BeNRA4D1Pe9sossjGS4ofG5qHNNHnMZ4EDjAAgaycVV2/V7DxGCe4EYC+Ce+H7gxe//CuUi1GjH4PCHFU0jVaVLbqCoCpJdWr1zQ3lEMg34SIltKJQ+gsnjJo4eWlUK9gwl7PvwOyKzWhkpH3Xht1l5a35FuAqN2iVefGvErGKk0XO5/Vk39KLCNaRXc0m2m5u/SBZpwCLJqm+Ey56r6Qa4bUgF+xYf+qGfBTn6cyQWV2bPh+8VN2fc6mBv9s7+ez8U9hac+Xztkq4T8JvvU5wdc/tYLNJ6Xaamz1oz8ADhnM/N4bAlPzbZqySJsvCupqnaIy2PSjimMf4pQCAHrUUGJpQ/7CgHg0kQ5hZ8wITGU0C4zxXGcmFO+qrHzigBIBKLXrhxCYU8c6Gn8bS+sMPWloZTPWcG/LR2hQVL9fe7JCQqsgfSjbBa6U21Mts45oUloC5EytN1TPNsSC64NOSk7dLh3mypQ2vHOTR7ULBtpMEYSqpbKt5Kbw8/cAP/ch4N8fdWRrAVtK2/4ju75oURfwksMVy/vtLy7w1Kf24fImAvFE/i8NBO45YjP0o5VZiSgWKZPzLMMjos0LKU7O1BFFMDsPKo6u5xx1BLDEadQDDnA9PN7IKzcIxQyF3i/WERqrzOzUy5rqEdE6xMew+Icyo9Ber2ps9Jy/qbx53Rb0nEBfgQTzqhVn/3mmX+v1EIEZLgXaAMbVQ3fc0hNY9soJkDWNAhhYpFDz5fKtLMwJfJ1sjB02nJMVkqSv3IUFMCsD7RpMIEN0X3fcpuP3A1/9EzPwy0QDyY7M6+tn7P5d/K/DlQs2GvjjNXz/6X1R0Wzx3rT5EZtH3P/GaTTAiLdbR5d2amOatXDPQLhxYzAbXz6aX0Y91SO22i+y3iII/ChAGQxAhCXAaAQPUJ7UAOFGK/LQM7eDzWa8JJmXtDgjIiAusYu6gL11NUmlHOxPBYCE1migkKnw/gOassxB36dz/UpltTFqh7fuf3XpY3ynSyfDmwStIm62VersFkQYdbU85ZeeXZbigrYdDpTQDdH/CMU5PlhxAKeOv3wKeO4ZG7pf8HQHNV7YPH9hXh+X8SOHnUs22/7TNTz35D4UhdakJedt2+7siwYCx4O59AROd2GJUWd0y+T8EpLGMicURz40PGRHdX/lpCPl/MCQz5XILhDM4zumo0ELqFCRiZAx5G0WdhnqK1FfustQNk4JMYAE0FFnVDnUmgZ+lhSjqBt70UiVOGipSqDeWh5DFxC1u9YnLiWnarA85bpCt2QoE60LnUxPAtYL3R04h3JRbRDS8iXhWZlNhd9CDCRKecrAeY6sA++404bpZ9Gg18Kc8soX8IqH//6b/bh8YaVWlG9fsanA7/yU+eN9tQHOKRbvhhKpC0pPtsqdQTpRF16IpgMYPTX8v7Cdw5N2X69D8p4SZmhO0g1JZaLXUVxnVRE4SgOTYsbJXaMxWhWgAyxTkQ4PAFpDrp6cYzx8ZLPiGkBv0q0n6FZ44p2GDDUo9UjJo01crKWFKA38p9SiKxmgNFBq72NO7XcDG+PII/WJy9sDArQEs9d3R0My217kzQg3q6USbV4zE6LxvvvN+2/Yot4Fz8dwW7OFPnkFPH8M40jgzw7WxmSvfNGcx5cNBO57U2WCnRvZ8hRFWsIrrNHI47pbKYOIkuu21n9yYU7srmn8E1kPhj6WaTDXu4BGVUJg5AJbslLDqAFSKiYCXp1EqjllBY7LbL4ZSsbvzZPza1My0wb8ZmCshbcLAe+bc2v9hqQQdXWlWC96ppgpSxMTqg80A1Rqegsum3Wy0Ufp0YUbIWjsyg5BEe/1XWUhdNePxTOg6Pin9HzLSdvyO93SXR0O67yMxb6XGy6eX7GpwBrKHna2l7MGAB87NmVqVQ3dzmNjL3kEDVK6/lRPo9jx9l3DqcUTNg6opyMw07NjUhRtKFKkfZWezBnz5CtpRyMDbmApOW8i3sxa3+knAHXnHYjmy6E3qciGW+EkgkmUQa2HU5k/BoOe/LTzzC2I+XOUuCJdinPdhNaYc5wCHbmg7Ox2fYf4BKadAWI3nrI3d74BHnQinfw+GP8+2/a7uIlmFLH2JVzzcP5LB9HY1oVt4Hm7Tr6uFWTj/FKhjJga8rLt9TqtJT4EGwGInCgjgLjfyGO87KF1Dqopzo3lZvKUBsXeylW2y2qjgSjQ7plnj8amyJ7eG3bvnJ2invzj2GyUPGSnM4jg038I7sgDg5R6cuy0v+GloyWXuHj/NmezFZTmgjoQhKelKAuqdZwQM8GdRZmpxPW8hvKcx60ri+eFGewu9lHZrv1Q3W99F/C9jTZt5dy19f45bF1Y4IVz4dzdYEvDguCtr602JjNSLeoVGxvsjRHYkeo5EKzbFEAPV8gMBiuJyfGZe6iTr6CTguf1E+0eCHSC47HnXwC/yjMVmvNI4tJ7qwO8K6BUInKZKfTGAh50ptwVEjxAxcnJoqQhgJqibur5Ninx2JOl9l+DkNzOB1mi+9ZCPB3X9VJVpuFCAM7q+Ah5ihcHdoEteGPXOhrI95nshf6x24Bnn2nrXH0a1y1ceHotyZQY3rhkfvhIetF6i8OccqAiZW2ORua8JHwWck9IgsMLV5h7eDpvi7I3k9+5JyLDzSpORrUQTxxw2FUBZvPVz2rm8inlnf73o4Lq5zlf0H74dQY0owMgnwHQUCuKIXuOaLmtQITnn2sUR1WAhl7clmyC0EW5Jf3n1mDJy2c9dDrFNPmVcH82SKVZskdxI6gT5Y87Ae6Z6JTv1uz6iePAi5twfm4c+J7HdQsvnFtt1f+8rTyeuBF1NTPZXFRH96BoWx6DUrTOZJm+XCwvroDbcwRJPhs1ehyiSHZ83MXglRgToQWeqqWchYtJ/PCh9CrTmA9KBlnhzy/Bze2+81Sit57ejhIynTn+4rEfb+Kx/pabnLfy4KCCcT1QKDkVHS8uztDYkzt62pAtxs2gUQ4aZd9AvqVTtbsXdScbcflzHVlk0e9Y+PH1CQBYqkP6ynUEgK3NuB1o94s7thW4mhjarXQWXH4lISnbKHYPrvOGA2vCCb16FXVDloDBwW1HC7rcaKtRMtWRD/o0m3ESV7nDRyxpEZGH3bwfD3jzyH4aZOBx6dC3o9V1Hjkkjqguv0aAUBcKfzVNQ0qlfrXeROC28ltKq8f1XGtbAtV4k4z5qG4DRUG4EtOJEVmifj4SPDSIDGsTz/Sy7+GPgFx9pDJ9sANusInulfQ7Pm6kcw22/ubCsCXYjMQvLysA5JDRbg5kGcbcobycTLpThMe9WJlYOOq9vZ1koA2HGc4LxKMj/Tkl1tCY8CisRF792nl0NpmopjW/l2MvH28MSsdDg2rUEFsp1F0BTZS43sgXXJ5aVwSOORhg8Ig81clDszsUXibvSQetcix5X6BDg4TqwZBC9tjS556rmtvfd+9Bf3VGdcd37cudef6/CH4nXYK57NIg1kIJ6UqoGH1HARPuUAaAXo8VBghF8tDffZlBsAxQB1EcApJJZ1Qg1BCADkR505uysNLT9wOuBdVUea++FalGTlIJbWIrH6FtLq0HDr06pENBIfCfA/e5ZkqClnagrx19QWvHcQ3Af6sBolwfxEXM5+26AFbWJhFezD3HEFUvqOCYhSoehv+rB4KTHPLvx3ULKwc6KHfAfPDmlcyVVzHnUEko2aijmrFwlMtSCJ2xaBNmlD8z0yzodVArwvfVNGWWSQ1gkkyCerb3NL3VBbq47RdbqB1ac8rrd90lpAhaWBH4kQOn5NxCHPuUWmMsidK+WkusGWQ0kVc0eT1YaN84HZU2OKDZFQFq/gYMY1PIwRWbSFeeGnS/UyMaL16YACBEY3kY1y0cfP329MBCumnNdgJeTPHqPbRzmNHaxcc1x/HZBgX+hGCVeD1cPAqUvTqHzNBMvBuroRNSj0pkzNPJ3lubUUmPxhwtBD8aeIA3ydoCP/TWGbCYUr1J984AxPb16uwZZr3HTvb+va5DtDDhSvT6Q0PtirKuUpzL3H40GtUj0AB2+1pTIpEOXZef7GBUURIJ28nEf3rkdHr/5hPAoaMt79vHcd3CwaPbyZ+RkIZvATYuTs88bGsC2YEDaJnJExCRR3SlyLQIuFmI8RKtG2JkuO2hDN2Ve1pjbWjFz3TqAp701iJQEYwHGLyi31JtzbXmbf23P36jjm9v8iC6DBexHNeoIUf8Pxq8lLLSaVdceOR7fo7tK4JLbldAOpS/qEx95xdaSY+0baGTlPg7p1O3+byBljt3lt75UxRWNw1loopmVfzaGeDIzVRPyr99C65bOPSWrVZ46zYsefIH84UyWBebUjS7bOMrCbP5RqDajstrk49hDWADLg5oHFqT0Cng7L1V2XLXHjDkqGRaGhrEii0eX1rDhDPGthZ/kt/RLjDQlmFw8KDDz5EDLWWj+ft6fV2T+XpoAOA4qHzU1vuRjxbjrvJiOYrXkUyrWJNjp/IvzAFlI6McVWfpspfnuLevXBakdhmr0nPvrEuzBkC0ne+ycC6NACoj07VzHNNPaV7jsHZ4idcc3556hZHv5oPAmefgG0Uh678K3CGLOfssysIdJyG9COiJhY0BzpTyQUlKXIkPUsZcfk6LkBzp1HwaDhI17QOz6ZV5xBaw6VDebhBnMh4Gaox2KLWmy6obVX6IXZIkWCbtacHdatNdWuProzdlL19T2aDFRdRnXgduLd5V6Tjo/j4sOupF9eSqpKvYaM6YNZWme9TOHJ46Y1uBN9kw/DAap7n1TlzzcPSdF4nJxN0h2/67tGMA8CxazhnZQlI07J5MVFoabgt/fBoBoH4F7SZdta5WQ3q9GPN3wuxvQCfTJRD0uxy7aYRP7xvJxFQfXjpGkwEJfmmtr1zSpHoIkMbM+ybtJyCxJum0SVy+2qs98ddulPZ8Fro2l+Q6XaVv2HgUfsid9NL9DkXE/1ineu6V6XQKRRCJG06ZN4mV2fPffhJ4422RAZsGvMMeX49rFgbv/7pbt9oGvcfQ6MzzPnNRRPF5Y6YyFKYgV6HR7sc+tpBNGwEM0wBejp1VoZhEQ4qYFkEjn8vUEF8zIA5Xstn0PxIhcwqA4UtzQV5zz/nUGelkiL2xBJucIBo65+oMxAsHSiW93+d5feWyTgWiQkQIg6un3JPslE5wakDYOKJqOSTwlI4jIkJsj5kCPytV5dLyy7JDR6m/hGj0HJVvhnv+uwdtxH0HsO8AGlDZ+jVcky3BYevvzb/5YtH7Uu1N5v3XrcIHvoHC/3gPVtw18jSKaLy+tu/RDuvzhuCFx6ddgAUecMepRmMUtAe0g8Fzz8QQ62x+zki8wZf2aGpb/zMbT1SrF2k8msIf251iBd4IlWjV9zoS4FMESsCQS0S48kHCG3du77yf34nwOp6BSjuU29rYvItcs5DzIm9CTnECDBAZPXjQS76LdHRyTj9QqxRSK/exqdZ8rHZCZcvWpXqaJR/VN/wQyD982uzujk6+Q4Y9v4hXPBy78xLWDqUFEVauEzeY//2emeFleDTqGDHpp/s9gUyMwSMbvPcuNVSAOTX8PwKAPIuHMP0dNMoY1LO3ClMYmktDaAzQ/aXgUjbkZdOQaoKdjOgdefOn8zi3oBqGNEafy3pI8AbSN/icrsE/B41uTNt7/ujjhThWVw95VVRQk8hOzhu1vmQhxaH2h6oq121SY6CRh9n9/qCkPQcu4kGgewaG7YJ8laS0PGL4iweAN9g04MajVDbR2bnVnn8V019U+xHD4Pnf9L7LuPGWHaez4/Pwx0FuXjPvfy4x3Wp1I2ggIB2ll2f1dhU/78/CG73/5sPDAx8Euhv8hxBH6RG6xBFCKcfvIS1zLdQb3OOlt3JWoXgqX+h4lqIWsNerTx3hzsBIa+IeArwH90arREGp7nosuH7cyxMRNtmWf2l4qzl6ENTGljMKQxeUM+ForNFDWucURMBZx2GfJDNR+p8dVK+QhrriVuCS8hUVTc1iR+iqL3o//SDIXz1gDvg3BiP1+jSyaduC8mG7foSdgYNHFT/z4S3cdOtOoVsqOWAP9x4x4/+v5P1RjbYwTMTikd8mUxbs2MEdGuKBAzbpx+LdObUAgJy3dYAFPl4lm4g3lUqlLjPxTgPSy0L8O0sdoF7KtIe5fzU0d+JLgB5IqCIQfSnv/vS/OIOOwZtwjuH/+z66zu8VAp6IUItRf7nA89IPighazHc2JGeoBAb5pwi8QfN0h9IpT9TV+J5fW8DC9FEQl8vPtcv9AuJyeh5BYDmlLzriiDTV6XBgzK6/t7WArz4E3PJez0ixH5sOrPyurRXc+fKAYPWw4g137uDNv30FazcqmjnRoNMfMOIP2dD/4e+FRvQYkdb+ymt1IqW8V2s0q/5j+vJewfmNnM39RIl8Cw/puo0CRD6L4U8l94YQ3L3LTnzEC45vNMirifc6WhB+mqdyrlpO8tjOnV2v/GSaEspGWfVC3/zq6QE+D+AH7vU8wTKY4HxNfOe3qY7YE0LwoA2dksl5VjcZSlO3vCAoIL2jliu7bkVXWI6HOWE6+jEh3ZLNRODK9JdLNFNiLj9Ht/f+5x8HPnLaQOADwNc/j9JEDis2JVizHQJ806YHT01/GWjnu5j+MK+FhY0gVs2eD64PfxpMbZ8//XmxhJpjD5Hc5O7XTNt+n/h2ayfc4GY9BmhRVdAMx6LjZQUZDvyp3Cf4jvvTYM3fBpQNPKZv1WE94LQhyHqjvzwmk1YFGZQaroQbKE1yY6Apv4a9J3Ejj/zoDVs6WsFptVn8cbBf3ut9m6/hPb9VQx9/Wy1R8Qt58xQ4Nk8+5iCP8wPt94QdkY4Zs6En2ov0TMe/JQGCBLpMgg2lu+Amu+s2MGOvu4ADf+zWa6tm3rzCVxuIaSk8YpPe3zoNvO3XgW88Wg0bAexWjhkQHJ/+YvBgMOPfERxEaIzV52rw/LN1o4OyYb+898em3wD8wLm2g5yakcGP7ScELwlSBZMTe0pSaMsT0J27BRsbMUf3rwPL12yR4Gu42Qrfa68bjgFJpRqUit3ODFDWYvvZswjFhxaknYg0CDCdrUBQDw6HIuUu7n2J/vFZBgL/oc/Vjt1UD8n5lgUK/KiglsilIs/8q4Q1tuaOhq4ztP2ThHqULDj/PFU+eu1WNahg3HEq74Th3eknvN7uJk8J9PJDOe6rcJsXw22Z9IbVqdSllW48fZjD8MdBPmMLgs/8NfCOj9ra32HMGBJmEFhKfr97V2WM1y8gHzXP/7ihy7tt3r+5gxkJpcdlvz7BLkFmOkA37OUewX/c1jP+IezDbmT/bdwdeEjvwLuMofdj+AVhwYnpDw1mLiVpaIIvJ+xRMor6qx0JHsVjNS9O5bSUVxZSR/eSTD/91Yq8M5CSnEC8LxVdFCoMAxzUlclUMvOMf1XbxNWt8EAygUE16snfivDWYmwBm692+MO0lj/AYZcG8RlnhciizqMBdR+IyBSVvwaohR0dSdrOHZgbz2kZ20uyUh8q0axiLAZfnmtbxjUAJVo5PoNB9B0LoCwcUvOLWoLupz8Bfe5JyO2ngB/atvzzZ22ov+npzX7sVBy043by+revQm5bsQ23C5BP9ggKNYBROTtGQrQsJEkQOGmlgj/013ERf8PuZ0wCjwn+5XFcJQj2wl7YC2NQtSkvhr+ShbswjXxPg3fGXloYnONw3vAOuz5t1wPmqV4ujesW9gBgL+yFEAgITto1nBt8BhMgDIY8nN3NqwUH0vWTdq2n+wAAts+AT76aDT+HPQDYC3thl2Bg8C5MQHACk5EPV94c3EzXsGh+Zrib0V912P1qCv8DplX9u/PVweAAAAAASUVORK5CYII="
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-hue">
+                                A slider to change the color&#x27;s hue.<a
+                                  href="#a-slider-to-change-the-colors-hue"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider to change the color&#x27;s hue."
+                                  title="Direct link to A slider to change the color&#x27;s hue."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/category/hue"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Hue</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">HueCircular</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#a-slider-to-change-the-colors-hue" class="table-of-contents__link toc-highlight"
+                            >A slider to change the color&#39;s hue.</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/OpacitySlider/index.html b/docs/build/docs/API/Sliders/OpacitySlider/index.html
index c950a26..911b3f9 100644
--- a/docs/build/docs/API/Sliders/OpacitySlider/index.html
+++ b/docs/build/docs/API/Sliders/OpacitySlider/index.html
@@ -1,128 +1,819 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/OpacitySlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;OpacitySlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;OpacitySlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider to change the color&#x27;s opacity."><meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s opacity."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"OpacitySlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">OpacitySlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;OpacitySlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="opacity" src="data:image/png;base64,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" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-opacity">A slider to change the color&#x27;s opacity.<a href="#a-slider-to-change-the-colors-opacity" class="hash-link" aria-label="Direct link to A slider to change the color&#x27;s opacity." title="Direct link to A slider to change the color&#x27;s opacity.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum"><code>adaptSpectrum</code><a href="#adaptspectrum" class="hash-link" aria-label="Direct link to adaptspectrum" title="Direct link to adaptspectrum">​</a></h3>
-<ul>
-<li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">BlueSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/preview"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Preview</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-to-change-the-colors-opacity" class="table-of-contents__link toc-highlight">A slider to change the color&#39;s opacity.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#adaptspectrum" class="table-of-contents__link toc-highlight"><code>adaptSpectrum</code></a></li><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/OpacitySlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;OpacitySlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;OpacitySlider /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A slider to change the color&#x27;s opacity." />
+    <meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s opacity." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a
+                                  class="menu__link menu__link--active"
+                                  aria-current="page"
+                                  tabindex="0"
+                                  href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">OpacitySlider</span
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;OpacitySlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="opacity"
+                              src="data:image/png;base64,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"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-opacity">
+                                A slider to change the color&#x27;s opacity.<a
+                                  href="#a-slider-to-change-the-colors-opacity"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider to change the color&#x27;s opacity."
+                                  title="Direct link to A slider to change the color&#x27;s opacity."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adaptspectrum">
+                            <code>adaptSpectrum</code
+                            ><a
+                              href="#adaptspectrum"
+                              class="hash-link"
+                              aria-label="Direct link to adaptspectrum"
+                              title="Direct link to adaptspectrum"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Slider background color spectrum adapts to changes in saturation and brightness.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">BlueSlider</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/category/preview"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Preview</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#a-slider-to-change-the-colors-opacity" class="table-of-contents__link toc-highlight"
+                            >A slider to change the color&#39;s opacity.</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#props" class="table-of-contents__link toc-highlight">Props</a>
+                          <ul>
+                            <li>
+                              <a href="#adaptspectrum" class="table-of-contents__link toc-highlight"
+                                ><code>adaptSpectrum</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/RGB/BlueSlider/index.html b/docs/build/docs/API/Sliders/RGB/BlueSlider/index.html
index 7c9b71c..692deb8 100644
--- a/docs/build/docs/API/Sliders/RGB/BlueSlider/index.html
+++ b/docs/build/docs/API/Sliders/RGB/BlueSlider/index.html
@@ -1,122 +1,826 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/RGB/BlueSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;BlueSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;BlueSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider to change the color&#x27;s blue channel."><meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s blue channel."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"RGB","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"},{"@type":"ListItem","position":4,"name":"BlueSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Collapse sidebar category &#x27;RGB&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider">RedSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider">GreenSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider">BlueSlider</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/rgb"><span>RGB</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">BlueSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;BlueSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="blue" src="data:image/png;base64,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" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-blue-channel">A slider to change the color&#x27;s blue channel.<a href="#a-slider-to-change-the-colors-blue-channel" class="hash-link" aria-label="Direct link to A slider to change the color&#x27;s blue channel." title="Direct link to A slider to change the color&#x27;s blue channel.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">GreenSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">OpacitySlider</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-to-change-the-colors-blue-channel" class="table-of-contents__link toc-highlight">A slider to change the color&#39;s blue channel.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/RGB/BlueSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;BlueSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;BlueSlider /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A slider to change the color&#x27;s blue channel." />
+    <meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s blue channel." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+                                      >RedSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+                                      >GreenSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+                                      >BlueSlider</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/rgb"
+                                ><span itemprop="name">RGB</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">BlueSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;BlueSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="blue"
+                              src="data:image/png;base64,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"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-blue-channel">
+                                A slider to change the color&#x27;s blue channel.<a
+                                  href="#a-slider-to-change-the-colors-blue-channel"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider to change the color&#x27;s blue channel."
+                                  title="Direct link to A slider to change the color&#x27;s blue channel."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">GreenSlider</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">OpacitySlider</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#a-slider-to-change-the-colors-blue-channel" class="table-of-contents__link toc-highlight"
+                            >A slider to change the color&#39;s blue channel.</a
+                          >
+                        </li>
+                        <li><a href="#props" class="table-of-contents__link toc-highlight">Props</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/RGB/GreenSlider/index.html b/docs/build/docs/API/Sliders/RGB/GreenSlider/index.html
index a47f19b..a3d6190 100644
--- a/docs/build/docs/API/Sliders/RGB/GreenSlider/index.html
+++ b/docs/build/docs/API/Sliders/RGB/GreenSlider/index.html
@@ -1,122 +1,826 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/RGB/GreenSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;GreenSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;GreenSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider to change the color&#x27;s green channel."><meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s green channel."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"RGB","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"},{"@type":"ListItem","position":4,"name":"GreenSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Collapse sidebar category &#x27;RGB&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider">RedSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider">GreenSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider">BlueSlider</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/rgb"><span>RGB</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">GreenSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;GreenSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="green" src="data:image/png;base64,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" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-green-channel">A slider to change the color&#x27;s green channel.<a href="#a-slider-to-change-the-colors-green-channel" class="hash-link" aria-label="Direct link to A slider to change the color&#x27;s green channel." title="Direct link to A slider to change the color&#x27;s green channel.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">RedSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">BlueSlider</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-to-change-the-colors-green-channel" class="table-of-contents__link toc-highlight">A slider to change the color&#39;s green channel.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/RGB/GreenSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;GreenSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;GreenSlider /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A slider to change the color&#x27;s green channel." />
+    <meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s green channel." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+                                      >RedSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+                                      >GreenSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+                                      >BlueSlider</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/rgb"
+                                ><span itemprop="name">RGB</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">GreenSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;GreenSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="green"
+                              src="data:image/png;base64,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"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-green-channel">
+                                A slider to change the color&#x27;s green channel.<a
+                                  href="#a-slider-to-change-the-colors-green-channel"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider to change the color&#x27;s green channel."
+                                  title="Direct link to A slider to change the color&#x27;s green channel."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">RedSlider</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">BlueSlider</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#a-slider-to-change-the-colors-green-channel" class="table-of-contents__link toc-highlight"
+                            >A slider to change the color&#39;s green channel.</a
+                          >
+                        </li>
+                        <li><a href="#props" class="table-of-contents__link toc-highlight">Props</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/API/Sliders/RGB/RedSlider/index.html b/docs/build/docs/API/Sliders/RGB/RedSlider/index.html
index ab7b603..5b8deac 100644
--- a/docs/build/docs/API/Sliders/RGB/RedSlider/index.html
+++ b/docs/build/docs/API/Sliders/RGB/RedSlider/index.html
@@ -1,122 +1,826 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/RGB/RedSlider" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">&lt;RedSlider /&gt; | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="&lt;RedSlider /&gt; | Reanimated Color Picker"><meta data-rh="true" name="description" content="A slider to change the color&#x27;s red channel."><meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s red channel."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"RGB","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"},{"@type":"ListItem","position":4,"name":"RedSlider","item":"https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Collapse sidebar category &#x27;RGB&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider">RedSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider">GreenSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider">BlueSlider</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/rgb"><span>RGB</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">RedSlider</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><code>&lt;RedSlider /&gt;</code></h1></header>
-<p><img decoding="async" loading="lazy" alt="red" src="data:image/png;base64,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" width="256" height="40" class="img_ev3q"></p>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-red-channel">A slider to change the color&#x27;s red channel.<a href="#a-slider-to-change-the-colors-red-channel" class="hash-link" aria-label="Direct link to A slider to change the color&#x27;s red channel." title="Direct link to A slider to change the color&#x27;s red channel.">​</a></h3>
-</li>
-</ul>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props">​</a></h2>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb"><code>boundedThumb</code><a href="#boundedthumb" class="hash-link" aria-label="Direct link to boundedthumb" title="Direct link to boundedthumb">​</a></h3>
-<p><img decoding="async" loading="lazy" alt="boundedThumb" src="data:image/png;base64,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" width="180" height="130" class="img_ev3q"></p>
-<ul>
-<li>Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.</li>
-<li>When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.</li>
-<li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize"><code>thumbSize</code><a href="#thumbsize" class="hash-link" aria-label="Direct link to thumbsize" title="Direct link to thumbsize">​</a></h3>
-<ul>
-<li>The size of the slider&#x27;s thumb.</li>
-<li><code>type: number</code></li>
-<li><code>default: 35</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor"><code>thumbColor</code><a href="#thumbcolor" class="hash-link" aria-label="Direct link to thumbcolor" title="Direct link to thumbcolor">​</a></h3>
-<ul>
-<li>The color of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: interactive*</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><strong>*interactive</strong></div><div class="admonitionContent_BuS1"><ul>
-<li>The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.</li>
-</ul></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness"><code>sliderThickness</code><a href="#sliderthickness" class="hash-link" aria-label="Direct link to sliderthickness" title="Direct link to sliderthickness">​</a></h3>
-<ul>
-<li>The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the <code>height</code> in <code>horizontal</code> mode.</li>
-<li><code>type: number</code></li>
-<li><code>default: 25</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape"><code>thumbShape</code><a href="#thumbshape" class="hash-link" aria-label="Direct link to thumbshape" title="Direct link to thumbshape">​</a></h3>
-<ul>
-<li>The shape and appearance of the slider&#x27;s thumb.</li>
-<li><code>type: string</code></li>
-<li><code>default: &#x27;ring&#x27;</code></li>
-<li><code>values:</code><code>&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; | &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27; | &#x27;rect&#x27; | &#x27;circle&#x27;</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle"><code>thumbStyle</code><a href="#thumbstyle" class="hash-link" aria-label="Direct link to thumbstyle" title="Direct link to thumbstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s containing View&#x27;s style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle"><code>thumbInnerStyle</code><a href="#thumbinnerstyle" class="hash-link" aria-label="Direct link to thumbinnerstyle" title="Direct link to thumbinnerstyle">​</a></h3>
-<ul>
-<li>Thumb&#x27;s inner View(s) style.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue"><code>thumbScaleAnimationValue</code><a href="#thumbscaleanimationvalue" class="hash-link" aria-label="Direct link to thumbscaleanimationvalue" title="Direct link to thumbscaleanimationvalue">​</a></h3>
-<ul>
-<li>Controls the scale value animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 1.2</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration"><code>thumbScaleAnimationDuration</code><a href="#thumbscaleanimationduration" class="hash-link" aria-label="Direct link to thumbscaleanimationduration" title="Direct link to thumbscaleanimationduration">​</a></h3>
-<ul>
-<li>Sets the duration of the scale animation of the thumb when active.</li>
-<li><code>type: number</code></li>
-<li><code>default: 100</code></li>
-</ul>
-<!-- -->
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb"><code>renderThumb</code><a href="#renderthumb" class="hash-link" aria-label="Direct link to renderthumb" title="Direct link to renderthumb">​</a></h3>
-<ul>
-<li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
-<li>Overrides <code>thumbShape</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops"><code>ThumbProps</code><a href="#thumbprops" class="hash-link" aria-label="Direct link to thumbprops" title="Direct link to thumbprops">​</a></h4>
-<table><thead><tr><th style="text-align:center">Prop</th><th style="text-align:center">Type</th><th style="text-align:left">Description</th></tr></thead><tbody><tr><td style="text-align:center"><code>positionStyle</code></td><td style="text-align:center"><code>StyleProp</code></td><td style="text-align:left">This style determines the position of the thumb and is a crucial element that should be included.</td></tr><tr><td style="text-align:center"><code>width</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>height</code></td><td style="text-align:center"><code>number</code></td><td style="text-align:left">Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position calculation.</td></tr><tr><td style="text-align:center"><code>adaptiveColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">White or black based on the contrast ratio.</td></tr><tr><td style="text-align:center"><code>currentColor</code></td><td style="text-align:center"><code>SharedValue&lt;string&gt;</code></td><td style="text-align:left">This shared value will update whenever the color changes.</td></tr><tr><td style="text-align:center"><code>initialColor</code></td><td style="text-align:center"><code>string</code></td><td style="text-align:left">The initial color value as a <code>string</code>.</td></tr></tbody></table>
-<ul>
-<li>Example Usage:</li>
-</ul>
-<div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse"><code>reverse</code><a href="#reverse" class="hash-link" aria-label="Direct link to reverse" title="Direct link to reverse">​</a></h3>
-<ul>
-<li>Reverse the slider direction.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical"><code>vertical</code><a href="#vertical" class="hash-link" aria-label="Direct link to vertical" title="Direct link to vertical">​</a></h3>
-<ul>
-<li>Change the slider orientation.</li>
-<li><code>type: boolean</code></li>
-<li><code>default: false</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures"><code>gestures</code><a href="#gestures" class="hash-link" aria-label="Direct link to gestures" title="Direct link to gestures">​</a></h3>
-<ul>
-<li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
-<li>These gestures will run simultaneously with the color picker gestures.</li>
-<li><code>type: Gesture[]</code></li>
-<li><code>default: []</code></li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="style"><code>style</code><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style">​</a></h3>
-<ul>
-<li>The style of the slider&#x27;s container.</li>
-<li><code>type: ViewStyle</code></li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><ul>
-<li>Certain style properties will be overridden.</li>
-</ul></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/rgb"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">RGB</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">GreenSlider</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#a-slider-to-change-the-colors-red-channel" class="table-of-contents__link toc-highlight">A slider to change the color&#39;s red channel.</a></li><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a><ul><li><a href="#boundedthumb" class="table-of-contents__link toc-highlight"><code>boundedThumb</code></a></li><li><a href="#thumbsize" class="table-of-contents__link toc-highlight"><code>thumbSize</code></a></li><li><a href="#thumbcolor" class="table-of-contents__link toc-highlight"><code>thumbColor</code></a></li><li><a href="#sliderthickness" class="table-of-contents__link toc-highlight"><code>sliderThickness</code></a></li><li><a href="#thumbshape" class="table-of-contents__link toc-highlight"><code>thumbShape</code></a></li><li><a href="#thumbstyle" class="table-of-contents__link toc-highlight"><code>thumbStyle</code></a></li><li><a href="#thumbinnerstyle" class="table-of-contents__link toc-highlight"><code>thumbInnerStyle</code></a></li><li><a href="#thumbscaleanimationvalue" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationValue</code></a></li><li><a href="#thumbscaleanimationduration" class="table-of-contents__link toc-highlight"><code>thumbScaleAnimationDuration</code></a></li><li><a href="#renderthumb" class="table-of-contents__link toc-highlight"><code>renderThumb</code></a></li><li><a href="#reverse" class="table-of-contents__link toc-highlight"><code>reverse</code></a></li><li><a href="#vertical" class="table-of-contents__link toc-highlight"><code>vertical</code></a></li><li><a href="#gestures" class="table-of-contents__link toc-highlight"><code>gestures</code></a></li><li><a href="#style" class="table-of-contents__link toc-highlight"><code>style</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-API/Sliders/RGB/RedSlider"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">&lt;RedSlider /&gt; | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta
+      data-rh="true"
+      property="og:url"
+      content="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+    />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="&lt;RedSlider /&gt; | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A slider to change the color&#x27;s red channel." />
+    <meta data-rh="true" property="og:description" content="A slider to change the color&#x27;s red channel." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link
+      data-rh="true"
+      rel="canonical"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link menu__link--active"
+                                      aria-current="page"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+                                      >RedSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+                                      >GreenSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+                                      >BlueSlider</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                                ><span itemprop="name">API</span></a
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                                ><span itemprop="name">Sliders</span></a
+                              ><meta itemprop="position" content="2" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item"
+                            >
+                              <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/rgb"
+                                ><span itemprop="name">RGB</span></a
+                              ><meta itemprop="position" content="3" />
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">RedSlider</span
+                              ><meta itemprop="position" content="4" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1><code>&lt;RedSlider /&gt;</code></h1>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="red"
+                              src="data:image/png;base64,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"
+                              width="256"
+                              height="40"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="a-slider-to-change-the-colors-red-channel">
+                                A slider to change the color&#x27;s red channel.<a
+                                  href="#a-slider-to-change-the-colors-red-channel"
+                                  class="hash-link"
+                                  aria-label="Direct link to A slider to change the color&#x27;s red channel."
+                                  title="Direct link to A slider to change the color&#x27;s red channel."
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="props">
+                            Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"
+                              >​</a
+                            >
+                          </h2>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="boundedthumb">
+                            <code>boundedThumb</code
+                            ><a
+                              href="#boundedthumb"
+                              class="hash-link"
+                              aria-label="Direct link to boundedthumb"
+                              title="Direct link to boundedthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            <img
+                              loading="lazy"
+                              alt="boundedThumb"
+                              src="data:image/png;base64,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"
+                              width="180"
+                              height="130"
+                              class="img_ev3q"
+                            />
+                          </p>
+                          <ul>
+                            <li>
+                              Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries
+                              of the slider.
+                            </li>
+                            <li>
+                              When set to <code>true</code>, the thumb will not be allowed to move beyond the edges of the slider.
+                            </li>
+                            <li>When set to <code>false</code>, part of it will be outside of the slider bounds.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbsize">
+                            <code>thumbSize</code
+                            ><a
+                              href="#thumbsize"
+                              class="hash-link"
+                              aria-label="Direct link to thumbsize"
+                              title="Direct link to thumbsize"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The size of the slider&#x27;s thumb.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 35</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbcolor">
+                            <code>thumbColor</code
+                            ><a
+                              href="#thumbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to thumbcolor"
+                              title="Direct link to thumbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The color of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: interactive*</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              ><strong>*interactive</strong>
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  The color of the thumb will be adjusted according to the contrast ratio, in the absence of a
+                                  specific color value.
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sliderthickness">
+                            <code>sliderThickness</code
+                            ><a
+                              href="#sliderthickness"
+                              class="hash-link"
+                              aria-label="Direct link to sliderthickness"
+                              title="Direct link to sliderthickness"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              The thickness is the <code>width</code> of the slider in <code>vertical</code> mode or the
+                              <code>height</code> in <code>horizontal</code> mode.
+                            </li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 25</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbshape">
+                            <code>thumbShape</code
+                            ><a
+                              href="#thumbshape"
+                              class="hash-link"
+                              aria-label="Direct link to thumbshape"
+                              title="Direct link to thumbshape"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The shape and appearance of the slider&#x27;s thumb.</li>
+                            <li><code>type: string</code></li>
+                            <li><code>default: &#x27;ring&#x27;</code></li>
+                            <li>
+                              <code>values:</code
+                              ><code
+                                >&#x27;ring&#x27; | &#x27;solid&#x27; | &#x27;hollow&#x27; | &#x27;line&#x27; | &#x27;plus&#x27; |
+                                &#x27;pill&#x27; | &#x27;triangleUp&#x27; | &#x27;triangleDown&#x27; | &#x27;doubleTriangle&#x27;
+                                | &#x27;rect&#x27; | &#x27;circle&#x27;</code
+                              >
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbstyle">
+                            <code>thumbStyle</code
+                            ><a
+                              href="#thumbstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbstyle"
+                              title="Direct link to thumbstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s containing View&#x27;s style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbinnerstyle">
+                            <code>thumbInnerStyle</code
+                            ><a
+                              href="#thumbinnerstyle"
+                              class="hash-link"
+                              aria-label="Direct link to thumbinnerstyle"
+                              title="Direct link to thumbinnerstyle"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Thumb&#x27;s inner View(s) style.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationvalue">
+                            <code>thumbScaleAnimationValue</code
+                            ><a
+                              href="#thumbscaleanimationvalue"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationvalue"
+                              title="Direct link to thumbscaleanimationvalue"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Controls the scale value animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 1.2</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="thumbscaleanimationduration">
+                            <code>thumbScaleAnimationDuration</code
+                            ><a
+                              href="#thumbscaleanimationduration"
+                              class="hash-link"
+                              aria-label="Direct link to thumbscaleanimationduration"
+                              title="Direct link to thumbscaleanimationduration"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Sets the duration of the scale animation of the thumb when active.</li>
+                            <li><code>type: number</code></li>
+                            <li><code>default: 100</code></li>
+                          </ul>
+                          <!-- -->
+                          <!-- -->
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="renderthumb">
+                            <code>renderThumb</code
+                            ><a
+                              href="#renderthumb"
+                              class="hash-link"
+                              aria-label="Direct link to renderthumb"
+                              title="Direct link to renderthumb"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Function which receives <code>ThumbProps</code> and returns a custom thumb component.</li>
+                            <li>Overrides <code>thumbShape</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="thumbprops">
+                            <code>ThumbProps</code
+                            ><a
+                              href="#thumbprops"
+                              class="hash-link"
+                              aria-label="Direct link to thumbprops"
+                              title="Direct link to thumbprops"
+                              >​</a
+                            >
+                          </h4>
+                          <table>
+                            <thead>
+                              <tr>
+                                <th style="text-align: center">Prop</th>
+                                <th style="text-align: center">Type</th>
+                                <th style="text-align: left">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td style="text-align: center"><code>positionStyle</code></td>
+                                <td style="text-align: center"><code>StyleProp</code></td>
+                                <td style="text-align: left">
+                                  This style determines the position of the thumb and is a crucial element that should be
+                                  included.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>width</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>height</code></td>
+                                <td style="text-align: center"><code>number</code></td>
+                                <td style="text-align: left">
+                                  Extracted from the <code>thumbSize</code> prop and it&#x27;s important for thumb position
+                                  calculation.
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>adaptiveColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">White or black based on the contrast ratio.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>currentColor</code></td>
+                                <td style="text-align: center"><code>SharedValue&lt;string&gt;</code></td>
+                                <td style="text-align: left">This shared value will update whenever the color changes.</td>
+                              </tr>
+                              <tr>
+                                <td style="text-align: center"><code>initialColor</code></td>
+                                <td style="text-align: center"><code>string</code></td>
+                                <td style="text-align: left">The initial color value as a <code>string</code>.</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                          <ul>
+                            <li>Example Usage:</li>
+                          </ul>
+                          <div
+                            class="language-tsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-tsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Animated</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useAnimatedStyle </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-reanimated&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">MyCustomThumb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> height</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> positionStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> initialColor </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">RenderThumbProps</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> animatedStyle </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useAnimatedStyle</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    borderColor</span><span class="token operator">:</span><span class="token plain"> adaptiveColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    backgroundColor</span><span class="token operator">:</span><span class="token plain"> currentColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">      </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderWidth</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> borderRadius</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width </span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">/</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript number" style="color:rgb(255, 121, 198)">2</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> overflow</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;hidden&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> animatedStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> positionStyle</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token tag" style="color:rgb(255, 121, 198)">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> backgroundColor</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> initialColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> height</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> alignSelf</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;flex-end&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Animated.View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reverse">
+                            <code>reverse</code
+                            ><a
+                              href="#reverse"
+                              class="hash-link"
+                              aria-label="Direct link to reverse"
+                              title="Direct link to reverse"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Reverse the slider direction.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="vertical">
+                            <code>vertical</code
+                            ><a
+                              href="#vertical"
+                              class="hash-link"
+                              aria-label="Direct link to vertical"
+                              title="Direct link to vertical"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>Change the slider orientation.</li>
+                            <li><code>type: boolean</code></li>
+                            <li><code>default: false</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gestures">
+                            <code>gestures</code
+                            ><a
+                              href="#gestures"
+                              class="hash-link"
+                              aria-label="Direct link to gestures"
+                              title="Direct link to gestures"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>An array of gestures or composed gestures from <code>react-native-gesture-handler</code>.</li>
+                            <li>These gestures will run simultaneously with the color picker gestures.</li>
+                            <li><code>type: Gesture[]</code></li>
+                            <li><code>default: []</code></li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="style">
+                            <code>style</code
+                            ><a href="#style" class="hash-link" aria-label="Direct link to style" title="Direct link to style"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>The style of the slider&#x27;s container.</li>
+                            <li><code>type: ViewStyle</code></li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>Certain style properties will be overridden.</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/category/rgb"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">RGB</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">GreenSlider</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#a-slider-to-change-the-colors-red-channel" class="table-of-contents__link toc-highlight"
+                            >A slider to change the color&#39;s red channel.</a
+                          >
+                        </li>
+                        <li><a href="#props" class="table-of-contents__link toc-highlight">Props</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/ColorKit/index.html b/docs/build/docs/ColorKit/index.html
index 38fe580..a9f377c 100644
--- a/docs/build/docs/ColorKit/index.html
+++ b/docs/build/docs/ColorKit/index.html
@@ -1,277 +1,2754 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-ColorKit" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">ColorKit | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="ColorKit | Reanimated Color Picker"><meta data-rh="true" name="description" content="colorKit is a collection of color tools that are utilized internally within the ColorPicker."><meta data-rh="true" property="og:description" content="colorKit is a collection of color tools that are utilized internally within the ColorPicker."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"ColorKit","item":"https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Expand sidebar category &#x27;API&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">ColorKit</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>ColorKit</h1></header><p><code>colorKit</code> is a collection of color tools that are utilized internally within the <code>ColorPicker</code>.</p>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="supported-colors">Supported Colors<a href="#supported-colors" class="hash-link" aria-label="Direct link to Supported Colors" title="Direct link to Supported Colors">​</a></h2>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="rbg">RBG<a href="#rbg" class="hash-link" aria-label="Direct link to RBG" title="Direct link to RBG">​</a></h4>
-<ul>
-<li><code>&#x27;rgb(255, 0, 255)&#x27;</code></li>
-<li><code>&#x27;rgb(255 0 255)&#x27;</code></li>
-<li><code>&#x27;rgba(255, 0, 255, 1.0)&#x27;</code></li>
-<li><code>&#x27;rgb(255, 0, 255, 1.0)&#x27;</code></li>
-<li><code>&#x27;rgba(255 0 255 / 1.0)&#x27;</code></li>
-<li><code>&#x27;rgb(255 0 255 / 1.0)&#x27;</code></li>
-<li><code>{r: number, g: number, b: number, a: number}</code></li>
-<li><code>{r: number, g: number, b: number}</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="hex">HEX<a href="#hex" class="hash-link" aria-label="Direct link to HEX" title="Direct link to HEX">​</a></h4>
-<ul>
-<li><code>&#x27;#f0f&#x27;</code> (#rgb)</li>
-<li><code>&#x27;#ff00ff&#x27;</code> (#rrggbb)</li>
-<li><code>&#x27;#f0ff</code>&#x27; (#rgba)</li>
-<li><code>&#x27;#ff00ff00&#x27;</code> (#rrggbbaa)</li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="hsl">HSL<a href="#hsl" class="hash-link" aria-label="Direct link to HSL" title="Direct link to HSL">​</a></h4>
-<ul>
-<li><code>&#x27;hsl(360, 100%, 100%)&#x27;</code></li>
-<li><code>&#x27;hsl(360deg, 100%, 100%)&#x27;</code></li>
-<li><code>&#x27;hsl(360 100% 100%)&#x27;</code></li>
-<li><code>&#x27;hsl(360deg 100% 100%)&#x27;</code></li>
-<li><code>&#x27;hsla(360, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsl(360, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsla(360deg, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsl(360deg, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsla(360 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hsl(360 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hsla(360deg 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hsl(360deg 100% 100% / 1.0)&#x27;</code></li>
-<li><code>{h: number, s: number, l: number}</code></li>
-<li><code>{h: number, s: number, l: number, a: number}</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="hsv">HSV<a href="#hsv" class="hash-link" aria-label="Direct link to HSV" title="Direct link to HSV">​</a></h4>
-<ul>
-<li><code>&#x27;hsv(360, 100%, 100%)&#x27;</code></li>
-<li><code>&#x27;hsv(360deg, 100%, 100%)&#x27;</code></li>
-<li><code>&#x27;hsv(360 100% 100%)&#x27;</code></li>
-<li><code>&#x27;hsv(360deg 100% 100%)&#x27;</code></li>
-<li><code>&#x27;hsva(360, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsv(360, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsva(360deg, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsv(360deg, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hsva(360 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hsv(360 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hsva(360deg 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hsv(360deg 100% 100% / 1.0)&#x27;</code></li>
-<li><code>{h: number, s: number, v: number}</code></li>
-<li><code>{h: number, s: number, v: number, a: number}</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="hwb">HWB<a href="#hwb" class="hash-link" aria-label="Direct link to HWB" title="Direct link to HWB">​</a></h4>
-<ul>
-<li><code>&#x27;hwb(360, 100%, 100%)&#x27;</code></li>
-<li><code>&#x27;hwb(360deg, 100%, 100%)&#x27;</code></li>
-<li><code>&#x27;hwb(360 100% 100%)&#x27;</code></li>
-<li><code>&#x27;hwb(360deg 100% 100%)&#x27;</code></li>
-<li><code>&#x27;hwba(360, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hwb(360, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hwba(360deg, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hwb(360deg, 100%, 100%, 1.0)&#x27;</code></li>
-<li><code>&#x27;hwba(360 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hwb(360 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hwba(360deg 100% 100% / 1.0)&#x27;</code></li>
-<li><code>&#x27;hwb(360deg 100% 100% / 1.0)&#x27;</code></li>
-<li><code>{h: number, w: number, b: number}</code></li>
-<li><code>{h: number, w: number, b: number, a: number}</code></li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="color-ints">Color ints<a href="#color-ints" class="hash-link" aria-label="Direct link to Color ints" title="Direct link to Color ints">​</a></h4>
-<ul>
-<li><code>0xff00ffff</code> (0xrrggbbaa)</li>
-</ul>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="color-keywords">Color keywords<a href="#color-keywords" class="hash-link" aria-label="Direct link to Color keywords" title="Direct link to Color keywords">​</a></h4>
-<p>Named colors implementation follows the <a href="https://www.w3.org/TR/css-color-3/#svg-color" target="_blank" rel="noopener noreferrer">CSS3/SVG specification</a>.</p>
-<ul>
-<li>aliceblue (<code>#f0f8ff</code>)</li>
-<li>antiquewhite (<code>#faebd7</code>)</li>
-<li>aqua (<code>#00ffff</code>)</li>
-<li>aquamarine (<code>#7fffd4</code>)</li>
-<li>azure (<code>#f0ffff</code>)</li>
-<li>and more ...</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>HOW TO RUN ON THE UI THREAD</div><div class="admonitionContent_BuS1"><ul>
-<li>To execute any of the <code>colorKit</code> methods, you can use <code>runOnUI</code>. For example:</li>
-</ul><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">workletFunction</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;worklet&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> rgb </span><span class="token operator">=</span><span class="token plain"> colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">runOnUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#f0ff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-conversion">Color Conversion<a href="#color-conversion" class="hash-link" aria-label="Direct link to Color Conversion" title="Direct link to Color Conversion">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="rgb">RGB<a href="#rgb" class="hash-link" aria-label="Direct link to RGB" title="Direct link to RGB">​</a></h3>
-<p>Convert any of the <a href="#supported-colors">supported color</a> formats into the <code>RGB</code> format.</p>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax">Syntax<a href="#syntax" class="hash-link" aria-label="Direct link to Syntax" title="Direct link to Syntax">​</a></h4>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceRGBA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(360, 100%, 100%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb(255, 255, 255)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(360, 100%, 100%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgba(255, 255, 255, 1) force rbga</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#f0ff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { r: 255, g: 0, b: 255, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">50</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [128, 0, 0, 1]</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="hex-1">HEX<a href="#hex-1" class="hash-link" aria-label="Direct link to HEX" title="Direct link to HEX">​</a></h3>
-<p>Convert any of the <a href="#supported-colors">supported color</a> formats into the <code>HEX</code> format.</p>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-1">Syntax<a href="#syntax-1" class="hash-link" aria-label="Direct link to Syntax" title="Direct link to Syntax">​</a></h4>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-1">Example<a href="#example-1" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">//  #ff0000</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsv(360, 10%, 100%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ffe6e6</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(25, 255, 255, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #19ffff</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">50</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff0000</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="hsl-1">HSL<a href="#hsl-1" class="hash-link" aria-label="Direct link to HSL" title="Direct link to HSL">​</a></h3>
-<p>Convert any of the <a href="#supported-colors">supported color</a> formats into the <code>HSL</code> format.</p>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-2">Syntax<a href="#syntax-2" class="hash-link" aria-label="Direct link to Syntax" title="Direct link to Syntax">​</a></h4>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceHSLA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-2">Example<a href="#example-2" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl(39, 100%, 50%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#503e7a&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsla(258, 33%, 36%, 1)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(114, 99, 29)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 49, s: 59, l: 28, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">336</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">44</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [336, 28, 22, 1]</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="hsv-1">HSV<a href="#hsv-1" class="hash-link" aria-label="Direct link to HSV" title="Direct link to HSV">​</a></h3>
-<p>Convert any of the <a href="#supported-colors">supported color</a> formats into the <code>HSV</code> format.</p>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-3">Syntax<a href="#syntax-3" class="hash-link" aria-label="Direct link to Syntax" title="Direct link to Syntax">​</a></h4>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceHSVA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-3">Example<a href="#example-3" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsva(258, 49%, 48%, 1)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#503e7a&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv(258, 49%, 48%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(114, 99, 29)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 49, s: 75, l: 45, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">336</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">44</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [336, 44, 28, 1]</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="hwb-1">HWB<a href="#hwb-1" class="hash-link" aria-label="Direct link to HWB" title="Direct link to HWB">​</a></h3>
-<p>Convert any of the <a href="#supported-colors">supported color</a> formats into the <code>HWB</code> format.</p>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-4">Syntax<a href="#syntax-4" class="hash-link" aria-label="Direct link to Syntax" title="Direct link to Syntax">​</a></h4>
-<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceHWBA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-4">Example<a href="#example-4" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example">​</a></h4>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwb(39, 0%, 0%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#503e7a&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwba(258, 24%, 52%, 1)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(114, 99, 29)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 49, w: 12, l: 55, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">336</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">44</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [336, 16, 72, 1]</span><br></span></code></pre></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-information">Color Information<a href="#color-information" class="hash-link" aria-label="Direct link to Color Information" title="Direct link to Color Information">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getformat"><code>getFormat</code><a href="#getformat" class="hash-link" aria-label="Direct link to getformat" title="Direct link to getformat">​</a></h3>
-<p>Identify the color format of a given <code>string</code> or <code>object</code>, and return <code>null</code> for invalid colors.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// named</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(211, 168, 151)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(211, 168, 151, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">211</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">168</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">151</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">211</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">168</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">151</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(224, 77%, 28%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsla(224, 77%, 28%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsla</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">224</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">77</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">224</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">77</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsla</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsva(289, 99%, 40%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsv(289, 99%, 40%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsva</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsva</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hwba(289, 99%, 40%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hwb(289, 99%, 40%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#fff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hex3</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#ffff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hex4</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#ffffffff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hex8</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(211, 168, 151, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// null (should be &#x27;rgba(211, 168, 151, 1)&#x27;)</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getred"><code>getRed</code><a href="#getred" class="hash-link" aria-label="Direct link to getred" title="Direct link to getred">​</a></h3>
-<p>Get the <code>red</code> channel value of a given color.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 255</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getgreen"><code>getGreen</code><a href="#getgreen" class="hash-link" aria-label="Direct link to getgreen" title="Direct link to getgreen">​</a></h3>
-<p>Get the <code>green</code> channel value of a given color.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(0, 200, 0)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 200</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getblue"><code>getBlue</code><a href="#getblue" class="hash-link" aria-label="Direct link to getblue" title="Direct link to getblue">​</a></h3>
-<p>Get the <code>green</code> channel value of a given color.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(200, 60%, 50%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 204</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="gethue"><code>getHue</code><a href="#gethue" class="hash-link" aria-label="Direct link to gethue" title="Direct link to gethue">​</a></h3>
-<p>Get the <code>hue</code> channel value of a given color.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#87c270&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 103</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getluminance"><code>getLuminance</code><a href="#getluminance" class="hash-link" aria-label="Direct link to getluminance" title="Direct link to getluminance">​</a></h3>
-<p>Get color&#x27;s HSL <code>luminosity</code> channel value.</p>
-<p>If you want the overall <code>luminosity</code> of a color use <a href="#getluminancewcag"><code>getLuminanceWCAG</code></a> method.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getLuminance</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">67</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">59</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">79</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 27</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getbrightness"><code>getBrightness</code><a href="#getbrightness" class="hash-link" aria-label="Direct link to getbrightness" title="Direct link to getbrightness">​</a></h3>
-<p>Get the HSV&#x27;s <code>value</code> (brightness) channel value of a given color.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">127</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">36</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">8</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 11</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getalpha"><code>getAlpha</code><a href="#getalpha" class="hash-link" aria-label="Direct link to getalpha" title="Direct link to getalpha">​</a></h3>
-<p>Get the <code>alpha</code> channel value of a given color.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getAlpha</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d2c765c7&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 0.78</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="getluminancewcag"><code>getLuminanceWCAG</code><a href="#getluminancewcag" class="hash-link" aria-label="Direct link to getluminancewcag" title="Direct link to getluminancewcag">​</a></h3>
-<p>Returns the perceived <code>luminance</code> of the given color, from <code>0-1</code> as defined by <a href="https://www.w3.org/TR/WCAG20/" target="_blank" rel="noopener noreferrer">Web Content Accessibility Guidelines (Version 2.0)</a>.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getLuminanceWCAG</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(176, 7, 120, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 0.10738130030129947</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="arecolorsequal"><code>areColorsEqual</code><a href="#arecolorsequal" class="hash-link" aria-label="Direct link to arecolorsequal" title="Direct link to arecolorsequal">​</a></h3>
-<p>Check if two colors are similar within a specified tolerance.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> tolerance </span><span class="token operator">=</span><span class="token plain"> </span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> isEqual </span><span class="token operator">=</span><span class="token plain"> colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">areColorsEqual</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#F00&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> tolerance</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// true</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="contrastratio"><code>contrastRatio</code><a href="#contrastratio" class="hash-link" aria-label="Direct link to contrastratio" title="Direct link to contrastratio">​</a></h3>
-<p>Calculates the contrast ratio between two colors, useful for ensuring accessibility and readability.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">contrastRatio</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;yellow&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(40, 38, 43, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 13.95</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="isdark"><code>isDark</code><a href="#isdark" class="hash-link" aria-label="Direct link to isdark" title="Direct link to isdark">​</a></h3>
-<p>Returns a boolean indicating whether the color is considered &quot;dark&quot; or not.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">isDark</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsla(224, 77%, 28%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// true</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="islight"><code>isLight</code><a href="#islight" class="hash-link" aria-label="Direct link to islight" title="Direct link to islight">​</a></h3>
-<p>Returns a boolean indicating whether the color is considered &quot;light&quot; or not.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">isLight</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsla(224, 77%, 28%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// false</span><br></span></code></pre></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-manipulation">Color Manipulation<a href="#color-manipulation" class="hash-link" aria-label="Direct link to Color Manipulation" title="Direct link to Color Manipulation">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setred"><code>setRed</code><a href="#setred" class="hash-link" aria-label="Direct link to setred" title="Direct link to setred">​</a></h3>
-<p>Set the <code>red</code> value of a color to a specific amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">150</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #c8a2a1</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">rgb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb(200, 162, 161)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">rgb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { r: 200, g: 162, b: 161, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">rgb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [200, 162, 161, 1]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsl</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl(2, 26%, 71%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsl</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 2, s: 26, l: 71, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsl</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [2, 26, 71, 1]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv(2, 20%, 78%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 2, s: 20, l: 78, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [2, 20, 78, 1]</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasered"><code>increaseRed</code><a href="#increasered" class="hash-link" aria-label="Direct link to increasered" title="Direct link to increasered">​</a></h3>
-<p>Increase the <code>red</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ed661b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff661b</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasered"><code>decreaseRed</code><a href="#decreasered" class="hash-link" aria-label="Direct link to decreasered" title="Direct link to decreasered">​</a></h3>
-<p>Decrease the <code>red</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #89661b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5e661b</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setgreen"><code>setGreen</code><a href="#setgreen" class="hash-link" aria-label="Direct link to setgreen" title="Direct link to setgreen">​</a></h3>
-<p>Set the <code>green</code> value of a color to a specific amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d732d0</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasegreen"><code>increaseGreen</code><a href="#increasegreen" class="hash-link" aria-label="Direct link to increasegreen" title="Direct link to increasegreen">​</a></h3>
-<p>Increase the <code>green</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7ffd0</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;10%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7f9d0</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasegreen"><code>decreaseGreen</code><a href="#decreasegreen" class="hash-link" aria-label="Direct link to decreasegreen" title="Direct link to decreasegreen">​</a></h3>
-<p>Decrease the <code>green</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7b0d0</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;10%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7cbd0</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setblue"><code>setBlue</code><a href="#setblue" class="hash-link" aria-label="Direct link to setblue" title="Direct link to setblue">​</a></h3>
-<p>Set the <code>blue</code> value of a color to a specific amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d3292</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="increaseblue"><code>increaseBlue</code><a href="#increaseblue" class="hash-link" aria-label="Direct link to increaseblue" title="Direct link to increaseblue">​</a></h3>
-<p>Increase the <code>blue</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8ec4</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8edb</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreaseblue"><code>decreaseBlue</code><a href="#decreaseblue" class="hash-link" aria-label="Direct link to decreaseblue" title="Direct link to decreaseblue">​</a></h3>
-<p>Decrease the <code>blue</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8e60</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8e49</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sethue"><code>setHue</code><a href="#sethue" class="hash-link" aria-label="Direct link to sethue" title="Direct link to sethue">​</a></h3>
-<p>Set the <code>hue</code> value of a color to a specific amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #51481a</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasehue"><code>increaseHue</code><a href="#increasehue" class="hash-link" aria-label="Direct link to increasehue" title="Direct link to increasehue">​</a></h3>
-<p>Increase the <code>Hue</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #511a48</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #511a1a</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasehue"><code>decreaseHue</code><a href="#decreasehue" class="hash-link" aria-label="Direct link to decreasehue" title="Direct link to decreasehue">​</a></h3>
-<p>Decrease the <code>Hue</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1a3651</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1a5123</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="spin"><code>spin</code><a href="#spin" class="hash-link" aria-label="Direct link to spin" title="Direct link to spin">​</a></h3>
-<p>Spin the <code>hue</code> channel by a certain percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">spin</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">350</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #231a51</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">spin</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;350%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #40511a</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setsaturation"><code>setSaturation</code><a href="#setsaturation" class="hash-link" aria-label="Direct link to setsaturation" title="Direct link to setsaturation">​</a></h3>
-<p>Set the <code>saturation</code> value of a color to a specific amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setSaturation</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #750068</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="saturate"><code>saturate</code><a href="#saturate" class="hash-link" aria-label="Direct link to saturate" title="Direct link to saturate">​</a></h3>
-<p>Increase the <code>saturation</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">saturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #65105b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">saturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #4e2749</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="desaturate"><code>desaturate</code><a href="#desaturate" class="hash-link" aria-label="Direct link to desaturate" title="Direct link to desaturate">​</a></h3>
-<p>Decrease the <code>saturation</code> value of a color by the given percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">desaturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #3b3b3b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">desaturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #413440</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setluminance"><code>setLuminance</code><a href="#setluminance" class="hash-link" aria-label="Direct link to setluminance" title="Direct link to setluminance">​</a></h3>
-<p>Set HSL&#x27;s <code>luminosity</code> channel for a given color to a specific amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setLuminance</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1313ec</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="brighten"><code>brighten</code><a href="#brighten" class="hash-link" aria-label="Direct link to brighten" title="Direct link to brighten">​</a></h3>
-<p>Increase the <code>brightness</code> of the given color by a certain percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">brighten</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ffffff</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">brighten</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;5%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #f1f1fe</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="darken"><code>darken</code><a href="#darken" class="hash-link" aria-label="Direct link to darken" title="Direct link to darken">​</a></h3>
-<p>Decrease the <code>brightness</code> of the given color by a certain percentage/amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">darken</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1010c6</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">darken</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1212d9</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setbrightness"><code>setBrightness</code><a href="#setbrightness" class="hash-link" aria-label="Direct link to setbrightness" title="Direct link to setbrightness">​</a></h3>
-<p>Set HSV&#x27;s <code>value</code> (brightness) channel for a given color to a specific amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #6f6f80</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasebrightness"><code>increaseBrightness</code><a href="#increasebrightness" class="hash-link" aria-label="Direct link to increasebrightness" title="Direct link to increasebrightness">​</a></h3>
-<p>Increase HSV&#x27;s <code>value</code> (brightness) channel value of a color by the given percentage/amount</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #dedeff</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;5%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #dedeff</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasebrightness"><code>decreaseBrightness</code><a href="#decreasebrightness" class="hash-link" aria-label="Direct link to decreasebrightness" title="Direct link to decreasebrightness">​</a></h3>
-<p>Decrease HSV&#x27;s <code>value</code> (brightness) channel value of a color by the given percentage/amount</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #6d6d7d</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #6f6f80</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setalpha"><code>setAlpha</code><a href="#setalpha" class="hash-link" aria-label="Direct link to setalpha" title="Direct link to setalpha">​</a></h3>
-<p>Set the <code>alpha</code> value of a color to a specific amount.</p>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasealpha"><code>increaseAlpha</code><a href="#increasealpha" class="hash-link" aria-label="Direct link to increasealpha" title="Direct link to increasealpha">​</a></h3>
-<p>Increase the <code>alpha</code> value of a color by the given percentage/amount.</p>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasealpha"><code>decreaseAlpha</code><a href="#decreasealpha" class="hash-link" aria-label="Direct link to decreasealpha" title="Direct link to decreasealpha">​</a></h3>
-<p>Decrease the <code>alpha</code> value of a color by the given percentage/amount.</p>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-utilities">Color Utilities<a href="#color-utilities" class="hash-link" aria-label="Direct link to Color Utilities" title="Direct link to Color Utilities">​</a></h2>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="blend"><code>blend</code><a href="#blend" class="hash-link" aria-label="Direct link to blend" title="Direct link to blend">​</a></h3>
-<p>Blends two colors by a certain amount.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">blend</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;yellow&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff8000</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="invert"><code>invert</code><a href="#invert" class="hash-link" aria-label="Direct link to invert" title="Direct link to invert">​</a></h3>
-<p>Invert (negate) a color, black becomes white, white becomes black, blue becomes orange and so on.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">invert</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#000&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ffffff</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="grayscale"><code>grayscale</code><a href="#grayscale" class="hash-link" aria-label="Direct link to grayscale" title="Direct link to grayscale">​</a></h3>
-<p>Completely desaturates a color into greyscale.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">grayscale</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#172140&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #212121</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="adjustcontrast"><code>adjustContrast</code><a href="#adjustcontrast" class="hash-link" aria-label="Direct link to adjustcontrast" title="Direct link to adjustcontrast">​</a></h3>
-<p>Returns the first color (text color) with the desired contrast ratio against the second color (background color).</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">adjustContrast</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(50, 50, 50)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#fff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">4.5</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #777777</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomhslcolor"><code>randomHslColor</code><a href="#randomhslcolor" class="hash-link" aria-label="Direct link to randomhslcolor" title="Direct link to randomhslcolor">​</a></h3>
-<p>Generate a random color from <code>HSL</code> values.</p>
-<p>You can provide a range between two values for each channel.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHslColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #b07345</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHslColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d0bfd6</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomhsvcolor"><code>randomHsvColor</code><a href="#randomhsvcolor" class="hash-link" aria-label="Direct link to randomhsvcolor" title="Direct link to randomhsvcolor">​</a></h3>
-<p>Generate a random color from <code>HSV</code> values.</p>
-<p>You can provide a range between two values for each channel.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHsvColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #59078c</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHsvColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #2b553f</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomrgbcolor"><code>randomRgbColor</code><a href="#randomrgbcolor" class="hash-link" aria-label="Direct link to randomrgbcolor" title="Direct link to randomrgbcolor">​</a></h3>
-<p>Generate a random color from <code>rgb</code> values.</p>
-<p>You can provide a range between two values for each channel.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomRgbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff0f0b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomRgbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #b07345</span><br></span></code></pre></div></div>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomhwbcolor"><code>randomHwbColor</code><a href="#randomhwbcolor" class="hash-link" aria-label="Direct link to randomhwbcolor" title="Direct link to randomhwbcolor">​</a></h3>
-<p>Generate a random color from <code>hwb</code> values.</p>
-<p>You can provide a range between two values for each channel.</p>
-<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHwbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff0f0b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHwbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #b07345</span><br></span></code></pre></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">ExtraThumb</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/Examples"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Examples</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#supported-colors" class="table-of-contents__link toc-highlight">Supported Colors</a></li><li><a href="#color-conversion" class="table-of-contents__link toc-highlight">Color Conversion</a><ul><li><a href="#rgb" class="table-of-contents__link toc-highlight">RGB</a></li><li><a href="#hex-1" class="table-of-contents__link toc-highlight">HEX</a></li><li><a href="#hsl-1" class="table-of-contents__link toc-highlight">HSL</a></li><li><a href="#hsv-1" class="table-of-contents__link toc-highlight">HSV</a></li><li><a href="#hwb-1" class="table-of-contents__link toc-highlight">HWB</a></li></ul></li><li><a href="#color-information" class="table-of-contents__link toc-highlight">Color Information</a><ul><li><a href="#getformat" class="table-of-contents__link toc-highlight"><code>getFormat</code></a></li><li><a href="#getred" class="table-of-contents__link toc-highlight"><code>getRed</code></a></li><li><a href="#getgreen" class="table-of-contents__link toc-highlight"><code>getGreen</code></a></li><li><a href="#getblue" class="table-of-contents__link toc-highlight"><code>getBlue</code></a></li><li><a href="#gethue" class="table-of-contents__link toc-highlight"><code>getHue</code></a></li><li><a href="#getluminance" class="table-of-contents__link toc-highlight"><code>getLuminance</code></a></li><li><a href="#getbrightness" class="table-of-contents__link toc-highlight"><code>getBrightness</code></a></li><li><a href="#getalpha" class="table-of-contents__link toc-highlight"><code>getAlpha</code></a></li><li><a href="#getluminancewcag" class="table-of-contents__link toc-highlight"><code>getLuminanceWCAG</code></a></li><li><a href="#arecolorsequal" class="table-of-contents__link toc-highlight"><code>areColorsEqual</code></a></li><li><a href="#contrastratio" class="table-of-contents__link toc-highlight"><code>contrastRatio</code></a></li><li><a href="#isdark" class="table-of-contents__link toc-highlight"><code>isDark</code></a></li><li><a href="#islight" class="table-of-contents__link toc-highlight"><code>isLight</code></a></li></ul></li><li><a href="#color-manipulation" class="table-of-contents__link toc-highlight">Color Manipulation</a><ul><li><a href="#setred" class="table-of-contents__link toc-highlight"><code>setRed</code></a></li><li><a href="#increasered" class="table-of-contents__link toc-highlight"><code>increaseRed</code></a></li><li><a href="#decreasered" class="table-of-contents__link toc-highlight"><code>decreaseRed</code></a></li><li><a href="#setgreen" class="table-of-contents__link toc-highlight"><code>setGreen</code></a></li><li><a href="#increasegreen" class="table-of-contents__link toc-highlight"><code>increaseGreen</code></a></li><li><a href="#decreasegreen" class="table-of-contents__link toc-highlight"><code>decreaseGreen</code></a></li><li><a href="#setblue" class="table-of-contents__link toc-highlight"><code>setBlue</code></a></li><li><a href="#increaseblue" class="table-of-contents__link toc-highlight"><code>increaseBlue</code></a></li><li><a href="#decreaseblue" class="table-of-contents__link toc-highlight"><code>decreaseBlue</code></a></li><li><a href="#sethue" class="table-of-contents__link toc-highlight"><code>setHue</code></a></li><li><a href="#increasehue" class="table-of-contents__link toc-highlight"><code>increaseHue</code></a></li><li><a href="#decreasehue" class="table-of-contents__link toc-highlight"><code>decreaseHue</code></a></li><li><a href="#spin" class="table-of-contents__link toc-highlight"><code>spin</code></a></li><li><a href="#setsaturation" class="table-of-contents__link toc-highlight"><code>setSaturation</code></a></li><li><a href="#saturate" class="table-of-contents__link toc-highlight"><code>saturate</code></a></li><li><a href="#desaturate" class="table-of-contents__link toc-highlight"><code>desaturate</code></a></li><li><a href="#setluminance" class="table-of-contents__link toc-highlight"><code>setLuminance</code></a></li><li><a href="#brighten" class="table-of-contents__link toc-highlight"><code>brighten</code></a></li><li><a href="#darken" class="table-of-contents__link toc-highlight"><code>darken</code></a></li><li><a href="#setbrightness" class="table-of-contents__link toc-highlight"><code>setBrightness</code></a></li><li><a href="#increasebrightness" class="table-of-contents__link toc-highlight"><code>increaseBrightness</code></a></li><li><a href="#decreasebrightness" class="table-of-contents__link toc-highlight"><code>decreaseBrightness</code></a></li><li><a href="#setalpha" class="table-of-contents__link toc-highlight"><code>setAlpha</code></a></li><li><a href="#increasealpha" class="table-of-contents__link toc-highlight"><code>increaseAlpha</code></a></li><li><a href="#decreasealpha" class="table-of-contents__link toc-highlight"><code>decreaseAlpha</code></a></li></ul></li><li><a href="#color-utilities" class="table-of-contents__link toc-highlight">Color Utilities</a><ul><li><a href="#blend" class="table-of-contents__link toc-highlight"><code>blend</code></a></li><li><a href="#invert" class="table-of-contents__link toc-highlight"><code>invert</code></a></li><li><a href="#grayscale" class="table-of-contents__link toc-highlight"><code>grayscale</code></a></li><li><a href="#adjustcontrast" class="table-of-contents__link toc-highlight"><code>adjustContrast</code></a></li><li><a href="#randomhslcolor" class="table-of-contents__link toc-highlight"><code>randomHslColor</code></a></li><li><a href="#randomhsvcolor" class="table-of-contents__link toc-highlight"><code>randomHsvColor</code></a></li><li><a href="#randomrgbcolor" class="table-of-contents__link toc-highlight"><code>randomRgbColor</code></a></li><li><a href="#randomhwbcolor" class="table-of-contents__link toc-highlight"><code>randomHwbColor</code></a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-ColorKit"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">ColorKit | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="ColorKit | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="colorKit is a collection of color tools that are utilized internally within the ColorPicker."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="colorKit is a collection of color tools that are utilized internally within the ColorPicker."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit" />
+    <link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit" hreflang="en" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/ColorKit"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li
+                        class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"
+                      >
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist"
+                            aria-expanded="false"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Expand sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/ColorKit"
+                          >ColorKit</a
+                        >
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">ColorKit</span
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <header><h1>ColorKit</h1></header>
+                          <p>
+                            <code>colorKit</code> is a collection of color tools that are utilized internally within the
+                            <code>ColorPicker</code>.
+                          </p>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="supported-colors">
+                            Supported Colors<a
+                              href="#supported-colors"
+                              class="hash-link"
+                              aria-label="Direct link to Supported Colors"
+                              title="Direct link to Supported Colors"
+                              >​</a
+                            >
+                          </h2>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="rbg">
+                            RBG<a href="#rbg" class="hash-link" aria-label="Direct link to RBG" title="Direct link to RBG">​</a>
+                          </h4>
+                          <ul>
+                            <li><code>&#x27;rgb(255, 0, 255)&#x27;</code></li>
+                            <li><code>&#x27;rgb(255 0 255)&#x27;</code></li>
+                            <li><code>&#x27;rgba(255, 0, 255, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;rgb(255, 0, 255, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;rgba(255 0 255 / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;rgb(255 0 255 / 1.0)&#x27;</code></li>
+                            <li><code>{r: number, g: number, b: number, a: number}</code></li>
+                            <li><code>{r: number, g: number, b: number}</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="hex">
+                            HEX<a href="#hex" class="hash-link" aria-label="Direct link to HEX" title="Direct link to HEX">​</a>
+                          </h4>
+                          <ul>
+                            <li><code>&#x27;#f0f&#x27;</code> (#rgb)</li>
+                            <li><code>&#x27;#ff00ff&#x27;</code> (#rrggbb)</li>
+                            <li><code>&#x27;#f0ff</code>&#x27; (#rgba)</li>
+                            <li><code>&#x27;#ff00ff00&#x27;</code> (#rrggbbaa)</li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="hsl">
+                            HSL<a href="#hsl" class="hash-link" aria-label="Direct link to HSL" title="Direct link to HSL">​</a>
+                          </h4>
+                          <ul>
+                            <li><code>&#x27;hsl(360, 100%, 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsl(360deg, 100%, 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsl(360 100% 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsl(360deg 100% 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsla(360, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsl(360, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsla(360deg, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsl(360deg, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsla(360 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsl(360 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsla(360deg 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsl(360deg 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>{h: number, s: number, l: number}</code></li>
+                            <li><code>{h: number, s: number, l: number, a: number}</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="hsv">
+                            HSV<a href="#hsv" class="hash-link" aria-label="Direct link to HSV" title="Direct link to HSV">​</a>
+                          </h4>
+                          <ul>
+                            <li><code>&#x27;hsv(360, 100%, 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsv(360deg, 100%, 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsv(360 100% 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsv(360deg 100% 100%)&#x27;</code></li>
+                            <li><code>&#x27;hsva(360, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsv(360, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsva(360deg, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsv(360deg, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsva(360 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsv(360 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsva(360deg 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hsv(360deg 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>{h: number, s: number, v: number}</code></li>
+                            <li><code>{h: number, s: number, v: number, a: number}</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="hwb">
+                            HWB<a href="#hwb" class="hash-link" aria-label="Direct link to HWB" title="Direct link to HWB">​</a>
+                          </h4>
+                          <ul>
+                            <li><code>&#x27;hwb(360, 100%, 100%)&#x27;</code></li>
+                            <li><code>&#x27;hwb(360deg, 100%, 100%)&#x27;</code></li>
+                            <li><code>&#x27;hwb(360 100% 100%)&#x27;</code></li>
+                            <li><code>&#x27;hwb(360deg 100% 100%)&#x27;</code></li>
+                            <li><code>&#x27;hwba(360, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hwb(360, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hwba(360deg, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hwb(360deg, 100%, 100%, 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hwba(360 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hwb(360 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hwba(360deg 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>&#x27;hwb(360deg 100% 100% / 1.0)&#x27;</code></li>
+                            <li><code>{h: number, w: number, b: number}</code></li>
+                            <li><code>{h: number, w: number, b: number, a: number}</code></li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="color-ints">
+                            Color ints<a
+                              href="#color-ints"
+                              class="hash-link"
+                              aria-label="Direct link to Color ints"
+                              title="Direct link to Color ints"
+                              >​</a
+                            >
+                          </h4>
+                          <ul>
+                            <li><code>0xff00ffff</code> (0xrrggbbaa)</li>
+                          </ul>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="color-keywords">
+                            Color keywords<a
+                              href="#color-keywords"
+                              class="hash-link"
+                              aria-label="Direct link to Color keywords"
+                              title="Direct link to Color keywords"
+                              >​</a
+                            >
+                          </h4>
+                          <p>
+                            Named colors implementation follows the
+                            <a href="https://www.w3.org/TR/css-color-3/#svg-color" target="_blank" rel="noopener noreferrer"
+                              >CSS3/SVG specification</a
+                            >.
+                          </p>
+                          <ul>
+                            <li>aliceblue (<code>#f0f8ff</code>)</li>
+                            <li>antiquewhite (<code>#faebd7</code>)</li>
+                            <li>aqua (<code>#00ffff</code>)</li>
+                            <li>aquamarine (<code>#7fffd4</code>)</li>
+                            <li>azure (<code>#f0ffff</code>)</li>
+                            <li>and more ...</li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >HOW TO RUN ON THE UI THREAD
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <ul>
+                                <li>
+                                  To execute any of the <code>colorKit</code> methods, you can use <code>runOnUI</code>. For
+                                  example:
+                                </li>
+                              </ul>
+                              <div
+                                class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                                style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                              >
+                                <div class="codeBlockContent_biex">
+                                  <pre
+                                    tabindex="0"
+                                    class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                    style="color: #f8f8f2; background-color: #282a36"
+                                  ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">workletFunction</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;worklet&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> rgb </span><span class="token operator">=</span><span class="token plain"> colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">runOnUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#f0ff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre>
+                                  <div class="buttonGroup__atx">
+                                    <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                      <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                        ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                          <path
+                                            fill="currentColor"
+                                            d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                          ></path></svg
+                                        ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                          <path
+                                            fill="currentColor"
+                                            d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                          ></path></svg
+                                      ></span>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-conversion">
+                            Color Conversion<a
+                              href="#color-conversion"
+                              class="hash-link"
+                              aria-label="Direct link to Color Conversion"
+                              title="Direct link to Color Conversion"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="rgb">
+                            RGB<a href="#rgb" class="hash-link" aria-label="Direct link to RGB" title="Direct link to RGB">​</a>
+                          </h3>
+                          <p>
+                            Convert any of the <a href="#supported-colors">supported color</a> formats into the
+                            <code>RGB</code> format.
+                          </p>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax">
+                            Syntax<a
+                              href="#syntax"
+                              class="hash-link"
+                              aria-label="Direct link to Syntax"
+                              title="Direct link to Syntax"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-ts codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-ts codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceRGBA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example">
+                            Example<a
+                              href="#example"
+                              class="hash-link"
+                              aria-label="Direct link to Example"
+                              title="Direct link to Example"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(360, 100%, 100%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb(255, 255, 255)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(360, 100%, 100%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgba(255, 255, 255, 1) force rbga</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#f0ff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { r: 255, g: 0, b: 255, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">RGB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">50</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [128, 0, 0, 1]</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="hex-1">
+                            HEX<a href="#hex-1" class="hash-link" aria-label="Direct link to HEX" title="Direct link to HEX">​</a>
+                          </h3>
+                          <p>
+                            Convert any of the <a href="#supported-colors">supported color</a> formats into the
+                            <code>HEX</code> format.
+                          </p>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-1">
+                            Syntax<a
+                              href="#syntax-1"
+                              class="hash-link"
+                              aria-label="Direct link to Syntax"
+                              title="Direct link to Syntax"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-ts codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-ts codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-1">
+                            Example<a
+                              href="#example-1"
+                              class="hash-link"
+                              aria-label="Direct link to Example"
+                              title="Direct link to Example"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">//  #ff0000</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsv(360, 10%, 100%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ffe6e6</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(25, 255, 255, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #19ffff</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HEX</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">50</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff0000</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="hsl-1">
+                            HSL<a href="#hsl-1" class="hash-link" aria-label="Direct link to HSL" title="Direct link to HSL">​</a>
+                          </h3>
+                          <p>
+                            Convert any of the <a href="#supported-colors">supported color</a> formats into the
+                            <code>HSL</code> format.
+                          </p>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-2">
+                            Syntax<a
+                              href="#syntax-2"
+                              class="hash-link"
+                              aria-label="Direct link to Syntax"
+                              title="Direct link to Syntax"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-ts codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-ts codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceHSLA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-2">
+                            Example<a
+                              href="#example-2"
+                              class="hash-link"
+                              aria-label="Direct link to Example"
+                              title="Direct link to Example"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl(39, 100%, 50%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#503e7a&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsla(258, 33%, 36%, 1)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(114, 99, 29)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 49, s: 59, l: 28, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSL</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">336</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">44</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [336, 28, 22, 1]</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="hsv-1">
+                            HSV<a href="#hsv-1" class="hash-link" aria-label="Direct link to HSV" title="Direct link to HSV">​</a>
+                          </h3>
+                          <p>
+                            Convert any of the <a href="#supported-colors">supported color</a> formats into the
+                            <code>HSV</code> format.
+                          </p>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-3">
+                            Syntax<a
+                              href="#syntax-3"
+                              class="hash-link"
+                              aria-label="Direct link to Syntax"
+                              title="Direct link to Syntax"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-ts codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-ts codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceHSVA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-3">
+                            Example<a
+                              href="#example-3"
+                              class="hash-link"
+                              aria-label="Direct link to Example"
+                              title="Direct link to Example"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsva(258, 49%, 48%, 1)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#503e7a&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv(258, 49%, 48%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(114, 99, 29)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 49, s: 75, l: 45, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HSV</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">336</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">44</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [336, 44, 28, 1]</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="hwb-1">
+                            HWB<a href="#hwb-1" class="hash-link" aria-label="Direct link to HWB" title="Direct link to HWB">​</a>
+                          </h3>
+                          <p>
+                            Convert any of the <a href="#supported-colors">supported color</a> formats into the
+                            <code>HWB</code> format.
+                          </p>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="syntax-4">
+                            Syntax<a
+                              href="#syntax-4"
+                              class="hash-link"
+                              aria-label="Direct link to Syntax"
+                              title="Direct link to Syntax"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-ts codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-ts codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">forceHWBA </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">color</span><span class="token operator">:</span><span class="token plain"> SupportedColorFormats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">roundValues </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">number</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-4">
+                            Example<a
+                              href="#example-4"
+                              class="hash-link"
+                              aria-label="Direct link to Example"
+                              title="Direct link to Example"
+                              >​</a
+                            >
+                          </h4>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> colorKit </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwb(39, 0%, 0%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#503e7a&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwba(258, 24%, 52%, 1)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(114, 99, 29)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 49, w: 12, l: 55, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">HWB</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">336</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">44</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [336, 16, 72, 1]</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-information">
+                            Color Information<a
+                              href="#color-information"
+                              class="hash-link"
+                              aria-label="Direct link to Color Information"
+                              title="Direct link to Color Information"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getformat">
+                            <code>getFormat</code
+                            ><a
+                              href="#getformat"
+                              class="hash-link"
+                              aria-label="Direct link to getformat"
+                              title="Direct link to getformat"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            Identify the color format of a given <code>string</code> or <code>object</code>, and return
+                            <code>null</code> for invalid colors.
+                          </p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;orange&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// named</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(211, 168, 151)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(211, 168, 151, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">211</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">168</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">151</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">211</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">168</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">151</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(224, 77%, 28%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsla(224, 77%, 28%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsla</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">224</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">77</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">224</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">77</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">28</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsla</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsva(289, 99%, 40%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsv(289, 99%, 40%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsva</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsva</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hwba(289, 99%, 40%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hwb(289, 99%, 40%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwb</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">289</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">40</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hwba</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#fff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hex3</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#ffff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hex4</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#ffffffff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hex8</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getFormat</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(211, 168, 151, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// null (should be &#x27;rgba(211, 168, 151, 1)&#x27;)</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getred">
+                            <code>getRed</code
+                            ><a href="#getred" class="hash-link" aria-label="Direct link to getred" title="Direct link to getred"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Get the <code>red</code> channel value of a given color.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 255</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getgreen">
+                            <code>getGreen</code
+                            ><a
+                              href="#getgreen"
+                              class="hash-link"
+                              aria-label="Direct link to getgreen"
+                              title="Direct link to getgreen"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Get the <code>green</code> channel value of a given color.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(0, 200, 0)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 200</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getblue">
+                            <code>getBlue</code
+                            ><a
+                              href="#getblue"
+                              class="hash-link"
+                              aria-label="Direct link to getblue"
+                              title="Direct link to getblue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Get the <code>green</code> channel value of a given color.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsl(200, 60%, 50%)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 204</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gethue">
+                            <code>getHue</code
+                            ><a href="#gethue" class="hash-link" aria-label="Direct link to gethue" title="Direct link to gethue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Get the <code>hue</code> channel value of a given color.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#87c270&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 103</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getluminance">
+                            <code>getLuminance</code
+                            ><a
+                              href="#getluminance"
+                              class="hash-link"
+                              aria-label="Direct link to getluminance"
+                              title="Direct link to getluminance"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Get color&#x27;s HSL <code>luminosity</code> channel value.</p>
+                          <p>
+                            If you want the overall <code>luminosity</code> of a color use
+                            <a href="#getluminancewcag"><code>getLuminanceWCAG</code></a> method.
+                          </p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getLuminance</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">67</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">59</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">79</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 27</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getbrightness">
+                            <code>getBrightness</code
+                            ><a
+                              href="#getbrightness"
+                              class="hash-link"
+                              aria-label="Direct link to getbrightness"
+                              title="Direct link to getbrightness"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Get the HSV&#x27;s <code>value</code> (brightness) channel value of a given color.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">127</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">36</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">8</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 11</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getalpha">
+                            <code>getAlpha</code
+                            ><a
+                              href="#getalpha"
+                              class="hash-link"
+                              aria-label="Direct link to getalpha"
+                              title="Direct link to getalpha"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Get the <code>alpha</code> channel value of a given color.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getAlpha</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d2c765c7&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 0.78</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getluminancewcag">
+                            <code>getLuminanceWCAG</code
+                            ><a
+                              href="#getluminancewcag"
+                              class="hash-link"
+                              aria-label="Direct link to getluminancewcag"
+                              title="Direct link to getluminancewcag"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            Returns the perceived <code>luminance</code> of the given color, from <code>0-1</code> as defined by
+                            <a href="https://www.w3.org/TR/WCAG20/" target="_blank" rel="noopener noreferrer"
+                              >Web Content Accessibility Guidelines (Version 2.0)</a
+                            >.
+                          </p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getLuminanceWCAG</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(176, 7, 120, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 0.10738130030129947</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="arecolorsequal">
+                            <code>areColorsEqual</code
+                            ><a
+                              href="#arecolorsequal"
+                              class="hash-link"
+                              aria-label="Direct link to arecolorsequal"
+                              title="Direct link to arecolorsequal"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Check if two colors are similar within a specified tolerance.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> tolerance </span><span class="token operator">=</span><span class="token plain"> </span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> isEqual </span><span class="token operator">=</span><span class="token plain"> colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">areColorsEqual</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#F00&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> tolerance</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// true</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="contrastratio">
+                            <code>contrastRatio</code
+                            ><a
+                              href="#contrastratio"
+                              class="hash-link"
+                              aria-label="Direct link to contrastratio"
+                              title="Direct link to contrastratio"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            Calculates the contrast ratio between two colors, useful for ensuring accessibility and readability.
+                          </p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">contrastRatio</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;yellow&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgba(40, 38, 43, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// 13.95</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="isdark">
+                            <code>isDark</code
+                            ><a href="#isdark" class="hash-link" aria-label="Direct link to isdark" title="Direct link to isdark"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Returns a boolean indicating whether the color is considered &quot;dark&quot; or not.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">isDark</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsla(224, 77%, 28%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// true</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="islight">
+                            <code>isLight</code
+                            ><a
+                              href="#islight"
+                              class="hash-link"
+                              aria-label="Direct link to islight"
+                              title="Direct link to islight"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Returns a boolean indicating whether the color is considered &quot;light&quot; or not.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">isLight</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;hsla(224, 77%, 28%, 1)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// false</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-manipulation">
+                            Color Manipulation<a
+                              href="#color-manipulation"
+                              class="hash-link"
+                              aria-label="Direct link to Color Manipulation"
+                              title="Direct link to Color Manipulation"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setred">
+                            <code>setRed</code
+                            ><a href="#setred" class="hash-link" aria-label="Direct link to setred" title="Direct link to setred"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set the <code>red</code> value of a color to a specific amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">150</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #c8a2a1</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">rgb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// rgb(200, 162, 161)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">rgb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { r: 200, g: 162, b: 161, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">rgb</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [200, 162, 161, 1]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsl</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsl(2, 26%, 71%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsl</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 2, s: 26, l: 71, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsl</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [2, 26, 71, 1]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// hsv(2, 20%, 78%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">object</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// { h: 2, s: 20, l: 78, a: 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#a5a2a1&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">200</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hsv</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// [2, 20, 78, 1]</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasered">
+                            <code>increaseRed</code
+                            ><a
+                              href="#increasered"
+                              class="hash-link"
+                              aria-label="Direct link to increasered"
+                              title="Direct link to increasered"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Increase the <code>red</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ed661b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff661b</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasered">
+                            <code>decreaseRed</code
+                            ><a
+                              href="#decreasered"
+                              class="hash-link"
+                              aria-label="Direct link to decreasered"
+                              title="Direct link to decreasered"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Decrease the <code>red</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #89661b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseRed</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#bb661b&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5e661b</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setgreen">
+                            <code>setGreen</code
+                            ><a
+                              href="#setgreen"
+                              class="hash-link"
+                              aria-label="Direct link to setgreen"
+                              title="Direct link to setgreen"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set the <code>green</code> value of a color to a specific amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d732d0</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasegreen">
+                            <code>increaseGreen</code
+                            ><a
+                              href="#increasegreen"
+                              class="hash-link"
+                              aria-label="Direct link to increasegreen"
+                              title="Direct link to increasegreen"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Increase the <code>green</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7ffd0</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;10%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7f9d0</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasegreen">
+                            <code>decreaseGreen</code
+                            ><a
+                              href="#decreasegreen"
+                              class="hash-link"
+                              aria-label="Direct link to decreasegreen"
+                              title="Direct link to decreasegreen"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Decrease the <code>green</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7b0d0</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseGreen</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#d7e2d0&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;10%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d7cbd0</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setblue">
+                            <code>setBlue</code
+                            ><a
+                              href="#setblue"
+                              class="hash-link"
+                              aria-label="Direct link to setblue"
+                              title="Direct link to setblue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set the <code>blue</code> value of a color to a specific amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d3292</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="increaseblue">
+                            <code>increaseBlue</code
+                            ><a
+                              href="#increaseblue"
+                              class="hash-link"
+                              aria-label="Direct link to increaseblue"
+                              title="Direct link to increaseblue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Increase the <code>blue</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8ec4</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8edb</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreaseblue">
+                            <code>decreaseBlue</code
+                            ><a
+                              href="#decreaseblue"
+                              class="hash-link"
+                              aria-label="Direct link to decreaseblue"
+                              title="Direct link to decreaseblue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Decrease the <code>blue</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8e60</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBlue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#5d8e92&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #5d8e49</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="sethue">
+                            <code>setHue</code
+                            ><a href="#sethue" class="hash-link" aria-label="Direct link to sethue" title="Direct link to sethue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set the <code>hue</code> value of a color to a specific amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #51481a</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasehue">
+                            <code>increaseHue</code
+                            ><a
+                              href="#increasehue"
+                              class="hash-link"
+                              aria-label="Direct link to increasehue"
+                              title="Direct link to increasehue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Increase the <code>Hue</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #511a48</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #511a1a</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasehue">
+                            <code>decreaseHue</code
+                            ><a
+                              href="#decreasehue"
+                              class="hash-link"
+                              aria-label="Direct link to decreasehue"
+                              title="Direct link to decreasehue"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Decrease the <code>Hue</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1a3651</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseHue</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1a5123</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="spin">
+                            <code>spin</code
+                            ><a href="#spin" class="hash-link" aria-label="Direct link to spin" title="Direct link to spin">​</a>
+                          </h3>
+                          <p>Spin the <code>hue</code> channel by a certain percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">spin</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">350</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #231a51</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">spin</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#2c1a51&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;350%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #40511a</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setsaturation">
+                            <code>setSaturation</code
+                            ><a
+                              href="#setsaturation"
+                              class="hash-link"
+                              aria-label="Direct link to setsaturation"
+                              title="Direct link to setsaturation"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set the <code>saturation</code> value of a color to a specific amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setSaturation</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #750068</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="saturate">
+                            <code>saturate</code
+                            ><a
+                              href="#saturate"
+                              class="hash-link"
+                              aria-label="Direct link to saturate"
+                              title="Direct link to saturate"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Increase the <code>saturation</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">saturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #65105b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">saturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #4e2749</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="desaturate">
+                            <code>desaturate</code
+                            ><a
+                              href="#desaturate"
+                              class="hash-link"
+                              aria-label="Direct link to desaturate"
+                              title="Direct link to desaturate"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Decrease the <code>saturation</code> value of a color by the given percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">desaturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #3b3b3b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">desaturate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#482e45&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #413440</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setluminance">
+                            <code>setLuminance</code
+                            ><a
+                              href="#setluminance"
+                              class="hash-link"
+                              aria-label="Direct link to setluminance"
+                              title="Direct link to setluminance"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set HSL&#x27;s <code>luminosity</code> channel for a given color to a specific amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setLuminance</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1313ec</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="brighten">
+                            <code>brighten</code
+                            ><a
+                              href="#brighten"
+                              class="hash-link"
+                              aria-label="Direct link to brighten"
+                              title="Direct link to brighten"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Increase the <code>brightness</code> of the given color by a certain percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">brighten</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ffffff</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">brighten</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;5%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #f1f1fe</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="darken">
+                            <code>darken</code
+                            ><a href="#darken" class="hash-link" aria-label="Direct link to darken" title="Direct link to darken"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Decrease the <code>brightness</code> of the given color by a certain percentage/amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">darken</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1010c6</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">darken</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #1212d9</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setbrightness">
+                            <code>setBrightness</code
+                            ><a
+                              href="#setbrightness"
+                              class="hash-link"
+                              aria-label="Direct link to setbrightness"
+                              title="Direct link to setbrightness"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set HSV&#x27;s <code>value</code> (brightness) channel for a given color to a specific amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #6f6f80</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasebrightness">
+                            <code>increaseBrightness</code
+                            ><a
+                              href="#increasebrightness"
+                              class="hash-link"
+                              aria-label="Direct link to increasebrightness"
+                              title="Direct link to increasebrightness"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            Increase HSV&#x27;s <code>value</code> (brightness) channel value of a color by the given
+                            percentage/amount
+                          </p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #dedeff</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">increaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;5%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #dedeff</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasebrightness">
+                            <code>decreaseBrightness</code
+                            ><a
+                              href="#decreasebrightness"
+                              class="hash-link"
+                              aria-label="Direct link to decreasebrightness"
+                              title="Direct link to decreasebrightness"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            Decrease HSV&#x27;s <code>value</code> (brightness) channel value of a color by the given
+                            percentage/amount
+                          </p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #6d6d7d</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">decreaseBrightness</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#dadafc&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;50%&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #6f6f80</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setalpha">
+                            <code>setAlpha</code
+                            ><a
+                              href="#setalpha"
+                              class="hash-link"
+                              aria-label="Direct link to setalpha"
+                              title="Direct link to setalpha"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Set the <code>alpha</code> value of a color to a specific amount.</p>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="increasealpha">
+                            <code>increaseAlpha</code
+                            ><a
+                              href="#increasealpha"
+                              class="hash-link"
+                              aria-label="Direct link to increasealpha"
+                              title="Direct link to increasealpha"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Increase the <code>alpha</code> value of a color by the given percentage/amount.</p>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="decreasealpha">
+                            <code>decreaseAlpha</code
+                            ><a
+                              href="#decreasealpha"
+                              class="hash-link"
+                              aria-label="Direct link to decreasealpha"
+                              title="Direct link to decreasealpha"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Decrease the <code>alpha</code> value of a color by the given percentage/amount.</p>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-utilities">
+                            Color Utilities<a
+                              href="#color-utilities"
+                              class="hash-link"
+                              aria-label="Direct link to Color Utilities"
+                              title="Direct link to Color Utilities"
+                              >​</a
+                            >
+                          </h2>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="blend">
+                            <code>blend</code
+                            ><a href="#blend" class="hash-link" aria-label="Direct link to blend" title="Direct link to blend"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Blends two colors by a certain amount.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">blend</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;yellow&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff8000</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="invert">
+                            <code>invert</code
+                            ><a href="#invert" class="hash-link" aria-label="Direct link to invert" title="Direct link to invert"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Invert (negate) a color, black becomes white, white becomes black, blue becomes orange and so on.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">invert</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#000&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ffffff</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="grayscale">
+                            <code>grayscale</code
+                            ><a
+                              href="#grayscale"
+                              class="hash-link"
+                              aria-label="Direct link to grayscale"
+                              title="Direct link to grayscale"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Completely desaturates a color into greyscale.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">grayscale</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#172140&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #212121</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adjustcontrast">
+                            <code>adjustContrast</code
+                            ><a
+                              href="#adjustcontrast"
+                              class="hash-link"
+                              aria-label="Direct link to adjustcontrast"
+                              title="Direct link to adjustcontrast"
+                              >​</a
+                            >
+                          </h3>
+                          <p>
+                            Returns the first color (text color) with the desired contrast ratio against the second color
+                            (background color).
+                          </p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">adjustContrast</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;rgb(50, 50, 50)&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;#fff&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">4.5</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #777777</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomhslcolor">
+                            <code>randomHslColor</code
+                            ><a
+                              href="#randomhslcolor"
+                              class="hash-link"
+                              aria-label="Direct link to randomhslcolor"
+                              title="Direct link to randomhslcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Generate a random color from <code>HSL</code> values.</p>
+                          <p>You can provide a range between two values for each channel.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHslColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">l</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #b07345</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHslColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #d0bfd6</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomhsvcolor">
+                            <code>randomHsvColor</code
+                            ><a
+                              href="#randomhsvcolor"
+                              class="hash-link"
+                              aria-label="Direct link to randomhsvcolor"
+                              title="Direct link to randomhsvcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Generate a random color from <code>HSV</code> values.</p>
+                          <p>You can provide a range between two values for each channel.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHsvColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">s</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">v</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #59078c</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHsvColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #2b553f</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomrgbcolor">
+                            <code>randomRgbColor</code
+                            ><a
+                              href="#randomrgbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to randomrgbcolor"
+                              title="Direct link to randomrgbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Generate a random color from <code>rgb</code> values.</p>
+                          <p>You can provide a range between two values for each channel.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomRgbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">r</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">g</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff0f0b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomRgbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #b07345</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="randomhwbcolor">
+                            <code>randomHwbColor</code
+                            ><a
+                              href="#randomhwbcolor"
+                              class="hash-link"
+                              aria-label="Direct link to randomhwbcolor"
+                              title="Direct link to randomhwbcolor"
+                              >​</a
+                            >
+                          </h3>
+                          <p>Generate a random color from <code>hwb</code> values.</p>
+                          <p>You can provide a range between two values for each channel.</p>
+                          <div
+                            class="language-js codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-js codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHwbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token literal-property property">h</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">360</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">w</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #ff0f0b</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">colorKit</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">randomHwbColor</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// #b07345</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">ExtraThumb</div></a
+                        ><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/Examples"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Examples</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li><a href="#supported-colors" class="table-of-contents__link toc-highlight">Supported Colors</a></li>
+                        <li>
+                          <a href="#color-conversion" class="table-of-contents__link toc-highlight">Color Conversion</a>
+                          <ul>
+                            <li><a href="#rgb" class="table-of-contents__link toc-highlight">RGB</a></li>
+                            <li><a href="#hex-1" class="table-of-contents__link toc-highlight">HEX</a></li>
+                            <li><a href="#hsl-1" class="table-of-contents__link toc-highlight">HSL</a></li>
+                            <li><a href="#hsv-1" class="table-of-contents__link toc-highlight">HSV</a></li>
+                            <li><a href="#hwb-1" class="table-of-contents__link toc-highlight">HWB</a></li>
+                          </ul>
+                        </li>
+                        <li>
+                          <a href="#color-information" class="table-of-contents__link toc-highlight">Color Information</a>
+                          <ul>
+                            <li>
+                              <a href="#getformat" class="table-of-contents__link toc-highlight"><code>getFormat</code></a>
+                            </li>
+                            <li>
+                              <a href="#getred" class="table-of-contents__link toc-highlight"><code>getRed</code></a>
+                            </li>
+                            <li>
+                              <a href="#getgreen" class="table-of-contents__link toc-highlight"><code>getGreen</code></a>
+                            </li>
+                            <li>
+                              <a href="#getblue" class="table-of-contents__link toc-highlight"><code>getBlue</code></a>
+                            </li>
+                            <li>
+                              <a href="#gethue" class="table-of-contents__link toc-highlight"><code>getHue</code></a>
+                            </li>
+                            <li>
+                              <a href="#getluminance" class="table-of-contents__link toc-highlight"><code>getLuminance</code></a>
+                            </li>
+                            <li>
+                              <a href="#getbrightness" class="table-of-contents__link toc-highlight"
+                                ><code>getBrightness</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#getalpha" class="table-of-contents__link toc-highlight"><code>getAlpha</code></a>
+                            </li>
+                            <li>
+                              <a href="#getluminancewcag" class="table-of-contents__link toc-highlight"
+                                ><code>getLuminanceWCAG</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#arecolorsequal" class="table-of-contents__link toc-highlight"
+                                ><code>areColorsEqual</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#contrastratio" class="table-of-contents__link toc-highlight"
+                                ><code>contrastRatio</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#isdark" class="table-of-contents__link toc-highlight"><code>isDark</code></a>
+                            </li>
+                            <li>
+                              <a href="#islight" class="table-of-contents__link toc-highlight"><code>isLight</code></a>
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <a href="#color-manipulation" class="table-of-contents__link toc-highlight">Color Manipulation</a>
+                          <ul>
+                            <li>
+                              <a href="#setred" class="table-of-contents__link toc-highlight"><code>setRed</code></a>
+                            </li>
+                            <li>
+                              <a href="#increasered" class="table-of-contents__link toc-highlight"><code>increaseRed</code></a>
+                            </li>
+                            <li>
+                              <a href="#decreasered" class="table-of-contents__link toc-highlight"><code>decreaseRed</code></a>
+                            </li>
+                            <li>
+                              <a href="#setgreen" class="table-of-contents__link toc-highlight"><code>setGreen</code></a>
+                            </li>
+                            <li>
+                              <a href="#increasegreen" class="table-of-contents__link toc-highlight"
+                                ><code>increaseGreen</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#decreasegreen" class="table-of-contents__link toc-highlight"
+                                ><code>decreaseGreen</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#setblue" class="table-of-contents__link toc-highlight"><code>setBlue</code></a>
+                            </li>
+                            <li>
+                              <a href="#increaseblue" class="table-of-contents__link toc-highlight"><code>increaseBlue</code></a>
+                            </li>
+                            <li>
+                              <a href="#decreaseblue" class="table-of-contents__link toc-highlight"><code>decreaseBlue</code></a>
+                            </li>
+                            <li>
+                              <a href="#sethue" class="table-of-contents__link toc-highlight"><code>setHue</code></a>
+                            </li>
+                            <li>
+                              <a href="#increasehue" class="table-of-contents__link toc-highlight"><code>increaseHue</code></a>
+                            </li>
+                            <li>
+                              <a href="#decreasehue" class="table-of-contents__link toc-highlight"><code>decreaseHue</code></a>
+                            </li>
+                            <li>
+                              <a href="#spin" class="table-of-contents__link toc-highlight"><code>spin</code></a>
+                            </li>
+                            <li>
+                              <a href="#setsaturation" class="table-of-contents__link toc-highlight"
+                                ><code>setSaturation</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#saturate" class="table-of-contents__link toc-highlight"><code>saturate</code></a>
+                            </li>
+                            <li>
+                              <a href="#desaturate" class="table-of-contents__link toc-highlight"><code>desaturate</code></a>
+                            </li>
+                            <li>
+                              <a href="#setluminance" class="table-of-contents__link toc-highlight"><code>setLuminance</code></a>
+                            </li>
+                            <li>
+                              <a href="#brighten" class="table-of-contents__link toc-highlight"><code>brighten</code></a>
+                            </li>
+                            <li>
+                              <a href="#darken" class="table-of-contents__link toc-highlight"><code>darken</code></a>
+                            </li>
+                            <li>
+                              <a href="#setbrightness" class="table-of-contents__link toc-highlight"
+                                ><code>setBrightness</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#increasebrightness" class="table-of-contents__link toc-highlight"
+                                ><code>increaseBrightness</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#decreasebrightness" class="table-of-contents__link toc-highlight"
+                                ><code>decreaseBrightness</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#setalpha" class="table-of-contents__link toc-highlight"><code>setAlpha</code></a>
+                            </li>
+                            <li>
+                              <a href="#increasealpha" class="table-of-contents__link toc-highlight"
+                                ><code>increaseAlpha</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#decreasealpha" class="table-of-contents__link toc-highlight"
+                                ><code>decreaseAlpha</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                        <li>
+                          <a href="#color-utilities" class="table-of-contents__link toc-highlight">Color Utilities</a>
+                          <ul>
+                            <li>
+                              <a href="#blend" class="table-of-contents__link toc-highlight"><code>blend</code></a>
+                            </li>
+                            <li>
+                              <a href="#invert" class="table-of-contents__link toc-highlight"><code>invert</code></a>
+                            </li>
+                            <li>
+                              <a href="#grayscale" class="table-of-contents__link toc-highlight"><code>grayscale</code></a>
+                            </li>
+                            <li>
+                              <a href="#adjustcontrast" class="table-of-contents__link toc-highlight"
+                                ><code>adjustContrast</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#randomhslcolor" class="table-of-contents__link toc-highlight"
+                                ><code>randomHslColor</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#randomhsvcolor" class="table-of-contents__link toc-highlight"
+                                ><code>randomHsvColor</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#randomrgbcolor" class="table-of-contents__link toc-highlight"
+                                ><code>randomRgbColor</code></a
+                              >
+                            </li>
+                            <li>
+                              <a href="#randomhwbcolor" class="table-of-contents__link toc-highlight"
+                                ><code>randomHwbColor</code></a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/Examples/index.html b/docs/build/docs/Examples/index.html
index fcacd11..9a11c02 100644
--- a/docs/build/docs/Examples/index.html
+++ b/docs/build/docs/Examples/index.html
@@ -1,30 +1,319 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Examples" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Examples | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/Examples"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Examples | Reanimated Color Picker"><meta data-rh="true" name="description" content="- ### Bare workflow - typescript"><meta data-rh="true" property="og:description" content="- ### Bare workflow - typescript"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/Examples"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Examples" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Examples" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://alabsi91.github.io/reanimated-color-picker/docs/Examples"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Expand sidebar category &#x27;API&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Examples</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Examples</h1></header>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="bare-workflow---typescript"><a href="https://github.com/alabsi91/reanimated-color-picker/tree/main/Example" target="_blank" rel="noopener noreferrer">Bare workflow - typescript</a><a href="#bare-workflow---typescript" class="hash-link" aria-label="Direct link to bare-workflow---typescript" title="Direct link to bare-workflow---typescript">​</a></h3>
-</li>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="expo-managed-workflow"><a href="https://github.com/alabsi91/reanimated-color-picker/tree/main/ExampleExpo" target="_blank" rel="noopener noreferrer">Expo managed workflow</a><a href="#expo-managed-workflow" class="hash-link" aria-label="Direct link to expo-managed-workflow" title="Direct link to expo-managed-workflow">​</a></h3>
-</li>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="expo-snack"><a href="https://snack.expo.dev/@alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer">Expo snack</a><a href="#expo-snack" class="hash-link" aria-label="Direct link to expo-snack" title="Direct link to expo-snack">​</a></h3>
-</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>if the example is not loading, please try to refresh the page.</p></div></div>
-<!-- -->
-<div data-snack-id="@alabsi91/reanimated-color-picker" data-snack-platform="web" data-snack-preview="true" data-snack-theme="dark" data-snack-loading="lazy" style="overflow:hidden;background:#212121;border:1px solid var(--color-border);border-radius:4px;height:800px;width:100%"></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/ColorKit"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">ColorKit</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#bare-workflow---typescript" class="table-of-contents__link toc-highlight">Bare workflow - typescript</a></li><li><a href="#expo-managed-workflow" class="table-of-contents__link toc-highlight">Expo managed workflow</a></li><li><a href="#expo-snack" class="table-of-contents__link toc-highlight">Expo snack</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Examples"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Examples | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/Examples" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Examples | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="- ### Bare workflow - typescript" />
+    <meta data-rh="true" property="og:description" content="- ### Bare workflow - typescript" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/Examples" />
+    <link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Examples" hreflang="en" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/Examples"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li
+                        class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"
+                      >
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist"
+                            aria-expanded="false"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Expand sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/Examples"
+                          >Examples</a
+                        >
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Examples</span
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <h1>Examples</h1>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="bare-workflow---typescript">
+                                <a
+                                  href="https://github.com/alabsi91/reanimated-color-picker/tree/main/Example"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >Bare workflow - typescript</a
+                                ><a
+                                  href="#bare-workflow---typescript"
+                                  class="hash-link"
+                                  aria-label="Direct link to bare-workflow---typescript"
+                                  title="Direct link to bare-workflow---typescript"
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="expo-managed-workflow">
+                                <a
+                                  href="https://github.com/alabsi91/reanimated-color-picker/tree/main/ExampleExpo"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >Expo managed workflow</a
+                                ><a
+                                  href="#expo-managed-workflow"
+                                  class="hash-link"
+                                  aria-label="Direct link to expo-managed-workflow"
+                                  title="Direct link to expo-managed-workflow"
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="expo-snack">
+                                <a
+                                  href="https://snack.expo.dev/@alabsi91/reanimated-color-picker"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >Expo snack</a
+                                ><a
+                                  href="#expo-snack"
+                                  class="hash-link"
+                                  aria-label="Direct link to expo-snack"
+                                  title="Direct link to expo-snack"
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >note
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <p>if the example is not loading, please try to refresh the page.</p>
+                            </div>
+                          </div>
+                          <!-- -->
+                          <!-- -->
+                          <div
+                            data-snack-id="@alabsi91/reanimated-color-picker"
+                            data-snack-platform="web"
+                            data-snack-preview="true"
+                            data-snack-theme="dark"
+                            data-snack-loading="lazy"
+                            style="
+                              overflow: hidden;
+                              background: #212121;
+                              border: 1px solid var(--color-border);
+                              border-radius: 4px;
+                              height: 800px;
+                              width: 100%;
+                            "
+                          ></div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/ColorKit"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">ColorKit</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#bare-workflow---typescript" class="table-of-contents__link toc-highlight"
+                            >Bare workflow - typescript</a
+                          >
+                        </li>
+                        <li>
+                          <a href="#expo-managed-workflow" class="table-of-contents__link toc-highlight">Expo managed workflow</a>
+                        </li>
+                        <li><a href="#expo-snack" class="table-of-contents__link toc-highlight">Expo snack</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/Installation/index.html b/docs/build/docs/Installation/index.html
index 07e7d34..669486d 100644
--- a/docs/build/docs/Installation/index.html
+++ b/docs/build/docs/Installation/index.html
@@ -1,30 +1,421 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Installation" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Installation | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/Installation"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Installation | Reanimated Color Picker"><meta data-rh="true" name="description" content="Prerequisites"><meta data-rh="true" property="og:description" content="Prerequisites"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/Installation"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Installation" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Installation" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Installation","item":"https://alabsi91.github.io/reanimated-color-picker/docs/Installation"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Expand sidebar category &#x27;API&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Installation</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Installation</h1></header><h2 class="anchor anchorWithStickyNavbar_LWe7" id="prerequisites">Prerequisites<a href="#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites">​</a></h2>
-<ul>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="react-native-reanimated-version-200-or-higher"><a href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation" target="_blank" rel="noopener noreferrer">react-native-reanimated</a> version <code>2.0.0</code> or higher.<a href="#react-native-reanimated-version-200-or-higher" class="hash-link" aria-label="Direct link to react-native-reanimated-version-200-or-higher" title="Direct link to react-native-reanimated-version-200-or-higher">​</a></h3>
-</li>
-<li>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="react-native-gesture-handler-version-200-or-higher"><a href="https://docs.swmansion.com/react-native-gesture-handler/docs/installation" target="_blank" rel="noopener noreferrer">react-native-gesture-handler</a> version <code>2.0.0</code> or higher.<a href="#react-native-gesture-handler-version-200-or-higher" class="hash-link" aria-label="Direct link to react-native-gesture-handler-version-200-or-higher" title="Direct link to react-native-gesture-handler-version-200-or-higher">​</a></h3>
-</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>For Expo users</div><div class="admonitionContent_BuS1"><h4 class="anchor anchorWithStickyNavbar_LWe7" id="expo-managed-workflow-version-44-or-higher-is-required"><a href="https://docs.expo.dev/get-started/installation/" target="_blank" rel="noopener noreferrer">Expo managed workflow</a> version <code>44</code> or higher is required.<a href="#expo-managed-workflow-version-44-or-higher-is-required" class="hash-link" aria-label="Direct link to expo-managed-workflow-version-44-or-higher-is-required" title="Direct link to expo-managed-workflow-version-44-or-higher-is-required">​</a></h4></div></div>
-<h2 class="anchor anchorWithStickyNavbar_LWe7" id="installation">Installation<a href="#installation" class="hash-link" aria-label="Direct link to Installation" title="Direct link to Installation">​</a></h2>
-<ul>
-<li>Open a Terminal in the project root and run:</li>
-</ul>
-<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">yarn</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-cli codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-cli codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">npm i reanimated-color-picker</span><br></span></code></pre></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-cli codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-cli codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">yarn add reanimated-color-picker</span><br></span></code></pre></div></div></div></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/intro"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Introduction</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/Usage"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Usage</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a><ul><li><a href="#react-native-reanimated-version-200-or-higher" class="table-of-contents__link toc-highlight">react-native-reanimated version <code>2.0.0</code> or higher.</a></li><li><a href="#react-native-gesture-handler-version-200-or-higher" class="table-of-contents__link toc-highlight">react-native-gesture-handler version <code>2.0.0</code> or higher.</a></li></ul></li><li><a href="#installation" class="table-of-contents__link toc-highlight">Installation</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Installation"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Installation | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/Installation" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Installation | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="Prerequisites" />
+    <meta data-rh="true" property="og:description" content="Prerequisites" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/Installation" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/Installation"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/Installation"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a
+                          class="menu__link menu__link--active"
+                          aria-current="page"
+                          href="/reanimated-color-picker/docs/Installation"
+                          >Installation</a
+                        >
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li
+                        class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"
+                      >
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist"
+                            aria-expanded="false"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Expand sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Installation</span
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo">
+                          <button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>
+                        </div>
+                        <div class="theme-doc-markdown markdown">
+                          <header><h1>Installation</h1></header>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="prerequisites">
+                            Prerequisites<a
+                              href="#prerequisites"
+                              class="hash-link"
+                              aria-label="Direct link to Prerequisites"
+                              title="Direct link to Prerequisites"
+                              >​</a
+                            >
+                          </h2>
+                          <ul>
+                            <li>
+                              <h3 class="anchor anchorWithStickyNavbar_LWe7" id="react-native-reanimated-version-200-or-higher">
+                                <a
+                                  href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >react-native-reanimated</a
+                                >
+                                version <code>2.0.0</code> or higher.<a
+                                  href="#react-native-reanimated-version-200-or-higher"
+                                  class="hash-link"
+                                  aria-label="Direct link to react-native-reanimated-version-200-or-higher"
+                                  title="Direct link to react-native-reanimated-version-200-or-higher"
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                            <li>
+                              <h3
+                                class="anchor anchorWithStickyNavbar_LWe7"
+                                id="react-native-gesture-handler-version-200-or-higher"
+                              >
+                                <a
+                                  href="https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >react-native-gesture-handler</a
+                                >
+                                version <code>2.0.0</code> or higher.<a
+                                  href="#react-native-gesture-handler-version-200-or-higher"
+                                  class="hash-link"
+                                  aria-label="Direct link to react-native-gesture-handler-version-200-or-higher"
+                                  title="Direct link to react-native-gesture-handler-version-200-or-higher"
+                                  >​</a
+                                >
+                              </h3>
+                            </li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >For Expo users
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <h4
+                                class="anchor anchorWithStickyNavbar_LWe7"
+                                id="expo-managed-workflow-version-44-or-higher-is-required"
+                              >
+                                <a
+                                  href="https://docs.expo.dev/get-started/installation/"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >Expo managed workflow</a
+                                >
+                                version <code>44</code> or higher is required.<a
+                                  href="#expo-managed-workflow-version-44-or-higher-is-required"
+                                  class="hash-link"
+                                  aria-label="Direct link to expo-managed-workflow-version-44-or-higher-is-required"
+                                  title="Direct link to expo-managed-workflow-version-44-or-higher-is-required"
+                                  >​</a
+                                >
+                              </h4>
+                            </div>
+                          </div>
+                          <h2 class="anchor anchorWithStickyNavbar_LWe7" id="installation">
+                            Installation<a
+                              href="#installation"
+                              class="hash-link"
+                              aria-label="Direct link to Installation"
+                              title="Direct link to Installation"
+                              >​</a
+                            >
+                          </h2>
+                          <ul>
+                            <li>Open a Terminal in the project root and run:</li>
+                          </ul>
+                          <div class="tabs-container tabList__CuJ">
+                            <ul role="tablist" aria-orientation="horizontal" class="tabs">
+                              <li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">
+                                npm
+                              </li>
+                              <li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">yarn</li>
+                            </ul>
+                            <div class="margin-top--md">
+                              <div role="tabpanel" class="tabItem_Ymn6">
+                                <div
+                                  class="language-cli codeBlockContainer_Ckt0 theme-code-block"
+                                  style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                                >
+                                  <div class="codeBlockContent_biex">
+                                    <pre
+                                      tabindex="0"
+                                      class="prism-code language-cli codeBlock_bY9V thin-scrollbar"
+                                      style="color: #f8f8f2; background-color: #282a36"
+                                    ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">npm i reanimated-color-picker</span><br></span></code></pre>
+                                    <div class="buttonGroup__atx">
+                                      <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                        <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                          ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                            <path
+                                              fill="currentColor"
+                                              d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                            ></path></svg
+                                          ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                            <path
+                                              fill="currentColor"
+                                              d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                            ></path></svg
+                                        ></span>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div role="tabpanel" class="tabItem_Ymn6" hidden="">
+                                <div
+                                  class="language-cli codeBlockContainer_Ckt0 theme-code-block"
+                                  style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                                >
+                                  <div class="codeBlockContent_biex">
+                                    <pre
+                                      tabindex="0"
+                                      class="prism-code language-cli codeBlock_bY9V thin-scrollbar"
+                                      style="color: #f8f8f2; background-color: #282a36"
+                                    ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">yarn add reanimated-color-picker</span><br></span></code></pre>
+                                    <div class="buttonGroup__atx">
+                                      <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                        <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                          ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                            <path
+                                              fill="currentColor"
+                                              d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                            ></path></svg
+                                          ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                            <path
+                                              fill="currentColor"
+                                              d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                            ></path></svg
+                                        ></span>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/intro"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Introduction</div></a
+                        ><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/Usage"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Usage</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                  <div class="col col--3">
+                    <div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop">
+                      <ul class="table-of-contents table-of-contents__left-border">
+                        <li>
+                          <a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a>
+                          <ul>
+                            <li>
+                              <a
+                                href="#react-native-reanimated-version-200-or-higher"
+                                class="table-of-contents__link toc-highlight"
+                                >react-native-reanimated version <code>2.0.0</code> or higher.</a
+                              >
+                            </li>
+                            <li>
+                              <a
+                                href="#react-native-gesture-handler-version-200-or-higher"
+                                class="table-of-contents__link toc-highlight"
+                                >react-native-gesture-handler version <code>2.0.0</code> or higher.</a
+                              >
+                            </li>
+                          </ul>
+                        </li>
+                        <li><a href="#installation" class="table-of-contents__link toc-highlight">Installation</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/Usage/index.html b/docs/build/docs/Usage/index.html
index bd4e3cb..3dc06d8 100644
--- a/docs/build/docs/Usage/index.html
+++ b/docs/build/docs/Usage/index.html
@@ -1,29 +1,323 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Usage" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Usage | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/Usage"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Usage | Reanimated Color Picker"><meta data-rh="true" name="description" content="- You can add, remove, rearrange, or style the built-in components of the color picker."><meta data-rh="true" property="og:description" content="- You can add, remove, rearrange, or style the built-in components of the color picker."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/Usage"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Usage" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Usage" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Usage","item":"https://alabsi91.github.io/reanimated-color-picker/docs/Usage"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Expand sidebar category &#x27;API&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Usage</span></li></ul></nav><div class="theme-doc-markdown markdown"><header><h1>Usage</h1></header>
-<ul>
-<li>
-<p>You can add, remove, rearrange, or style the built-in components of the color picker.</p>
-</li>
-<li>
-<p>Please take a look at the functioning examples: <a href="/reanimated-color-picker/docs/Examples">Examples</a></p>
-</li>
-</ul>
-<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>Using inside a <code>ScrollView</code></p><ul>
-<li>If you experience gesture conflicts when using the color picker inside a <code>ScrollView</code>, simply import the <code>ScrollView</code> from <code>react-native-gesture-handler</code> instead of from <code>react-native</code>.</li>
-</ul><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> ScrollView </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-gesture-handler&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div></div></div>
-<br>
-<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useState </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Button</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Modal</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">StyleSheet</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">View</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ColorPicker</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Panel1</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Swatches</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Preview</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">OpacitySlider</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">HueSlider</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">default</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:rgb(80, 250, 123)">App</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain">showModal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> setShowModal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useState</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token comment" style="color:rgb(98, 114, 164)">// Note: use `onCompleteJS` and `onChangeJS` for non-worklet functions</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(80, 250, 123)">onSelectColor</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token parameter"> hex </span><span class="token parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;worklet&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token comment" style="color:rgb(98, 114, 164)">// do something with the selected color.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token console class-name">console</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">log</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">styles</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(255, 121, 198)">container</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Color Picker</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(255, 121, 198)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript function" style="color:rgb(80, 250, 123)">setShowModal</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript boolean" style="color:rgb(255, 121, 198)">true</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Modal</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">visible</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">showModal</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">animationType</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">slide</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript literal-property property" style="color:rgb(255, 121, 198)">width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;70%&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">red</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">onComplete</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">onSelectColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Preview</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel1</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">HueSlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">OpacitySlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Swatches</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Ok</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(255, 121, 198)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript function" style="color:rgb(80, 250, 123)">setShowModal</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript boolean" style="color:rgb(255, 121, 198)">false</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Modal</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> styles </span><span class="token operator">=</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">create</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token literal-property property">container</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token literal-property property">flex</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token literal-property property">justifyContent</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;center&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/Installation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Installation</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/api"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">API</div></a></nav></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Usage"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Usage | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/Usage" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Usage | Reanimated Color Picker" />
+    <meta
+      data-rh="true"
+      name="description"
+      content="- You can add, remove, rearrange, or style the built-in components of the color picker."
+    />
+    <meta
+      data-rh="true"
+      property="og:description"
+      content="- You can add, remove, rearrange, or style the built-in components of the color picker."
+    />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/Usage" />
+    <link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/Usage" hreflang="en" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/Usage"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/Usage"
+                          >Usage</a
+                        >
+                      </li>
+                      <li
+                        class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"
+                      >
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist"
+                            aria-expanded="false"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Expand sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col docItemCol_VOVn">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Usage</span><meta itemprop="position" content="1" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="theme-doc-markdown markdown">
+                          <h1>Usage</h1>
+                          <ul>
+                            <li>
+                              <p>You can add, remove, rearrange, or style the built-in components of the color picker.</p>
+                            </li>
+                            <li>
+                              <p>
+                                Please take a look at the functioning examples:
+                                <a href="/reanimated-color-picker/docs/Examples">Examples</a>
+                              </p>
+                            </li>
+                          </ul>
+                          <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info">
+                            <div class="admonitionHeading_Gvgb">
+                              <span class="admonitionIcon_Rf37"
+                                ><svg viewBox="0 0 14 16">
+                                  <path
+                                    fill-rule="evenodd"
+                                    d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
+                                  ></path></svg></span
+                              >info
+                            </div>
+                            <div class="admonitionContent_BuS1">
+                              <p>Using inside a <code>ScrollView</code></p>
+                              <ul>
+                                <li>
+                                  If you experience gesture conflicts when using the color picker inside a
+                                  <code>ScrollView</code>, simply import the <code>ScrollView</code> from
+                                  <code>react-native-gesture-handler</code> instead of from <code>react-native</code>.
+                                </li>
+                              </ul>
+                              <div
+                                class="language-ts codeBlockContainer_Ckt0 theme-code-block"
+                                style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                              >
+                                <div class="codeBlockContent_biex">
+                                  <pre
+                                    tabindex="0"
+                                    class="prism-code language-ts codeBlock_bY9V thin-scrollbar"
+                                    style="color: #f8f8f2; background-color: #282a36"
+                                  ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> ScrollView </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native-gesture-handler&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre>
+                                  <div class="buttonGroup__atx">
+                                    <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                      <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                        ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                          <path
+                                            fill="currentColor"
+                                            d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                          ></path></svg
+                                        ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                          <path
+                                            fill="currentColor"
+                                            d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                          ></path></svg
+                                      ></span>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <br />
+                          <div
+                            class="language-jsx codeBlockContainer_Ckt0 theme-code-block"
+                            style="--prism-color: #f8f8f2; --prism-background-color: #282a36"
+                          >
+                            <div class="codeBlockContent_biex">
+                              <pre
+                                tabindex="0"
+                                class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"
+                                style="color: #f8f8f2; background-color: #282a36"
+                              ><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> useState </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Button</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Modal</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">StyleSheet</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">View</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ColorPicker</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Panel1</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Swatches</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Preview</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">OpacitySlider</span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">HueSlider</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;reanimated-color-picker&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">default</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:rgb(80, 250, 123)">App</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain">showModal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> setShowModal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">useState</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token comment" style="color:rgb(98, 114, 164)">// Note: use `onCompleteJS` and `onChangeJS` for non-worklet functions</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(80, 250, 123)">onSelectColor</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token parameter"> hex </span><span class="token parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;worklet&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token comment" style="color:rgb(98, 114, 164)">// do something with the selected color.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token console class-name">console</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">log</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">hex</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">styles</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(255, 121, 198)">container</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Color Picker</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(255, 121, 198)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript function" style="color:rgb(80, 250, 123)">setShowModal</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript boolean" style="color:rgb(255, 121, 198)">true</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Modal</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">visible</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">showModal</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">animationType</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">slide</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript literal-property property" style="color:rgb(255, 121, 198)">width</span><span class="token tag script language-javascript operator" style="color:rgb(255, 121, 198)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript string" style="color:rgb(255, 121, 198)">&#x27;70%&#x27;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">red</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">onComplete</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)">onSelectColor</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Preview</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Panel1</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">HueSlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">OpacitySlider</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Swatches</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">ColorPicker</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Ok</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">&#x27;</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(248, 248, 242)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(255, 121, 198)">=&gt;</span><span class="token tag script language-javascript" style="color:rgb(255, 121, 198)"> </span><span class="token tag script language-javascript function" style="color:rgb(80, 250, 123)">setShowModal</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token tag script language-javascript boolean" style="color:rgb(255, 121, 198)">false</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">Modal</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&lt;/</span><span class="token tag class-name" style="color:rgb(255, 121, 198)">View</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> styles </span><span class="token operator">=</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">create</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token literal-property property">container</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token literal-property property">flex</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token literal-property property">justifyContent</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">&#x27;center&#x27;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre>
+                              <div class="buttonGroup__atx">
+                                <button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn">
+                                  <span class="copyButtonIcons_eSgA" aria-hidden="true"
+                                    ><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N">
+                                      <path
+                                        fill="currentColor"
+                                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                                      ></path></svg
+                                    ><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS">
+                                      <path
+                                        fill="currentColor"
+                                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                                      ></path></svg
+                                  ></span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--prev"
+                          href="/reanimated-color-picker/docs/Installation"
+                          ><div class="pagination-nav__sublabel">Previous</div>
+                          <div class="pagination-nav__label">Installation</div></a
+                        ><a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/category/api"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">API</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/api/index.html b/docs/build/docs/category/api/index.html
index 4220421..b810683 100644
--- a/docs/build/docs/category/api/index.html
+++ b/docs/build/docs/category/api/index.html
@@ -1,16 +1,323 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">API | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/api"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="API | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation"><meta data-rh="true" property="og:description" content="API documentation"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/api"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/api" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/api" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">API</span></li></ul></nav><header><h1 class="title_kItE">API</h1><p>API documentation</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/ColorPicker"><h2 class="text--truncate cardTitle_rnsV" title="ColorPicker Wrapper">📄️<!-- --> <!-- -->ColorPicker Wrapper</h2><p class="text--truncate cardDescription_PWke" title="Responsible for managing the built-in components">Responsible for managing the built-in components</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/panels"><h2 class="text--truncate cardTitle_rnsV" title="Panels">🗃️<!-- --> <!-- -->Panels</h2><p class="text--truncate cardDescription_PWke" title="5 items">5 items</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/sliders"><h2 class="text--truncate cardTitle_rnsV" title="Sliders">🗃️<!-- --> <!-- -->Sliders</h2><p class="text--truncate cardDescription_PWke" title="5 items">5 items</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/preview"><h2 class="text--truncate cardTitle_rnsV" title="Preview">🗃️<!-- --> <!-- -->Preview</h2><p class="text--truncate cardDescription_PWke" title="5 items">5 items</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/Usage"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Usage</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/ColorPicker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">ColorPicker Wrapper</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">API | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/api" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="API | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation" />
+    <meta data-rh="true" property="og:description" content="API documentation" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/api" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/api"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/api"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-current="page"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">API</span><meta itemprop="position" content="1" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">API</h1>
+                    <p>API documentation</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/ColorPicker"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="ColorPicker Wrapper">
+                            📄️<!-- -->
+                            <!-- -->ColorPicker Wrapper
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="Responsible for managing the built-in components">
+                            Responsible for managing the built-in components
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/panels"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Panels">
+                            🗃️<!-- -->
+                            <!-- -->Panels
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="5 items">5 items</p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/sliders"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Sliders">
+                            🗃️<!-- -->
+                            <!-- -->Sliders
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="5 items">5 items</p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/preview"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Preview">
+                            🗃️<!-- -->
+                            <!-- -->Preview
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="5 items">5 items</p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/Usage"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">Usage</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/API/ColorPicker"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">ColorPicker Wrapper</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/hsb/index.html b/docs/build/docs/category/hsb/index.html
index 71ff9db..8439666 100644
--- a/docs/build/docs/category/hsb/index.html
+++ b/docs/build/docs/category/hsb/index.html
@@ -1,16 +1,428 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">HSB | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="HSB | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation for HSB Slider components"><meta data-rh="true" property="og:description" content="API documentation for HSB Slider components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"HSB","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Collapse sidebar category &#x27;HSB&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider">BrightnessSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider">SaturationSlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">HSB</span></li></ul></nav><header><h1 class="title_kItE">HSB</h1><p>API documentation for HSB Slider components</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"><h2 class="text--truncate cardTitle_rnsV" title="BrightnessSlider">📄️<!-- --> <!-- -->BrightnessSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider for adjusting the color brightness channel in the HSV color space.">A slider for adjusting the color brightness channel in the HSV color space.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"><h2 class="text--truncate cardTitle_rnsV" title="SaturationSlider">📄️<!-- --> <!-- -->SaturationSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider for adjusting the color saturation channel in the HSV color space.">A slider for adjusting the color saturation channel in the HSV color space.</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">HueCircular</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">BrightnessSlider</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">HSB | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="HSB | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation for HSB Slider components" />
+    <meta data-rh="true" property="og:description" content="API documentation for HSB Slider components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsb"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-current="page"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                                      >BrightnessSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+                                      >SaturationSlider</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                          ><span itemprop="name">API</span></a
+                        ><meta itemprop="position" content="1" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                          ><span itemprop="name">Sliders</span></a
+                        ><meta itemprop="position" content="2" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">HSB</span><meta itemprop="position" content="3" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">HSB</h1>
+                    <p>API documentation for HSB Slider components</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="BrightnessSlider">
+                            📄️<!-- -->
+                            <!-- -->BrightnessSlider
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A slider for adjusting the color brightness channel in the HSV color space."
+                          >
+                            A slider for adjusting the color brightness channel in the HSV color space.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="SaturationSlider">
+                            📄️<!-- -->
+                            <!-- -->SaturationSlider
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A slider for adjusting the color saturation channel in the HSV color space."
+                          >
+                            A slider for adjusting the color saturation channel in the HSV color space.
+                          </p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a
+                        class="pagination-nav__link pagination-nav__link--prev"
+                        href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">HueCircular</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">BrightnessSlider</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/hsl/index.html b/docs/build/docs/category/hsl/index.html
index 6589944..2ac5ef9 100644
--- a/docs/build/docs/category/hsl/index.html
+++ b/docs/build/docs/category/hsl/index.html
@@ -1,16 +1,452 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">HSL | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="HSL | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation for HSL Slider components"><meta data-rh="true" property="og:description" content="API documentation for HSL Slider components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"HSL","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Collapse sidebar category &#x27;HSL&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider">HSLSaturationSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider">LuminanceSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular">LuminanceCircular</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">HSL</span></li></ul></nav><header><h1 class="title_kItE">HSL</h1><p>API documentation for HSL Slider components</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"><h2 class="text--truncate cardTitle_rnsV" title="HSLSaturationSlider">📄️<!-- --> <!-- -->HSLSaturationSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider for adjusting the color saturation channel in the HSL color space.">A slider for adjusting the color saturation channel in the HSL color space.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"><h2 class="text--truncate cardTitle_rnsV" title="LuminanceSlider">📄️<!-- --> <!-- -->LuminanceSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider for adjusting the color luminance channel in the HSL color space.">A slider for adjusting the color luminance channel in the HSL color space.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"><h2 class="text--truncate cardTitle_rnsV" title="LuminanceCircular">📄️<!-- --> <!-- -->LuminanceCircular</h2><p class="text--truncate cardDescription_PWke" title="A circular slider for adjusting the color luminance channel in the HSL color space.">A circular slider for adjusting the color luminance channel in the HSL color space.</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">SaturationSlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">HSLSaturationSlider</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">HSL | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="HSL | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation for HSL Slider components" />
+    <meta data-rh="true" property="og:description" content="API documentation for HSL Slider components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hsl"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-current="page"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                                      >HSLSaturationSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+                                      >LuminanceSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+                                      >LuminanceCircular</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                          ><span itemprop="name">API</span></a
+                        ><meta itemprop="position" content="1" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                          ><span itemprop="name">Sliders</span></a
+                        ><meta itemprop="position" content="2" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">HSL</span><meta itemprop="position" content="3" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">HSL</h1>
+                    <p>API documentation for HSL Slider components</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="HSLSaturationSlider">
+                            📄️<!-- -->
+                            <!-- -->HSLSaturationSlider
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A slider for adjusting the color saturation channel in the HSL color space."
+                          >
+                            A slider for adjusting the color saturation channel in the HSL color space.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="LuminanceSlider">
+                            📄️<!-- -->
+                            <!-- -->LuminanceSlider
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A slider for adjusting the color luminance channel in the HSL color space."
+                          >
+                            A slider for adjusting the color luminance channel in the HSL color space.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="LuminanceCircular">
+                            📄️<!-- -->
+                            <!-- -->LuminanceCircular
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A circular slider for adjusting the color luminance channel in the HSL color space."
+                          >
+                            A circular slider for adjusting the color luminance channel in the HSL color space.
+                          </p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a
+                        class="pagination-nav__link pagination-nav__link--prev"
+                        href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">SaturationSlider</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">HSLSaturationSlider</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/hue/index.html b/docs/build/docs/category/hue/index.html
index cef4460..5e70514 100644
--- a/docs/build/docs/category/hue/index.html
+++ b/docs/build/docs/category/hue/index.html
@@ -1,16 +1,422 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Hue | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Hue | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation for Hue Slider components"><meta data-rh="true" property="og:description" content="API documentation for Hue Slider components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"Hue","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/hue"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Collapse sidebar category &#x27;Hue&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider">HueSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular">HueCircular</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Hue</span></li></ul></nav><header><h1 class="title_kItE">Hue</h1><p>API documentation for Hue Slider components</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"><h2 class="text--truncate cardTitle_rnsV" title="HueSlider">📄️<!-- --> <!-- -->HueSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s hue.">A slider to change the color&#x27;s hue.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"><h2 class="text--truncate cardTitle_rnsV" title="HueCircular">📄️<!-- --> <!-- -->HueCircular</h2><p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s hue.">A slider to change the color&#x27;s hue.</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/category/sliders"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Sliders</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">HueSlider</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Hue | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Hue | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation for Hue Slider components" />
+    <meta data-rh="true" property="og:description" content="API documentation for Hue Slider components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/hue"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-current="page"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+                                      >HueSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+                                      >HueCircular</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                          ><span itemprop="name">API</span></a
+                        ><meta itemprop="position" content="1" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                          ><span itemprop="name">Sliders</span></a
+                        ><meta itemprop="position" content="2" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">Hue</span><meta itemprop="position" content="3" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">Hue</h1>
+                    <p>API documentation for Hue Slider components</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="HueSlider">
+                            📄️<!-- -->
+                            <!-- -->HueSlider
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s hue.">
+                            A slider to change the color&#x27;s hue.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="HueCircular">
+                            📄️<!-- -->
+                            <!-- -->HueCircular
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s hue.">
+                            A slider to change the color&#x27;s hue.
+                          </p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a
+                        class="pagination-nav__link pagination-nav__link--prev"
+                        href="/reanimated-color-picker/docs/category/sliders"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">Sliders</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">HueSlider</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/panels/index.html b/docs/build/docs/category/panels/index.html
index 2aca54a..d5950f7 100644
--- a/docs/build/docs/category/panels/index.html
+++ b/docs/build/docs/category/panels/index.html
@@ -1,16 +1,394 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Panels | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Panels | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation for Panel components"><meta data-rh="true" property="og:description" content="API documentation for Panel components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Panels","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Collapse sidebar category &#x27;Panels&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Panels</span></li></ul></nav><header><h1 class="title_kItE">Panels</h1><p>API documentation for Panel components</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel1"><h2 class="text--truncate cardTitle_rnsV" title="Panel1">📄️<!-- --> <!-- -->Panel1</h2><p class="text--truncate cardDescription_PWke" title="A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.">A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel2"><h2 class="text--truncate cardTitle_rnsV" title="Panel2">📄️<!-- --> <!-- -->Panel2</h2><p class="text--truncate cardDescription_PWke" title="A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.">A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel3"><h2 class="text--truncate cardTitle_rnsV" title="Panel3">📄️<!-- --> <!-- -->Panel3</h2><p class="text--truncate cardDescription_PWke" title="The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.">The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel4"><h2 class="text--truncate cardTitle_rnsV" title="Panel4">📄️<!-- --> <!-- -->Panel4</h2><p class="text--truncate cardDescription_PWke" title="A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.">A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel5"><h2 class="text--truncate cardTitle_rnsV" title="Panel5">📄️<!-- --> <!-- -->Panel5</h2><p class="text--truncate cardDescription_PWke" title="This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.">This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/ColorPicker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">ColorPicker Wrapper</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Panels/Panel1"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Panel1</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Panels | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Panels | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation for Panel components" />
+    <meta data-rh="true" property="og:description" content="API documentation for Panel components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/panels"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-current="page"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                                  >Panel1</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                                  >Panel2</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                                  >Panel3</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                                  >Panel4</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                                  >Panel5</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                          ><span itemprop="name">API</span></a
+                        ><meta itemprop="position" content="1" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">Panels</span><meta itemprop="position" content="2" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">Panels</h1>
+                    <p>API documentation for Panel components</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Panel1">
+                            📄️<!-- -->
+                            <!-- -->Panel1
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and saturation of colors."
+                          >
+                            A square-shaped slider, reminiscent of Adobe style, is utilized to adjust the brightness and
+                            saturation of colors.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel2"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Panel2">
+                            📄️<!-- -->
+                            <!-- -->Panel2
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels."
+                          >
+                            A square-shaped slider (windows style) is utilized to adjust the hue and saturation channels.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel3"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Panel3">
+                            📄️<!-- -->
+                            <!-- -->Panel3
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of colors."
+                          >
+                            The circle-shaped slider, with its wheel style design, is utilized to adjust the hue and saturation of
+                            colors.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel4"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Panel4">
+                            📄️<!-- -->
+                            <!-- -->Panel4
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A slider with a square shape is used to adjust the channels of hue, saturation, and brightness."
+                          >
+                            A slider with a square shape is used to adjust the channels of hue, saturation, and brightness.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Panel5">
+                            📄️<!-- -->
+                            <!-- -->Panel5
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares."
+                          >
+                            This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares.
+                          </p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a
+                        class="pagination-nav__link pagination-nav__link--prev"
+                        href="/reanimated-color-picker/docs/API/ColorPicker"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">ColorPicker Wrapper</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/API/Panels/Panel1"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">Panel1</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/preview/index.html b/docs/build/docs/category/preview/index.html
index 6624bd0..3e87a53 100644
--- a/docs/build/docs/category/preview/index.html
+++ b/docs/build/docs/category/preview/index.html
@@ -1,16 +1,391 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Preview | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Preview | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation for Preview components"><meta data-rh="true" property="og:description" content="API documentation for Preview components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Preview","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Expand sidebar category &#x27;Sliders&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Collapse sidebar category &#x27;Preview&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Preview</span></li></ul></nav><header><h1 class="title_kItE">Preview</h1><p>API documentation for Preview components</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/"><h2 class="text--truncate cardTitle_rnsV" title="Preview">📄️<!-- --> <!-- -->Preview</h2><p class="text--truncate cardDescription_PWke" title="The preview of the selected and the initial color.">The preview of the selected and the initial color.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/PreviewText"><h2 class="text--truncate cardTitle_rnsV" title="PreviewText">📄️<!-- --> <!-- -->PreviewText</h2><p class="text--truncate cardDescription_PWke" title="A React Native &lt;Text&gt; component that displays the preview color text.">A React Native &lt;Text&gt; component that displays the preview color text.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/InputWidget"><h2 class="text--truncate cardTitle_rnsV" title="InputWidget">📄️<!-- --> <!-- -->InputWidget</h2><p class="text--truncate cardDescription_PWke" title="The input widget component allows you to input color values in various formats.">The input widget component allows you to input color values in various formats.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/Swatches"><h2 class="text--truncate cardTitle_rnsV" title="Swatches">📄️<!-- --> <!-- -->Swatches</h2><p class="text--truncate cardDescription_PWke" title="A list of color swatches is utilized for efficient color selection.">A list of color swatches is utilized for efficient color selection.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"><h2 class="text--truncate cardTitle_rnsV" title="ExtraThumb">📄️<!-- --> <!-- -->ExtraThumb</h2><p class="text--truncate cardDescription_PWke" title="Adds an extra thumb to the Panel3 component.">Adds an extra thumb to the Panel3 component.</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">OpacitySlider</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Preview/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Preview</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Preview | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Preview | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation for Preview components" />
+    <meta data-rh="true" property="og:description" content="API documentation for Preview components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/preview"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-current="page"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/">Preview</a>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                                  >PreviewText</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                                  >InputWidget</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                                  >Swatches</a
+                                >
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                                  >ExtraThumb</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                          ><span itemprop="name">API</span></a
+                        ><meta itemprop="position" content="1" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">Preview</span><meta itemprop="position" content="2" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">Preview</h1>
+                    <p>API documentation for Preview components</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Preview">
+                            📄️<!-- -->
+                            <!-- -->Preview
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="The preview of the selected and the initial color."
+                          >
+                            The preview of the selected and the initial color.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Preview/PreviewText"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="PreviewText">
+                            📄️<!-- -->
+                            <!-- -->PreviewText
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A React Native &lt;Text&gt; component that displays the preview color text."
+                          >
+                            A React Native &lt;Text&gt; component that displays the preview color text.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Preview/InputWidget"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="InputWidget">
+                            📄️<!-- -->
+                            <!-- -->InputWidget
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="The input widget component allows you to input color values in various formats."
+                          >
+                            The input widget component allows you to input color values in various formats.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/Swatches"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Swatches">
+                            📄️<!-- -->
+                            <!-- -->Swatches
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A list of color swatches is utilized for efficient color selection."
+                          >
+                            A list of color swatches is utilized for efficient color selection.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Preview/ExtraThumb"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="ExtraThumb">
+                            📄️<!-- -->
+                            <!-- -->ExtraThumb
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="Adds an extra thumb to the Panel3 component.">
+                            Adds an extra thumb to the Panel3 component.
+                          </p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a
+                        class="pagination-nav__link pagination-nav__link--prev"
+                        href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">OpacitySlider</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/API/Preview/"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">Preview</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/rgb/index.html b/docs/build/docs/category/rgb/index.html
index 1a32e4e..9cdbf2c 100644
--- a/docs/build/docs/category/rgb/index.html
+++ b/docs/build/docs/category/rgb/index.html
@@ -1,16 +1,449 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">RGB | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="RGB | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation for RGB Slider components"><meta data-rh="true" property="og:description" content="API documentation for RGB Slider components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"},{"@type":"ListItem","position":3,"name":"RGB","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Collapse sidebar category &#x27;RGB&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider">RedSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider">GreenSlider</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider">BlueSlider</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/sliders"><span>Sliders</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">RGB</span></li></ul></nav><header><h1 class="title_kItE">RGB</h1><p>API documentation for RGB Slider components</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"><h2 class="text--truncate cardTitle_rnsV" title="RedSlider">📄️<!-- --> <!-- -->RedSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s red channel.">A slider to change the color&#x27;s red channel.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"><h2 class="text--truncate cardTitle_rnsV" title="GreenSlider">📄️<!-- --> <!-- -->GreenSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s green channel.">A slider to change the color&#x27;s green channel.</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"><h2 class="text--truncate cardTitle_rnsV" title="BlueSlider">📄️<!-- --> <!-- -->BlueSlider</h2><p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s blue channel.">A slider to change the color&#x27;s blue channel.</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">LuminanceCircular</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">RedSlider</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">RGB | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="RGB | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation for RGB Slider components" />
+    <meta data-rh="true" property="og:description" content="API documentation for RGB Slider components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/rgb"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item">
+                                <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                                  <a
+                                    class="menu__link menu__link--sublist menu__link--active"
+                                    aria-current="page"
+                                    aria-expanded="true"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Collapse sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                                <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+                                      >RedSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+                                      >GreenSlider</a
+                                    >
+                                  </li>
+                                  <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item">
+                                    <a
+                                      class="menu__link"
+                                      tabindex="0"
+                                      href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+                                      >BlueSlider</a
+                                    >
+                                  </li>
+                                </ul>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                          ><span itemprop="name">API</span></a
+                        ><meta itemprop="position" content="1" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/sliders"
+                          ><span itemprop="name">Sliders</span></a
+                        ><meta itemprop="position" content="2" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">RGB</span><meta itemprop="position" content="3" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">RGB</h1>
+                    <p>API documentation for RGB Slider components</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="RedSlider">
+                            📄️<!-- -->
+                            <!-- -->RedSlider
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s red channel.">
+                            A slider to change the color&#x27;s red channel.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="GreenSlider">
+                            📄️<!-- -->
+                            <!-- -->GreenSlider
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A slider to change the color&#x27;s green channel."
+                          >
+                            A slider to change the color&#x27;s green channel.
+                          </p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="BlueSlider">
+                            📄️<!-- -->
+                            <!-- -->BlueSlider
+                          </h2>
+                          <p
+                            class="text--truncate cardDescription_PWke"
+                            title="A slider to change the color&#x27;s blue channel."
+                          >
+                            A slider to change the color&#x27;s blue channel.
+                          </p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a
+                        class="pagination-nav__link pagination-nav__link--prev"
+                        href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceCircular"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">LuminanceCircular</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">RedSlider</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/category/sliders/index.html b/docs/build/docs/category/sliders/index.html
index d3496f4..74ea293 100644
--- a/docs/build/docs/category/sliders/index.html
+++ b/docs/build/docs/category/sliders/index.html
@@ -1,16 +1,419 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Sliders | Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Sliders | Reanimated Color Picker"><meta data-rh="true" name="description" content="API documentation for Slider components"><meta data-rh="true" property="og:description" content="API documentation for Slider components"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/api"},{"@type":"ListItem","position":2,"name":"Sliders","item":"https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Collapse sidebar category &#x27;API&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/panels">Panels</a><button aria-label="Expand sidebar category &#x27;Panels&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible menu__list-item-collapsible--active"><a class="menu__link menu__link--sublist menu__link--active" aria-current="page" tabindex="0" href="/reanimated-color-picker/docs/category/sliders">Sliders</a><button aria-label="Collapse sidebar category &#x27;Sliders&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hue">Hue</a><button aria-label="Expand sidebar category &#x27;Hue&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsb">HSB</a><button aria-label="Expand sidebar category &#x27;HSB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/hsl">HSL</a><button aria-label="Expand sidebar category &#x27;HSL&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/rgb">RGB</a><button aria-label="Expand sidebar category &#x27;RGB&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/reanimated-color-picker/docs/category/preview">Preview</a><button aria-label="Expand sidebar category &#x27;Preview&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="generatedIndexPage_vN6x"><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/reanimated-color-picker/docs/category/api"><span>API</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Sliders</span></li></ul></nav><header><h1 class="title_kItE">Sliders</h1><p>API documentation for Slider components</p></header><article class="margin-top--lg"><section class="row"><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/hue"><h2 class="text--truncate cardTitle_rnsV" title="Hue">🗃️<!-- --> <!-- -->Hue</h2><p class="text--truncate cardDescription_PWke" title="2 items">2 items</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/hsb"><h2 class="text--truncate cardTitle_rnsV" title="HSB">🗃️<!-- --> <!-- -->HSB</h2><p class="text--truncate cardDescription_PWke" title="2 items">2 items</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/hsl"><h2 class="text--truncate cardTitle_rnsV" title="HSL">🗃️<!-- --> <!-- -->HSL</h2><p class="text--truncate cardDescription_PWke" title="3 items">3 items</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/rgb"><h2 class="text--truncate cardTitle_rnsV" title="RGB">🗃️<!-- --> <!-- -->RGB</h2><p class="text--truncate cardDescription_PWke" title="3 items">3 items</p></a></article><article class="docCardListItem_W1sv col col--6"><a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"><h2 class="text--truncate cardTitle_rnsV" title="OpacitySlider">📄️<!-- --> <!-- -->OpacitySlider</h2><p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s opacity.">A slider to change the color&#x27;s opacity.</p></a></article></section></article><footer class="margin-top--md"><nav class="pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/reanimated-color-picker/docs/API/Panels/Panel5"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Panel5</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/category/hue"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Hue</div></a></nav></footer></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Sliders | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Sliders | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="API documentation for Slider components" />
+    <meta data-rh="true" property="og:description" content="API documentation for Slider components" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"
+      hreflang="en"
+    />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/category/sliders"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/intro">Introduction</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item">
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist menu__link--active"
+                            aria-expanded="true"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Collapse sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                        <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                          <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
+                            <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/ColorPicker"
+                              >ColorPicker Wrapper</a
+                            >
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/panels"
+                                >Panels</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Panels&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                          <li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item">
+                            <div class="menu__list-item-collapsible menu__list-item-collapsible--active">
+                              <a
+                                class="menu__link menu__link--sublist menu__link--active"
+                                aria-current="page"
+                                aria-expanded="true"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/sliders"
+                                >Sliders</a
+                              ><button
+                                aria-label="Collapse sidebar category &#x27;Sliders&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                            <ul style="display: block; overflow: visible; height: auto" class="menu__list">
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hue"
+                                    >Hue</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;Hue&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsb"
+                                    >HSB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/hsl"
+                                    >HSL</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;HSL&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li
+                                class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"
+                              >
+                                <div class="menu__list-item-collapsible">
+                                  <a
+                                    class="menu__link menu__link--sublist"
+                                    aria-expanded="false"
+                                    tabindex="0"
+                                    href="/reanimated-color-picker/docs/category/rgb"
+                                    >RGB</a
+                                  ><button
+                                    aria-label="Expand sidebar category &#x27;RGB&#x27;"
+                                    type="button"
+                                    class="clean-btn menu__caret"
+                                  ></button>
+                                </div>
+                              </li>
+                              <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item">
+                                <a class="menu__link" tabindex="0" href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                                  >OpacitySlider</a
+                                >
+                              </li>
+                            </ul>
+                          </li>
+                          <li
+                            class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"
+                          >
+                            <div class="menu__list-item-collapsible">
+                              <a
+                                class="menu__link menu__link--sublist"
+                                aria-expanded="false"
+                                tabindex="0"
+                                href="/reanimated-color-picker/docs/category/preview"
+                                >Preview</a
+                              ><button
+                                aria-label="Expand sidebar category &#x27;Preview&#x27;"
+                                type="button"
+                                class="clean-btn menu__caret"
+                              ></button>
+                            </div>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="generatedIndexPage_vN6x">
+                  <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                    <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                      <li class="breadcrumbs__item">
+                        <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                          ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                            <path
+                              d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                              fill="currentColor"
+                            ></path></svg
+                        ></a>
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item"
+                      >
+                        <a class="breadcrumbs__link" itemprop="item" href="/reanimated-color-picker/docs/category/api"
+                          ><span itemprop="name">API</span></a
+                        ><meta itemprop="position" content="1" />
+                      </li>
+                      <li
+                        itemscope=""
+                        itemprop="itemListElement"
+                        itemtype="https://schema.org/ListItem"
+                        class="breadcrumbs__item breadcrumbs__item--active"
+                      >
+                        <span class="breadcrumbs__link" itemprop="name">Sliders</span><meta itemprop="position" content="2" />
+                      </li>
+                    </ul>
+                  </nav>
+                  <header>
+                    <h1 class="title_kItE">Sliders</h1>
+                    <p>API documentation for Slider components</p>
+                  </header>
+                  <article class="margin-top--lg">
+                    <section class="row list_eTzJ">
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/hue"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="Hue">
+                            🗃️<!-- -->
+                            <!-- -->Hue
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="2 items">2 items</p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/hsb"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="HSB">
+                            🗃️<!-- -->
+                            <!-- -->HSB
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="2 items">2 items</p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/hsl"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="HSL">
+                            🗃️<!-- -->
+                            <!-- -->HSL
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="3 items">3 items</p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a class="card padding--lg cardContainer_fWXF" href="/reanimated-color-picker/docs/category/rgb"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="RGB">
+                            🗃️<!-- -->
+                            <!-- -->RGB
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="3 items">3 items</p></a
+                        >
+                      </article>
+                      <article class="col col--6 margin-bottom--lg">
+                        <a
+                          class="card padding--lg cardContainer_fWXF"
+                          href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider"
+                          ><h2 class="text--truncate cardTitle_rnsV" title="OpacitySlider">
+                            📄️<!-- -->
+                            <!-- -->OpacitySlider
+                          </h2>
+                          <p class="text--truncate cardDescription_PWke" title="A slider to change the color&#x27;s opacity.">
+                            A slider to change the color&#x27;s opacity.
+                          </p></a
+                        >
+                      </article>
+                    </section>
+                  </article>
+                  <footer class="margin-top--lg">
+                    <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                      <a
+                        class="pagination-nav__link pagination-nav__link--prev"
+                        href="/reanimated-color-picker/docs/API/Panels/Panel5"
+                        ><div class="pagination-nav__sublabel">Previous</div>
+                        <div class="pagination-nav__label">Panel5</div></a
+                      ><a
+                        class="pagination-nav__link pagination-nav__link--next"
+                        href="/reanimated-color-picker/docs/category/hue"
+                        ><div class="pagination-nav__sublabel">Next</div>
+                        <div class="pagination-nav__label">Hue</div></a
+                      >
+                    </nav>
+                  </footer>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/docs/intro/index.html b/docs/build/docs/intro/index.html
index e6afc33..56bd75a 100644
--- a/docs/build/docs/intro/index.html
+++ b/docs/build/docs/intro/index.html
@@ -1,95 +1,515 @@
 <!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-intro" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/intro"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Reanimated Color Picker"><meta data-rh="true" name="description" content="- A Pure JavaScript Color Picker for React Native."><meta data-rh="true" property="og:description" content="- A Pure JavaScript Color Picker for React Native."><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/intro"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/intro" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/intro" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Introduction","item":"https://alabsi91.github.io/reanimated-color-picker/docs/intro"}]}</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/reanimated-color-picker/docs/category/api">API</a><button aria-label="Expand sidebar category &#x27;API&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Introduction</span></li></ul></nav><div class="theme-doc-markdown markdown"><header><h1>Reanimated Color Picker</h1></header>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="--a-pure-javascript-color-picker-for-react-native">- A Pure JavaScript Color Picker for React Native.<a href="#--a-pure-javascript-color-picker-for-react-native" class="hash-link" aria-label="Direct link to - A Pure JavaScript Color Picker for React Native." title="Direct link to - A Pure JavaScript Color Picker for React Native.">​</a></h4>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="--highly-customizable">- Highly customizable.<a href="#--highly-customizable" class="hash-link" aria-label="Direct link to - Highly customizable." title="Direct link to - Highly customizable.">​</a></h4>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="--supports-ios-android-expo-and-web-platforms">- Supports IOS, Android, Expo, and Web platforms.<a href="#--supports-ios-android-expo-and-web-platforms" class="hash-link" aria-label="Direct link to - Supports IOS, Android, Expo, and Web platforms." title="Direct link to - Supports IOS, Android, Expo, and Web platforms.">​</a></h4>
-<h4 class="anchor anchorWithStickyNavbar_LWe7" id="--supports-right-to-left-rtl-layouts">- Supports right-to-left (RTL) layouts.<a href="#--supports-right-to-left-rtl-layouts" class="hash-link" aria-label="Direct link to - Supports right-to-left (RTL) layouts." title="Direct link to - Supports right-to-left (RTL) layouts.">​</a></h4>
-<div class="example-images"><p><img decoding="async" loading="lazy" alt="Example_1" src="/reanimated-color-picker/assets/images/example_1-0ed7e534ba652c042cf6754d8c149bef.png" width="240" height="352" class="img_ev3q">
-<img decoding="async" loading="lazy" alt="Example_7" src="/reanimated-color-picker/assets/images/example_7-f6591b25248729dcb1bef359e1802215.png" width="244" height="352" class="img_ev3q"></p></div>
-<div class="example-images"><p><img decoding="async" loading="lazy" alt="Example_2" src="/reanimated-color-picker/assets/images/example_2-350479b77ee618f64f2fdcb3827e8d08.png" width="240" height="340" class="img_ev3q"> <img decoding="async" loading="lazy" alt="Example_3" src="/reanimated-color-picker/assets/images/example_3-174fa0683db3c8e470687e7c3b50c423.png" width="240" height="340" class="img_ev3q"></p></div>
-<div class="example-images"><p><img decoding="async" loading="lazy" alt="Example_4" src="/reanimated-color-picker/assets/images/example_4-3902fe7cb0699213de82952799f49181.png" width="240" height="434" class="img_ev3q"> <img decoding="async" loading="lazy" alt="Example_5" src="/reanimated-color-picker/assets/images/example_5-cef58d35c07395a6f562cdb3c417ee54.png" width="240" height="435" class="img_ev3q"></p></div>
-<div class="example-images"><p><img decoding="async" loading="lazy" alt="Example_8" src="/reanimated-color-picker/assets/images/example_8-128db863c06d8621e2d3f7181c003866.png" width="240" height="340" class="img_ev3q"> <img decoding="async" loading="lazy" alt="Example_9" src="/reanimated-color-picker/assets/images/example_9-37a112525d3cfa90f12d537be5d1fbd4.png" width="217" height="340" class="img_ev3q"></p></div>
-<div class="example-images"><p><img decoding="async" loading="lazy" alt="Example_10" src="/reanimated-color-picker/assets/images/example_10-731b20b59e6c13fa697c1951b32f1616.png" width="252" height="375" class="img_ev3q"> <img decoding="async" loading="lazy" alt="Example_11" src="/reanimated-color-picker/assets/images/example_11-21b588267bf89dfaa5f67cc80507a7ec.png" width="228" height="375" class="img_ev3q"></p></div>
-<div class="example-images"><p><img decoding="async" loading="lazy" alt="Example_6" src="/reanimated-color-picker/assets/images/example_6-7747b4e33a80534c65d19bf5daef8399.png" width="240" height="278" class="img_ev3q"> <img decoding="async" loading="lazy" alt="Example_12" src="/reanimated-color-picker/assets/images/example_12-ee0469e990f3ae0d1507fb1466bb7c3e.png" width="230" height="278" class="img_ev3q"></p></div>
-<h1>Table of contents</h1>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="1-installation">1. <a href="/reanimated-color-picker/docs/Installation">Installation</a><a href="#1-installation" class="hash-link" aria-label="Direct link to 1-installation" title="Direct link to 1-installation">​</a></h3>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="2-usage">2. <a href="/reanimated-color-picker/docs/Usage">Usage</a><a href="#2-usage" class="hash-link" aria-label="Direct link to 2-usage" title="Direct link to 2-usage">​</a></h3>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="3-api">3. <a href="/reanimated-color-picker/docs/category/api">API</a><a href="#3-api" class="hash-link" aria-label="Direct link to 3-api" title="Direct link to 3-api">​</a></h3>
-<ul>
-<li>
-<p><a href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></p>
-</li>
-<li>
-<p><a href="/reanimated-color-picker/docs/category/Panels"><strong>Panels</strong></a></p>
-<ul>
-<li><a href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li>
-</ul>
-</li>
-<li>
-<p><a href="/reanimated-color-picker/docs/category/Sliders"><strong>Sliders</strong></a></p>
-<ul>
-<li>
-<p><a href="/reanimated-color-picker/docs/category/Hue"><strong>Hue</strong></a></p>
-<ul>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider">HueSlider</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular">HueCircular</a></li>
-</ul>
-</li>
-<li>
-<p><a href="/reanimated-color-picker/docs/category/HSB"><strong>HSB</strong></a></p>
-<ul>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider">BrightnessSlider</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider">SaturationSlider</a></li>
-</ul>
-</li>
-<li>
-<p><a href="/reanimated-color-picker/docs/category/HSL"><strong>HSL</strong></a></p>
-<ul>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider">LuminanceSlider</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider">HSLSaturationSlider</a></li>
-</ul>
-</li>
-<li>
-<p><a href="/reanimated-color-picker/docs/category/RGB"><strong>HSL</strong></a></p>
-<ul>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider">RedSlider</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider">GreenSlider</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider">BlueSlider</a></li>
-</ul>
-</li>
-<li>
-<p><a href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></p>
-</li>
-<li>
-<p><a href="/reanimated-color-picker/docs/category/Preview"><strong>Preview</strong></a></p>
-<ul>
-<li><a href="/reanimated-color-picker/docs/API/Preview">Preview</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li>
-<li><a href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li>
-</ul>
-</li>
-</ul>
-</li>
-</ul>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="4-colorkit">4. <a href="/reanimated-color-picker/docs/ColorKit">ColorKit</a><a href="#4-colorkit" class="hash-link" aria-label="Direct link to 4-colorkit" title="Direct link to 4-colorkit">​</a></h3>
-<h3 class="anchor anchorWithStickyNavbar_LWe7" id="5-examples">5. <a href="/reanimated-color-picker/docs/Examples">Examples</a><a href="#5-examples" class="hash-link" aria-label="Direct link to 5-examples" title="Direct link to 5-examples">​</a></h3></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href="/reanimated-color-picker/docs/Installation"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Installation</div></a></nav></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+<html
+  lang="en"
+  dir="ltr"
+  class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-intro"
+  data-has-hydrated="false"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Reanimated Color Picker | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/docs/intro" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" name="docusaurus_version" content="current" />
+    <meta data-rh="true" name="docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" name="docsearch:version" content="current" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current" />
+    <meta data-rh="true" property="og:title" content="Reanimated Color Picker | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="- A Pure JavaScript Color Picker for React Native." />
+    <meta data-rh="true" property="og:description" content="- A Pure JavaScript Color Picker for React Native." />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/docs/intro" />
+    <link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/docs/intro" hreflang="en" />
+    <link
+      data-rh="true"
+      rel="alternate"
+      href="https://alabsi91.github.io/reanimated-color-picker/docs/intro"
+      hreflang="x-default"
+    />
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a
+              aria-current="page"
+              class="navbar__item navbar__link navbar__link--active"
+              href="/reanimated-color-picker/docs/intro"
+              >Docs</a
+            >
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <div class="docsWrapper_hBAB">
+          <button
+            aria-label="Scroll back to top"
+            class="clean-btn theme-back-to-top-button backToTopButton_sjWU"
+            type="button"
+          ></button>
+          <div class="docRoot_UBD9">
+            <aside class="theme-doc-sidebar-container docSidebarContainer_YfHR">
+              <div class="sidebarViewport_aRkj">
+                <div class="sidebar_njMd">
+                  <nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG">
+                    <ul class="theme-doc-sidebar-menu menu__list">
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link menu__link--active" aria-current="page" href="/reanimated-color-picker/docs/intro"
+                          >Introduction</a
+                        >
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Installation">Installation</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Usage">Usage</a>
+                      </li>
+                      <li
+                        class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"
+                      >
+                        <div class="menu__list-item-collapsible">
+                          <a
+                            class="menu__link menu__link--sublist"
+                            aria-expanded="false"
+                            href="/reanimated-color-picker/docs/category/api"
+                            >API</a
+                          ><button
+                            aria-label="Expand sidebar category &#x27;API&#x27;"
+                            type="button"
+                            class="clean-btn menu__caret"
+                          ></button>
+                        </div>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/ColorKit">ColorKit</a>
+                      </li>
+                      <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
+                        <a class="menu__link" href="/reanimated-color-picker/docs/Examples">Examples</a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            </aside>
+            <main class="docMainContainer_TBSr">
+              <div class="container padding-top--md padding-bottom--lg">
+                <div class="row">
+                  <div class="col">
+                    <div class="docItemContainer_Djhp">
+                      <article>
+                        <nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs">
+                          <ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+                            <li class="breadcrumbs__item">
+                              <a aria-label="Home page" class="breadcrumbs__link" href="/reanimated-color-picker/"
+                                ><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT">
+                                  <path
+                                    d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
+                                    fill="currentColor"
+                                  ></path></svg
+                              ></a>
+                            </li>
+                            <li
+                              itemscope=""
+                              itemprop="itemListElement"
+                              itemtype="https://schema.org/ListItem"
+                              class="breadcrumbs__item breadcrumbs__item--active"
+                            >
+                              <span class="breadcrumbs__link" itemprop="name">Introduction</span
+                              ><meta itemprop="position" content="1" />
+                            </li>
+                          </ul>
+                        </nav>
+                        <div class="theme-doc-markdown markdown">
+                          <h1>Reanimated Color Picker</h1>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="--a-pure-javascript-color-picker-for-react-native">
+                            - A Pure JavaScript Color Picker for React Native.<a
+                              href="#--a-pure-javascript-color-picker-for-react-native"
+                              class="hash-link"
+                              aria-label="Direct link to - A Pure JavaScript Color Picker for React Native."
+                              title="Direct link to - A Pure JavaScript Color Picker for React Native."
+                              >​</a
+                            >
+                          </h4>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="--highly-customizable">
+                            - Highly customizable.<a
+                              href="#--highly-customizable"
+                              class="hash-link"
+                              aria-label="Direct link to - Highly customizable."
+                              title="Direct link to - Highly customizable."
+                              >​</a
+                            >
+                          </h4>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="--supports-ios-android-expo-and-web-platforms">
+                            - Supports IOS, Android, Expo, and Web platforms.<a
+                              href="#--supports-ios-android-expo-and-web-platforms"
+                              class="hash-link"
+                              aria-label="Direct link to - Supports IOS, Android, Expo, and Web platforms."
+                              title="Direct link to - Supports IOS, Android, Expo, and Web platforms."
+                              >​</a
+                            >
+                          </h4>
+                          <h4 class="anchor anchorWithStickyNavbar_LWe7" id="--supports-right-to-left-rtl-layouts">
+                            - Supports right-to-left (RTL) layouts.<a
+                              href="#--supports-right-to-left-rtl-layouts"
+                              class="hash-link"
+                              aria-label="Direct link to - Supports right-to-left (RTL) layouts."
+                              title="Direct link to - Supports right-to-left (RTL) layouts."
+                              >​</a
+                            >
+                          </h4>
+                          <div class="example-images">
+                            <p>
+                              <img
+                                loading="lazy"
+                                alt="Example_1"
+                                src="/reanimated-color-picker/assets/images/example_1-0ed7e534ba652c042cf6754d8c149bef.png"
+                                width="240"
+                                height="352"
+                                class="img_ev3q"
+                              />
+                              <img
+                                loading="lazy"
+                                alt="Example_7"
+                                src="/reanimated-color-picker/assets/images/example_7-f6591b25248729dcb1bef359e1802215.png"
+                                width="244"
+                                height="352"
+                                class="img_ev3q"
+                              />
+                            </p>
+                          </div>
+                          <div class="example-images">
+                            <p>
+                              <img
+                                loading="lazy"
+                                alt="Example_2"
+                                src="/reanimated-color-picker/assets/images/example_2-350479b77ee618f64f2fdcb3827e8d08.png"
+                                width="240"
+                                height="340"
+                                class="img_ev3q"
+                              />
+                              <img
+                                loading="lazy"
+                                alt="Example_3"
+                                src="/reanimated-color-picker/assets/images/example_3-174fa0683db3c8e470687e7c3b50c423.png"
+                                width="240"
+                                height="340"
+                                class="img_ev3q"
+                              />
+                            </p>
+                          </div>
+                          <div class="example-images">
+                            <p>
+                              <img
+                                loading="lazy"
+                                alt="Example_4"
+                                src="/reanimated-color-picker/assets/images/example_4-3902fe7cb0699213de82952799f49181.png"
+                                width="240"
+                                height="434"
+                                class="img_ev3q"
+                              />
+                              <img
+                                loading="lazy"
+                                alt="Example_5"
+                                src="/reanimated-color-picker/assets/images/example_5-cef58d35c07395a6f562cdb3c417ee54.png"
+                                width="240"
+                                height="435"
+                                class="img_ev3q"
+                              />
+                            </p>
+                          </div>
+                          <div class="example-images">
+                            <p>
+                              <img
+                                loading="lazy"
+                                alt="Example_8"
+                                src="/reanimated-color-picker/assets/images/example_8-128db863c06d8621e2d3f7181c003866.png"
+                                width="240"
+                                height="340"
+                                class="img_ev3q"
+                              />
+                              <img
+                                loading="lazy"
+                                alt="Example_9"
+                                src="/reanimated-color-picker/assets/images/example_9-37a112525d3cfa90f12d537be5d1fbd4.png"
+                                width="217"
+                                height="340"
+                                class="img_ev3q"
+                              />
+                            </p>
+                          </div>
+                          <div class="example-images">
+                            <p>
+                              <img
+                                loading="lazy"
+                                alt="Example_10"
+                                src="/reanimated-color-picker/assets/images/example_10-731b20b59e6c13fa697c1951b32f1616.png"
+                                width="252"
+                                height="375"
+                                class="img_ev3q"
+                              />
+                              <img
+                                loading="lazy"
+                                alt="Example_11"
+                                src="/reanimated-color-picker/assets/images/example_11-21b588267bf89dfaa5f67cc80507a7ec.png"
+                                width="228"
+                                height="375"
+                                class="img_ev3q"
+                              />
+                            </p>
+                          </div>
+                          <div class="example-images">
+                            <p>
+                              <img
+                                loading="lazy"
+                                alt="Example_6"
+                                src="/reanimated-color-picker/assets/images/example_6-7747b4e33a80534c65d19bf5daef8399.png"
+                                width="240"
+                                height="278"
+                                class="img_ev3q"
+                              />
+                              <img
+                                loading="lazy"
+                                alt="Example_12"
+                                src="/reanimated-color-picker/assets/images/example_12-ee0469e990f3ae0d1507fb1466bb7c3e.png"
+                                width="230"
+                                height="278"
+                                class="img_ev3q"
+                              />
+                            </p>
+                          </div>
+                          <h1>Table of contents</h1>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="1-installation">
+                            1. <a href="/reanimated-color-picker/docs/Installation">Installation</a
+                            ><a
+                              href="#1-installation"
+                              class="hash-link"
+                              aria-label="Direct link to 1-installation"
+                              title="Direct link to 1-installation"
+                              >​</a
+                            >
+                          </h3>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="2-usage">
+                            2. <a href="/reanimated-color-picker/docs/Usage">Usage</a
+                            ><a
+                              href="#2-usage"
+                              class="hash-link"
+                              aria-label="Direct link to 2-usage"
+                              title="Direct link to 2-usage"
+                              >​</a
+                            >
+                          </h3>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="3-api">
+                            3. <a href="/reanimated-color-picker/docs/category/api">API</a
+                            ><a href="#3-api" class="hash-link" aria-label="Direct link to 3-api" title="Direct link to 3-api"
+                              >​</a
+                            >
+                          </h3>
+                          <ul>
+                            <li>
+                              <p><a href="/reanimated-color-picker/docs/API/ColorPicker">ColorPicker Wrapper</a></p>
+                            </li>
+                            <li>
+                              <p>
+                                <a href="/reanimated-color-picker/docs/category/Panels"><strong>Panels</strong></a>
+                              </p>
+                              <ul>
+                                <li><a href="/reanimated-color-picker/docs/API/Panels/Panel1">Panel1</a></li>
+                                <li><a href="/reanimated-color-picker/docs/API/Panels/Panel2">Panel2</a></li>
+                                <li><a href="/reanimated-color-picker/docs/API/Panels/Panel3">Panel3</a></li>
+                                <li><a href="/reanimated-color-picker/docs/API/Panels/Panel4">Panel4</a></li>
+                                <li><a href="/reanimated-color-picker/docs/API/Panels/Panel5">Panel5</a></li>
+                              </ul>
+                            </li>
+                            <li>
+                              <p>
+                                <a href="/reanimated-color-picker/docs/category/Sliders"><strong>Sliders</strong></a>
+                              </p>
+                              <ul>
+                                <li>
+                                  <p>
+                                    <a href="/reanimated-color-picker/docs/category/Hue"><strong>Hue</strong></a>
+                                  </p>
+                                  <ul>
+                                    <li><a href="/reanimated-color-picker/docs/API/Sliders/Hue/HueSlider">HueSlider</a></li>
+                                    <li><a href="/reanimated-color-picker/docs/API/Sliders/Hue/HueCircular">HueCircular</a></li>
+                                  </ul>
+                                </li>
+                                <li>
+                                  <p>
+                                    <a href="/reanimated-color-picker/docs/category/HSB"><strong>HSB</strong></a>
+                                  </p>
+                                  <ul>
+                                    <li>
+                                      <a href="/reanimated-color-picker/docs/API/Sliders/HSB/BrightnessSlider"
+                                        >BrightnessSlider</a
+                                      >
+                                    </li>
+                                    <li>
+                                      <a href="/reanimated-color-picker/docs/API/Sliders/HSB/SaturationSlider"
+                                        >SaturationSlider</a
+                                      >
+                                    </li>
+                                  </ul>
+                                </li>
+                                <li>
+                                  <p>
+                                    <a href="/reanimated-color-picker/docs/category/HSL"><strong>HSL</strong></a>
+                                  </p>
+                                  <ul>
+                                    <li>
+                                      <a href="/reanimated-color-picker/docs/API/Sliders/HSL/LuminanceSlider">LuminanceSlider</a>
+                                    </li>
+                                    <li>
+                                      <a href="/reanimated-color-picker/docs/API/Sliders/HSL/HSLSaturationSlider"
+                                        >HSLSaturationSlider</a
+                                      >
+                                    </li>
+                                  </ul>
+                                </li>
+                                <li>
+                                  <p>
+                                    <a href="/reanimated-color-picker/docs/category/RGB"><strong>HSL</strong></a>
+                                  </p>
+                                  <ul>
+                                    <li><a href="/reanimated-color-picker/docs/API/Sliders/RGB/RedSlider">RedSlider</a></li>
+                                    <li><a href="/reanimated-color-picker/docs/API/Sliders/RGB/GreenSlider">GreenSlider</a></li>
+                                    <li><a href="/reanimated-color-picker/docs/API/Sliders/RGB/BlueSlider">BlueSlider</a></li>
+                                  </ul>
+                                </li>
+                                <li>
+                                  <p><a href="/reanimated-color-picker/docs/API/Sliders/OpacitySlider">OpacitySlider</a></p>
+                                </li>
+                                <li>
+                                  <p>
+                                    <a href="/reanimated-color-picker/docs/category/Preview"><strong>Preview</strong></a>
+                                  </p>
+                                  <ul>
+                                    <li><a href="/reanimated-color-picker/docs/API/Preview">Preview</a></li>
+                                    <li><a href="/reanimated-color-picker/docs/API/Preview/PreviewText">PreviewText</a></li>
+                                    <li><a href="/reanimated-color-picker/docs/API/Preview/InputWidget">InputWidget</a></li>
+                                    <li><a href="/reanimated-color-picker/docs/API/Preview/Swatches">Swatches</a></li>
+                                    <li><a href="/reanimated-color-picker/docs/API/Preview/ExtraThumb">ExtraThumb</a></li>
+                                  </ul>
+                                </li>
+                              </ul>
+                            </li>
+                          </ul>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="4-colorkit">
+                            4. <a href="/reanimated-color-picker/docs/ColorKit">ColorKit</a
+                            ><a
+                              href="#4-colorkit"
+                              class="hash-link"
+                              aria-label="Direct link to 4-colorkit"
+                              title="Direct link to 4-colorkit"
+                              >​</a
+                            >
+                          </h3>
+                          <h3 class="anchor anchorWithStickyNavbar_LWe7" id="5-examples">
+                            5. <a href="/reanimated-color-picker/docs/Examples">Examples</a
+                            ><a
+                              href="#5-examples"
+                              class="hash-link"
+                              aria-label="Direct link to 5-examples"
+                              title="Direct link to 5-examples"
+                              >​</a
+                            >
+                          </h3>
+                        </div>
+                      </article>
+                      <nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages">
+                        <a
+                          class="pagination-nav__link pagination-nav__link--next"
+                          href="/reanimated-color-picker/docs/Installation"
+                          ><div class="pagination-nav__sublabel">Next</div>
+                          <div class="pagination-nav__label">Installation</div></a
+                        >
+                      </nav>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/build/index.html b/docs/build/index.html
index cebd37d..6c0ede1 100644
--- a/docs/build/index.html
+++ b/docs/build/index.html
@@ -1,16 +1,135 @@
 <!doctype html>
 <html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.8.0">
-<title data-rh="true">Reanimated Color Picker</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" name="keywords" content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"><meta data-rh="true" property="og:title" content="Reanimated Color Picker"><meta data-rh="true" name="description" content="A Pure JavaScript Color Picker for React Native"><meta data-rh="true" property="og:description" content="A Pure JavaScript Color Picker for React Native"><link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/" hreflang="en"><link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/" hreflang="x-default"><script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/reanimated-color-picker/</span> </p>\n   <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),o=window.location.pathname,s="/"===o.substr(-1)?o:o+"/";e.innerHTML=s}document.addEventListener("DOMContentLoaded",(function(){void 0===window.docusaurus&&insertBanner()}))</script><script src="https://snack.expo.dev/embed.js" async></script><link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.72fd27f4.css">
-<script src="/reanimated-color-picker/assets/js/runtime~main.0577ba40.js" defer="defer"></script>
-<script src="/reanimated-color-picker/assets/js/main.f7645bf4.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
-<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
-</defs></svg>
-<script>!function(){var t="dark";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a><a class="navbar__item navbar__link" href="/reanimated-color-picker/docs/intro">Docs</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/alabsi91/reanimated-color-picker" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><header class="heroBanner_qdFl"><div class="container"><h1 class="hero__title" style="color:black;text-shadow:0px 0px 5px rgb(250,250,250,1)">Reanimated Color Picker</h1><p class="hero__subtitle" style="color:black;text-shadow:0px 0px 5px rgb(250,250,250,1)">A Pure JavaScript Color Picker for React Native</p><a class="button_JGCe" href="/reanimated-color-picker/docs/intro">Documentation</a></div></header></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div></div></footer></div>
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="generator" content="Docusaurus v3.1.0" />
+    <title data-rh="true">Reanimated Color Picker | Reanimated Color Picker</title>
+    <meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:url" content="https://alabsi91.github.io/reanimated-color-picker/" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta data-rh="true" name="docusaurus_locale" content="en" />
+    <meta data-rh="true" name="docusaurus_tag" content="default" />
+    <meta data-rh="true" name="docsearch:language" content="en" />
+    <meta data-rh="true" name="docsearch:docusaurus_tag" content="default" />
+    <meta
+      data-rh="true"
+      name="keywords"
+      content="react native, react-native, color picker, Android, IOS, WEB, Expo, color, picker, slider, wheel, swatches, palette"
+    />
+    <meta data-rh="true" property="og:title" content="Reanimated Color Picker | Reanimated Color Picker" />
+    <meta data-rh="true" name="description" content="A Pure JavaScript Color Picker for React Native" />
+    <meta data-rh="true" property="og:description" content="A Pure JavaScript Color Picker for React Native" />
+    <link data-rh="true" rel="icon" href="/reanimated-color-picker/img/favicon.ico" />
+    <link data-rh="true" rel="canonical" href="https://alabsi91.github.io/reanimated-color-picker/" />
+    <link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/" hreflang="en" />
+    <link data-rh="true" rel="alternate" href="https://alabsi91.github.io/reanimated-color-picker/" hreflang="x-default" />
+    <script data-rh="true">
+      function insertBanner() {
+        var n = document.createElement('div');
+        n.id = '__docusaurus-base-url-issue-banner-container';
+        (n.innerHTML =
+          '\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/reanimated-color-picker/</span> </p>\n   <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n'),
+          document.body.prepend(n);
+        var e = document.getElementById('__docusaurus-base-url-issue-banner-suggestion-container'),
+          o = window.location.pathname,
+          s = '/' === o.substr(-1) ? o : o + '/';
+        e.innerHTML = s;
+      }
+      document.addEventListener('DOMContentLoaded', function () {
+        void 0 === window.docusaurus && insertBanner();
+      });
+    </script>
+    <script src="https://snack.expo.dev/embed.js" async></script>
+    <link rel="stylesheet" href="/reanimated-color-picker/assets/css/styles.1fc1ae05.css" />
+    <script src="/reanimated-color-picker/assets/js/runtime~main.0a48d42a.js" defer="defer"></script>
+    <script src="/reanimated-color-picker/assets/js/main.a2c80363.js" defer="defer"></script>
+  </head>
+  <body class="navigation-with-keyboard">
+    <script>
+      !(function () {
+        function t(t) {
+          document.documentElement.setAttribute('data-theme', t);
+        }
+        var e =
+          (function () {
+            try {
+              return new URLSearchParams(window.location.search).get('docusaurus-theme');
+            } catch (t) {}
+          })() ||
+          (function () {
+            try {
+              return localStorage.getItem('theme');
+            } catch (t) {}
+          })();
+        t(null !== e ? e : 'dark');
+      })(),
+        (function () {
+          try {
+            const c = new URLSearchParams(window.location.search).entries();
+            for (var [t, e] of c)
+              if (t.startsWith('docusaurus-data-')) {
+                var a = t.replace('docusaurus-data-', 'data-');
+                document.documentElement.setAttribute(a, e);
+              }
+          } catch (t) {}
+        })();
+    </script>
+    <div id="__docusaurus">
+      <div role="region" aria-label="Skip to main content">
+        <a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a>
+      </div>
+      <nav aria-label="Main" class="navbar navbar--fixed-top">
+        <div class="navbar__inner">
+          <div class="navbar__items">
+            <button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button">
+              <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  d="M4 7h22M4 15h22M4 23h22"
+                ></path>
+              </svg></button
+            ><a class="navbar__brand" href="/reanimated-color-picker/"><b class="navbar__title text--truncate">Home</b></a
+            ><a class="navbar__item navbar__link" href="/reanimated-color-picker/docs/intro">Docs</a>
+          </div>
+          <div class="navbar__items navbar__items--right">
+            <a
+              href="https://github.com/alabsi91/reanimated-color-picker"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="navbar__item navbar__link"
+              >GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU">
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path></svg
+            ></a>
+            <div class="navbarSearchContainer_Bca1"></div>
+          </div>
+        </div>
+        <div role="presentation" class="navbar-sidebar__backdrop"></div>
+      </nav>
+      <div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0">
+        <header class="heroBanner_qdFl">
+          <div class="container">
+            <h1 class="hero__title" style="color: black; text-shadow: 0px 0px 5px rgb(250, 250, 250, 1)">
+              Reanimated Color Picker
+            </h1>
+            <p class="hero__subtitle" style="color: black; text-shadow: 0px 0px 5px rgb(250, 250, 250, 1)">
+              A Pure JavaScript Color Picker for React Native
+            </p>
+            <a class="button_JGCe" href="/reanimated-color-picker/docs/intro">Documentation</a>
+          </div>
+        </header>
+      </div>
+      <footer class="footer footer--dark">
+        <div class="container container-fluid">
+          <div class="footer__bottom text--center"><div class="footer__copyright">Released under the MIT License.</div></div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>

From a819675607c8a3c0e6786124a4b7791b0de1105a Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 11 Sep 2025 13:09:22 +0300
Subject: [PATCH 6/9] chore: update ExampleLatest dependencies to latest
 versions

---
 .../android/app/src/debug/AndroidManifest.xml |    9 -
 .../android/app/src/main/AndroidManifest.xml  |    1 +
 ExampleLatest/android/build.gradle            |    6 +-
 ExampleLatest/android/gradle.properties       |    5 +
 .../gradle/wrapper/gradle-wrapper.properties  |    2 +-
 ExampleLatest/metro.config.js                 |   20 +-
 ExampleLatest/package-lock.json               | 1558 ++++++-----------
 ExampleLatest/package.json                    |   26 +-
 ExampleLatest/tsconfig.json                   |    8 +-
 9 files changed, 595 insertions(+), 1040 deletions(-)
 delete mode 100755 ExampleLatest/android/app/src/debug/AndroidManifest.xml

diff --git a/ExampleLatest/android/app/src/debug/AndroidManifest.xml b/ExampleLatest/android/app/src/debug/AndroidManifest.xml
deleted file mode 100755
index eb98c01..0000000
--- a/ExampleLatest/android/app/src/debug/AndroidManifest.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-        android:usesCleartextTraffic="true"
-        tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning"/>
-</manifest>
diff --git a/ExampleLatest/android/app/src/main/AndroidManifest.xml b/ExampleLatest/android/app/src/main/AndroidManifest.xml
index 5ddc47b..4c85745 100755
--- a/ExampleLatest/android/app/src/main/AndroidManifest.xml
+++ b/ExampleLatest/android/app/src/main/AndroidManifest.xml
@@ -9,6 +9,7 @@
     android:roundIcon="@mipmap/ic_launcher"
     android:allowBackup="false"
     android:theme="@style/Theme.App.Starting"
+    android:usesCleartextTraffic="${usesCleartextTraffic}"
     android:supportsRtl="true">
 
     <activity
diff --git a/ExampleLatest/android/build.gradle b/ExampleLatest/android/build.gradle
index b4f3ad9..dad99b0 100755
--- a/ExampleLatest/android/build.gradle
+++ b/ExampleLatest/android/build.gradle
@@ -1,9 +1,9 @@
 buildscript {
     ext {
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 35
+        compileSdkVersion = 36
+        targetSdkVersion = 36
         ndkVersion = "27.1.12297006"
         kotlinVersion = "2.1.20"
     }
diff --git a/ExampleLatest/android/gradle.properties b/ExampleLatest/android/gradle.properties
index 5e24e3a..87585a6 100755
--- a/ExampleLatest/android/gradle.properties
+++ b/ExampleLatest/android/gradle.properties
@@ -37,3 +37,8 @@ newArchEnabled=true
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=false
\ No newline at end of file
diff --git a/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties b/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties
index 002b867..d4081da 100755
--- a/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties
+++ b/ExampleLatest/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/ExampleLatest/metro.config.js b/ExampleLatest/metro.config.js
index 2906426..f034415 100755
--- a/ExampleLatest/metro.config.js
+++ b/ExampleLatest/metro.config.js
@@ -1,10 +1,28 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
 const escape = require('escape-string-regexp');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
 
 const root = path.resolve(__dirname, '..');
 
+const list = [/\/__tests__\/.*/];
+
+function escapeRegExp(pattern) {
+  if (Object.prototype.toString.call(pattern) === '[object RegExp]') {
+    return pattern.source.replace(/\/|\\\//g, '\\' + path.sep);
+  }
+
+  if (typeof pattern === 'string') {
+    const escaped = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+    return escaped.replaceAll('/', '\\' + path.sep);
+  }
+
+  throw new Error('Unexpected exclusion pattern: ' + pattern);
+}
+
+function exclusionList(additionalExclusions) {
+  return new RegExp('(' + (additionalExclusions || []).concat(list).map(escapeRegExp).join('|') + ')$');
+}
+
 function createRegExp(pkg) {
   return new RegExp(`^${escape(path.join(root, 'node_modules', pkg))}\\/.*$`);
 }
diff --git a/ExampleLatest/package-lock.json b/ExampleLatest/package-lock.json
index 2305d8f..0599b9e 100755
--- a/ExampleLatest/package-lock.json
+++ b/ExampleLatest/package-lock.json
@@ -9,22 +9,22 @@
       "version": "0.0.1",
       "dependencies": {
         "react": "19.1.0",
-        "react-native": "0.80.1",
-        "react-native-gesture-handler": "^2.27.2",
-        "react-native-reanimated": "^4.0.0",
-        "react-native-worklets": "^0.4.0"
+        "react-native": "0.81.4",
+        "react-native-gesture-handler": "^2.28.0",
+        "react-native-reanimated": "^4.1.0",
+        "react-native-worklets": "^0.5.1"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
         "@babel/preset-env": "^7.25.3",
         "@babel/runtime": "^7.25.0",
-        "@react-native-community/cli": "19.1.0",
-        "@react-native-community/cli-platform-android": "19.0.0",
-        "@react-native-community/cli-platform-ios": "19.0.0",
-        "@react-native/babel-preset": "0.80.1",
-        "@react-native/eslint-config": "0.80.1",
-        "@react-native/metro-config": "0.80.1",
-        "@react-native/typescript-config": "0.80.1",
+        "@react-native-community/cli": "20.0.0",
+        "@react-native-community/cli-platform-android": "12.0.0",
+        "@react-native-community/cli-platform-ios": "12.0.0",
+        "@react-native/babel-preset": "0.81.4",
+        "@react-native/eslint-config": "0.81.4",
+        "@react-native/metro-config": "0.81.4",
+        "@react-native/typescript-config": "0.81.4",
         "@types/jest": "^29.5.13",
         "@types/react": "^19.1.0",
         "@types/react-test-renderer": "^19.1.0",
@@ -34,10 +34,10 @@
         "jest": "^29.6.3",
         "prettier": "3.5.3",
         "react-test-renderer": "19.1.0",
-        "typescript": "5.0.4"
+        "typescript": "5.8.3"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -126,13 +126,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.0.tgz",
-      "integrity": "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==",
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.0",
-        "@babel/types": "^7.28.0",
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -211,7 +211,7 @@
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.4.tgz",
       "integrity": "sha512-jljfR1rGnXXNWnmQg2K3+bvhkxB51Rl32QRaOTuwwjviGrHzIbSc8+x9CpraDtbT7mfyjXObULP4w/adunNwAw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.22.6",
@@ -301,7 +301,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz",
       "integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -376,7 +376,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz",
       "integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
@@ -401,12 +401,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
-      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.0"
+        "@babel/types": "^7.28.4"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -503,7 +503,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.25.9.tgz",
       "integrity": "sha512-ykqgwNfSnNOB+C8fV5X4mG3AVmvu+WVxcaU9xHHtBb7PCrPeweMmPjGsn8eMaeJg6SJuoUuZENeeSWaarWqonQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -583,7 +583,7 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
       "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -596,7 +596,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.25.9.tgz",
       "integrity": "sha512-9MhJ/SMTsVqsd69GyQg89lYR4o9T+oDGv5F6IsigxxqFVOyR/IflDLYP8WDI1l8fkhNGGktqkvL5qwNCtGEpgQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -612,7 +612,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.26.0.tgz",
       "integrity": "sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -847,7 +847,7 @@
       "version": "7.26.8",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz",
       "integrity": "sha512-He9Ej2X7tNf2zdKMAGOsmg2MrFc+hfoAhd3po4cWfo/NWjzEAKa0oQruj1ROVUdl0e6fb6/kE/G3SSxE0lRJOg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.26.5",
@@ -865,7 +865,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz",
       "integrity": "sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
@@ -899,7 +899,7 @@
       "version": "7.27.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.27.0.tgz",
       "integrity": "sha512-u1jGphZ8uDI2Pj/HJj6YQ6XQLZCNjOlprjxB5SVz6rq2T6SwAR+CdrWK0CP7F+9rDVMXdB0+r6Am5G5aobOjAQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.26.5"
@@ -968,7 +968,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz",
       "integrity": "sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -985,7 +985,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz",
       "integrity": "sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1099,7 +1099,7 @@
       "version": "7.26.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.26.5.tgz",
       "integrity": "sha512-eGK26RsbIkYUns3Y8qKl362juDDYK+wEdPGHGrhzUl6CewZFo55VZ7hg+CyMFU4dd5QQakBN86nBMpRsFpRvbQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.26.5",
@@ -1116,7 +1116,7 @@
       "version": "7.26.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.26.9.tgz",
       "integrity": "sha512-Hry8AusVm8LW5BVFgiyUReuoGzPUpdHQQqJY5bZnbbf+ngOHWuCuYFKw/BqaaWlvEUrF91HMhDtEaI1hZzNbLg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.26.5",
@@ -1133,7 +1133,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz",
       "integrity": "sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -1167,7 +1167,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz",
       "integrity": "sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1183,7 +1183,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz",
       "integrity": "sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1284,7 +1284,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz",
       "integrity": "sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1332,7 +1332,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz",
       "integrity": "sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1348,7 +1348,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz",
       "integrity": "sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -1383,7 +1383,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz",
       "integrity": "sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1415,7 +1415,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz",
       "integrity": "sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1431,7 +1431,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz",
       "integrity": "sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -1448,7 +1448,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz",
       "integrity": "sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1482,7 +1482,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz",
       "integrity": "sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1498,7 +1498,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz",
       "integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1518,7 +1518,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz",
       "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1534,7 +1534,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz",
       "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1550,7 +1550,7 @@
       "version": "7.27.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.27.0.tgz",
       "integrity": "sha512-LX/vCajUJQDqE7Aum/ELUMZAY19+cDpghxrnyt5I1tV6X5PyC86AOoWXWFYFeIvauyeSA6/ktn4tQVn/3ZifsA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.26.5",
@@ -1600,7 +1600,7 @@
       "version": "7.26.10",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.26.10.tgz",
       "integrity": "sha512-NWaL2qG6HRpONTnj4JvDU6th4jYeZOJgu3QhmFTCihib0ermtOJqktA5BduGm3suhhVe9EMP9c9+mfJ/I9slqw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
@@ -1636,7 +1636,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz",
       "integrity": "sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1653,7 +1653,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz",
       "integrity": "sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1945,27 +1945,27 @@
     },
     "node_modules/@babel/traverse--for-generate-function-map": {
       "name": "@babel/traverse",
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
-      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
+      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.27.3",
-        "@babel/parser": "^7.27.4",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.4",
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.27.3",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
+        "@babel/types": "^7.28.4",
+        "debug": "^4.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.1",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
-      "integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -2385,41 +2385,6 @@
         }
       }
     },
-    "node_modules/@jest/core/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@jest/core/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/core/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@jest/core/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -2699,9 +2664,9 @@
       }
     },
     "node_modules/@jridgewell/source-map": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
-      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -2786,18 +2751,18 @@
       }
     },
     "node_modules/@react-native-community/cli": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-19.1.0.tgz",
-      "integrity": "sha512-L9GL4YtgvoaS7DXcBuHZ1WtH+D2wV6G33THpxVmBEaJQp/vgRQg9Z4bb+9Mj/rBcATgbUu4Sd7H3xJE2qCd93w==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-20.0.0.tgz",
+      "integrity": "sha512-/cMnGl5V1rqnbElY1Fvga1vfw0d3bnqiJLx2+2oh7l9ulnXfVRWb5tU2kgBqiMxuDOKA+DQoifC9q/tvkj5K2w==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-clean": "19.1.0",
-        "@react-native-community/cli-config": "19.1.0",
-        "@react-native-community/cli-doctor": "19.1.0",
-        "@react-native-community/cli-server-api": "19.1.0",
-        "@react-native-community/cli-tools": "19.1.0",
-        "@react-native-community/cli-types": "19.1.0",
+        "@react-native-community/cli-clean": "20.0.0",
+        "@react-native-community/cli-config": "20.0.0",
+        "@react-native-community/cli-doctor": "20.0.0",
+        "@react-native-community/cli-server-api": "20.0.0",
+        "@react-native-community/cli-tools": "20.0.0",
+        "@react-native-community/cli-types": "20.0.0",
         "chalk": "^4.1.2",
         "commander": "^9.4.1",
         "deepmerge": "^4.3.0",
@@ -2816,58 +2781,26 @@
       }
     },
     "node_modules/@react-native-community/cli-clean": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-19.1.0.tgz",
-      "integrity": "sha512-0X5/rscu0UjgQ3lc4sY5HmL/Z6FiaFANwsBZBnbaBIANzf/pnLIiry+YkhajMpstmnu8i+xZav+F3/uXqZNYIw==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-20.0.0.tgz",
+      "integrity": "sha512-YmdNRcT+Dp8lC7CfxSDIfPMbVPEXVFzBH62VZNbYGxjyakqAvoQUFTYPgM2AyFusAr4wDFbDOsEv88gCDwR3ig==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.1.0",
+        "@react-native-community/cli-tools": "20.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
         "fast-glob": "^3.3.2"
       }
     },
-    "node_modules/@react-native-community/cli-clean/node_modules/@react-native-community/cli-tools": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
-      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vscode/sudo-prompt": "^9.0.0",
-        "appdirsjs": "^1.2.4",
-        "chalk": "^4.1.2",
-        "execa": "^5.0.0",
-        "find-up": "^5.0.0",
-        "launch-editor": "^2.9.1",
-        "mime": "^2.4.1",
-        "ora": "^5.4.1",
-        "prompts": "^2.4.2",
-        "semver": "^7.5.2"
-      }
-    },
-    "node_modules/@react-native-community/cli-clean/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "devOptional": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@react-native-community/cli-config": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-19.1.0.tgz",
-      "integrity": "sha512-OHcXRwjaN6a6MVc8Y/vn9sY2xMj1eXO86GogzV0fR3Pk3Fz1Kj5lerTjY9jKkskdRbpetfpAibeSgqxJ4I838g==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-20.0.0.tgz",
+      "integrity": "sha512-5Ky9ceYuDqG62VIIpbOmkg8Lybj2fUjf/5wK4UO107uRqejBgNgKsbGnIZgEhREcaSEOkujWrroJ9gweueLfBg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.1.0",
+        "@react-native-community/cli-tools": "20.0.0",
         "chalk": "^4.1.2",
         "cosmiconfig": "^9.0.0",
         "deepmerge": "^4.3.0",
@@ -2876,75 +2809,43 @@
       }
     },
     "node_modules/@react-native-community/cli-config-android": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-android/-/cli-config-android-19.0.0.tgz",
-      "integrity": "sha512-TDd6qdjVjGKuLUEJdPtBJIUOZAJ+oLLiejdrVsfJplJWlFnJVmUAv2M7yT69U+5kh/fGaaHGtsyDekK0B4Gtbg==",
-      "dev": true,
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-android/-/cli-config-android-20.0.0.tgz",
+      "integrity": "sha512-asv60qYCnL1v0QFWcG9r1zckeFlKG+14GGNyPXY72Eea7RX5Cxdx8Pb6fIPKroWH1HEWjYH9KKHksMSnf9FMKw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.0.0",
+        "@react-native-community/cli-tools": "20.0.0",
         "chalk": "^4.1.2",
         "fast-glob": "^3.3.2",
         "fast-xml-parser": "^4.4.1"
       }
     },
     "node_modules/@react-native-community/cli-config-apple": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-apple/-/cli-config-apple-19.0.0.tgz",
-      "integrity": "sha512-apIOz46ZseD/eL4LjOTR3UH6UEXSj6bHK3SPA6JmcxY8q8brnAjUxzNC7FGeKBcUbeLbRyXplIuxuOrBpcX3QQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@react-native-community/cli-tools": "19.0.0",
-        "chalk": "^4.1.2",
-        "execa": "^5.0.0",
-        "fast-glob": "^3.3.2"
-      }
-    },
-    "node_modules/@react-native-community/cli-config/node_modules/@react-native-community/cli-tools": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
-      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-apple/-/cli-config-apple-20.0.0.tgz",
+      "integrity": "sha512-PS1gNOdpeQ6w7dVu1zi++E+ix2D0ZkGC2SQP6Y/Qp002wG4se56esLXItYiiLrJkhH21P28fXdmYvTEkjSm9/Q==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@vscode/sudo-prompt": "^9.0.0",
-        "appdirsjs": "^1.2.4",
+        "@react-native-community/cli-tools": "20.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
-        "find-up": "^5.0.0",
-        "launch-editor": "^2.9.1",
-        "mime": "^2.4.1",
-        "ora": "^5.4.1",
-        "prompts": "^2.4.2",
-        "semver": "^7.5.2"
-      }
-    },
-    "node_modules/@react-native-community/cli-config/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "devOptional": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
+        "fast-glob": "^3.3.2"
       }
     },
     "node_modules/@react-native-community/cli-doctor": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-19.1.0.tgz",
-      "integrity": "sha512-HtwFDTgJfw6md86O2a30OxodU6hoZTU8KGq8p1tMa55KD7DmHCM3F+MENOuxIjVjcmcFnY5WA5deHDBLHmH9uw==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-20.0.0.tgz",
+      "integrity": "sha512-cPHspi59+Fy41FDVxt62ZWoicCZ1o34k8LAl64NVSY0lwPl+CEi78jipXJhtfkVqSTetloA8zexa/vSAcJy57Q==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-config": "19.1.0",
-        "@react-native-community/cli-platform-android": "19.1.0",
-        "@react-native-community/cli-platform-apple": "19.1.0",
-        "@react-native-community/cli-platform-ios": "19.1.0",
-        "@react-native-community/cli-tools": "19.1.0",
+        "@react-native-community/cli-config": "20.0.0",
+        "@react-native-community/cli-platform-android": "20.0.0",
+        "@react-native-community/cli-platform-apple": "20.0.0",
+        "@react-native-community/cli-platform-ios": "20.0.0",
+        "@react-native-community/cli-tools": "20.0.0",
         "chalk": "^4.1.2",
         "command-exists": "^1.2.8",
         "deepmerge": "^4.3.0",
@@ -2957,94 +2858,82 @@
         "yaml": "^2.2.1"
       }
     },
-    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-config-android": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-android/-/cli-config-android-19.1.0.tgz",
-      "integrity": "sha512-IlIs9iawZvvzrXsKrHGS+iGt9ixfcwmtXRSdxygQMX3po+H2T1PJnnh+Shum5ja9hw3R+cqTb4kj3YsaFo4VTQ==",
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-android": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-20.0.0.tgz",
+      "integrity": "sha512-th3ji1GRcV6ACelgC0wJtt9daDZ+63/52KTwL39xXGoqczFjml4qERK90/ppcXU0Ilgq55ANF8Pr+UotQ2AB/A==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.1.0",
+        "@react-native-community/cli-config-android": "20.0.0",
+        "@react-native-community/cli-tools": "20.0.0",
         "chalk": "^4.1.2",
-        "fast-glob": "^3.3.2",
-        "fast-xml-parser": "^4.4.1"
+        "execa": "^5.0.0",
+        "logkitty": "^0.7.1"
       }
     },
-    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-config-apple": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-config-apple/-/cli-config-apple-19.1.0.tgz",
-      "integrity": "sha512-2nJtMgWfW+YDhVcwspo3Pnnaqo/QMFUBFK1jUhI3pD5XLXnoY3jq1kb43o1Nvj1ADLewGqZnDqcSxG0Pd7P98Q==",
+    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-ios": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-20.0.0.tgz",
+      "integrity": "sha512-Z35M+4gUJgtS4WqgpKU9/XYur70nmj3Q65c9USyTq6v/7YJ4VmBkmhC9BticPs6wuQ9Jcv0NyVCY0Wmh6kMMYw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-tools": "19.1.0",
-        "chalk": "^4.1.2",
-        "execa": "^5.0.0",
-        "fast-glob": "^3.3.2"
+        "@react-native-community/cli-platform-apple": "20.0.0"
       }
     },
-    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-android": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-19.1.0.tgz",
-      "integrity": "sha512-8XSMoCDvjIOxyutSHOCdoYonfXWQUL+FtLu3Uqm6baXj5eInqDmc0ws4CbUgvg5sGTo484Lez8aTpQwThf3YTA==",
+    "node_modules/@react-native-community/cli-doctor/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@react-native-community/cli-config-android": "19.1.0",
-        "@react-native-community/cli-tools": "19.1.0",
-        "chalk": "^4.1.2",
-        "execa": "^5.0.0",
-        "logkitty": "^0.7.1"
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-apple": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-apple/-/cli-platform-apple-19.1.0.tgz",
-      "integrity": "sha512-7sEZbEfhJYRo2SSLC2qT+2x494/CoIm7h4/jmy9S+AJ5+ImZQBCkSqAkX9yO79eVtVH9FDJjdrso4rn1Ts4r1Q==",
-      "devOptional": true,
+    "node_modules/@react-native-community/cli-platform-android": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-12.0.0.tgz",
+      "integrity": "sha512-QjQUh5it4TUwKZIn+T3xhU/IvrUrx1el535Ia6y940tyTxnZ5zQPZnd2JxRcOLiHtKSQL72VnD3yBMRjYtp1HA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-config-apple": "19.1.0",
-        "@react-native-community/cli-tools": "19.1.0",
+        "@react-native-community/cli-tools": "12.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
-        "fast-xml-parser": "^4.4.1"
-      }
-    },
-    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-ios": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-19.1.0.tgz",
-      "integrity": "sha512-z85zYgFK62EX2HclMvLD3yaYWgW57SMT4Wv6O5wyFCWvv9LP97vm0aTORgmCdcqlov2RV7dxhLGQF6t2PTqGxA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@react-native-community/cli-platform-apple": "19.1.0"
+        "fast-xml-parser": "^4.2.4",
+        "glob": "^7.1.3",
+        "logkitty": "^0.7.1"
       }
     },
-    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-tools": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
-      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
-      "devOptional": true,
+    "node_modules/@react-native-community/cli-platform-android/node_modules/@react-native-community/cli-tools": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-12.0.0.tgz",
+      "integrity": "sha512-p5QN3UMoAKUTpVblKAf+tW3I+nX6wyPgaXYZ+K3H0vZNmbVim+eODFi32NH1XnvuvblVpakovmMrhnBpRnSAgg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vscode/sudo-prompt": "^9.0.0",
         "appdirsjs": "^1.2.4",
         "chalk": "^4.1.2",
-        "execa": "^5.0.0",
         "find-up": "^5.0.0",
-        "launch-editor": "^2.9.1",
         "mime": "^2.4.1",
+        "node-fetch": "^2.6.0",
+        "open": "^6.2.0",
         "ora": "^5.4.1",
-        "prompts": "^2.4.2",
-        "semver": "^7.5.2"
+        "semver": "^7.5.2",
+        "shell-quote": "^1.7.3",
+        "sudo-prompt": "^9.0.0"
       }
     },
-    "node_modules/@react-native-community/cli-doctor/node_modules/semver": {
+    "node_modules/@react-native-community/cli-platform-android/node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
       "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -3053,87 +2942,59 @@
         "node": ">=10"
       }
     },
-    "node_modules/@react-native-community/cli-platform-android": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-19.0.0.tgz",
-      "integrity": "sha512-oY5ztWIZxa7EWiQHNG5RXhx/8DA7t4EPiu0qizuz+tV6sAiDcnPQv4hRYF3+wyeIXk/NJjxnYQe9xeQ0Yt1X4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@react-native-community/cli-config-android": "19.0.0",
-        "@react-native-community/cli-tools": "19.0.0",
-        "chalk": "^4.1.2",
-        "execa": "^5.0.0",
-        "logkitty": "^0.7.1"
-      }
-    },
     "node_modules/@react-native-community/cli-platform-apple": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-apple/-/cli-platform-apple-19.0.0.tgz",
-      "integrity": "sha512-nSuPAaGSDxhsIUzr3JSa9AaQ3f5si6S2+J7FJxTLGuJ2hXrbDXtwOUmtmln09U8cg8Yewa9zh6rjTLVSsFvbAA==",
-      "dev": true,
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-apple/-/cli-platform-apple-20.0.0.tgz",
+      "integrity": "sha512-rZZCnAjUHN1XBgiWTAMwEKpbVTO4IHBSecdd1VxJFeTZ7WjmstqA6L/HXcnueBgxrzTCRqvkRIyEQXxC1OfhGw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-config-apple": "19.0.0",
-        "@react-native-community/cli-tools": "19.0.0",
+        "@react-native-community/cli-config-apple": "20.0.0",
+        "@react-native-community/cli-tools": "20.0.0",
         "chalk": "^4.1.2",
         "execa": "^5.0.0",
         "fast-xml-parser": "^4.4.1"
       }
     },
     "node_modules/@react-native-community/cli-platform-ios": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-19.0.0.tgz",
-      "integrity": "sha512-oi8p8ccbnk9VYMAjqowB2zicUbCyl/DwD0mdTMivX/YQNIflAIFvzq6p76EP4J3E0/IPu9S0IpgVPCBdTyiSlg==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-12.0.0.tgz",
+      "integrity": "sha512-4c4xH59CpebgZb6dV/uw3lO3gZOSNY2GL9VjYFTXAMQSAnibnWjd1UFwP89TJNTyr/joYIU+vLDZ6nehZ78WoQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native-community/cli-platform-apple": "19.0.0"
-      }
-    },
-    "node_modules/@react-native-community/cli-server-api": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-19.1.0.tgz",
-      "integrity": "sha512-YvFS8aTHfs+vnxEBFnBThkwzDm60B6OyajiYAn4c+m10vsEnExrurMWdmANMyKG0dM2LjADqkFvqUARtO/+1jQ==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@react-native-community/cli-tools": "19.1.0",
-        "body-parser": "^1.20.3",
-        "compression": "^1.7.1",
-        "connect": "^3.6.5",
-        "errorhandler": "^1.5.1",
-        "nocache": "^3.0.1",
-        "open": "^6.2.0",
-        "pretty-format": "^26.6.2",
-        "serve-static": "^1.13.1",
-        "ws": "^6.2.3"
+        "@react-native-community/cli-tools": "12.0.0",
+        "chalk": "^4.1.2",
+        "execa": "^5.0.0",
+        "fast-xml-parser": "^4.0.12",
+        "glob": "^7.1.3",
+        "ora": "^5.4.1"
       }
     },
-    "node_modules/@react-native-community/cli-server-api/node_modules/@react-native-community/cli-tools": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
-      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
-      "devOptional": true,
+    "node_modules/@react-native-community/cli-platform-ios/node_modules/@react-native-community/cli-tools": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-12.0.0.tgz",
+      "integrity": "sha512-p5QN3UMoAKUTpVblKAf+tW3I+nX6wyPgaXYZ+K3H0vZNmbVim+eODFi32NH1XnvuvblVpakovmMrhnBpRnSAgg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vscode/sudo-prompt": "^9.0.0",
         "appdirsjs": "^1.2.4",
         "chalk": "^4.1.2",
-        "execa": "^5.0.0",
         "find-up": "^5.0.0",
-        "launch-editor": "^2.9.1",
         "mime": "^2.4.1",
+        "node-fetch": "^2.6.0",
+        "open": "^6.2.0",
         "ora": "^5.4.1",
-        "prompts": "^2.4.2",
-        "semver": "^7.5.2"
+        "semver": "^7.5.2",
+        "shell-quote": "^1.7.3",
+        "sudo-prompt": "^9.0.0"
       }
     },
-    "node_modules/@react-native-community/cli-server-api/node_modules/semver": {
+    "node_modules/@react-native-community/cli-platform-ios/node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
       "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -3142,11 +3003,30 @@
         "node": ">=10"
       }
     },
+    "node_modules/@react-native-community/cli-server-api": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-20.0.0.tgz",
+      "integrity": "sha512-Ves21bXtjUK3tQbtqw/NdzpMW1vR2HvYCkUQ/MXKrJcPjgJnXQpSnTqHXz6ZdBlMbbwLJXOhSPiYzxb5/v4CDg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-community/cli-tools": "20.0.0",
+        "body-parser": "^1.20.3",
+        "compression": "^1.7.1",
+        "connect": "^3.6.5",
+        "errorhandler": "^1.5.1",
+        "nocache": "^3.0.1",
+        "open": "^6.2.0",
+        "pretty-format": "^29.7.0",
+        "serve-static": "^1.13.1",
+        "ws": "^6.2.3"
+      }
+    },
     "node_modules/@react-native-community/cli-tools": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.0.0.tgz",
-      "integrity": "sha512-O6qGE+1xZOOJY43CcjL3E6xtVx5m6TDEVzysIJ0jHjjE1QqYijx6W8VuWebmA08MfX4JCE2jzUrwx2Ns2GguGg==",
-      "dev": true,
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-20.0.0.tgz",
+      "integrity": "sha512-akSZGxr1IajJ8n0YCwQoA3DI0HttJ0WB7M3nVpb0lOM+rJpsBN7WG5Ft+8ozb6HyIPX+O+lLeYazxn5VNG/Xhw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@vscode/sudo-prompt": "^9.0.0",
@@ -3165,7 +3045,7 @@
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
       "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -3175,38 +3055,19 @@
       }
     },
     "node_modules/@react-native-community/cli-types": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-19.1.0.tgz",
-      "integrity": "sha512-MEF7WBG17hQOusrphgEjbojqAoGkIwtYg0HhcJ+/MRLMQg6jty6K98gr6VYmjphXGkAPx1T/AN8/DmWmlw/atw==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-20.0.0.tgz",
+      "integrity": "sha512-7J4hzGWOPTBV1d30Pf2NidV+bfCWpjfCOiGO3HUhz1fH4MvBM0FbbBmE9LE5NnMz7M8XSRSi68ZGYQXgLBB2Qw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "joi": "^17.2.1"
       }
     },
-    "node_modules/@react-native-community/cli/node_modules/@react-native-community/cli-tools": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-19.1.0.tgz",
-      "integrity": "sha512-JjTL5fj77v1urcHYcqnd4ZBTO52ORYzOqxMdDmJdadwh08iMguGfJ1rXNyybBSTyK/Ev60upo3sIm2A26nWydg==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vscode/sudo-prompt": "^9.0.0",
-        "appdirsjs": "^1.2.4",
-        "chalk": "^4.1.2",
-        "execa": "^5.0.0",
-        "find-up": "^5.0.0",
-        "launch-editor": "^2.9.1",
-        "mime": "^2.4.1",
-        "ora": "^5.4.1",
-        "prompts": "^2.4.2",
-        "semver": "^7.5.2"
-      }
-    },
     "node_modules/@react-native-community/cli/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -3217,33 +3078,33 @@
       }
     },
     "node_modules/@react-native/assets-registry": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.80.1.tgz",
-      "integrity": "sha512-T3C8OthBHfpFIjaGFa0q6rc58T2AsJ+jKAa+qPquMKBtYGJMc75WgNbk/ZbPBxeity6FxZsmg3bzoUaWQo4Mow==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.4.tgz",
+      "integrity": "sha512-AMcDadefBIjD10BRqkWw+W/VdvXEomR6aEZ0fhQRAv7igrBzb4PTn4vHKYg+sUK0e3wa74kcMy2DLc/HtnGcMA==",
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/babel-plugin-codegen": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.80.1.tgz",
-      "integrity": "sha512-A0xTmTiHamvKL2AtkUQqT+5WcLMFLig/62STT5Aa/CyxfqpkmSyKbHwSUEiMZ744SARG8JEG+D++dgy6steqag==",
-      "dev": true,
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.81.4.tgz",
+      "integrity": "sha512-6ztXf2Tl2iWznyI/Da/N2Eqymt0Mnn69GCLnEFxFbNdk0HxHPZBNWU9shTXhsLWOL7HATSqwg/bB1+3kY1q+mA==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.3",
-        "@react-native/codegen": "0.80.1"
+        "@react-native/codegen": "0.81.4"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/babel-preset": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.80.1.tgz",
-      "integrity": "sha512-SItN0D3ETd9mHahkyLDq3eOg2MydSN1Bod2WEhnVfVxmkK1YFmXtS2MvW+/ruce5kW6V5zwyGR3KIi4DjUMC4A==",
-      "dev": true,
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.81.4.tgz",
+      "integrity": "sha512-VYj0c/cTjQJn/RJ5G6P0L9wuYSbU9yGbPYDHCKstlQZQWkk+L9V8ZDbxdJBTIei9Xl3KPQ1odQ4QaeW+4v+AZg==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
@@ -3287,61 +3148,66 @@
         "@babel/plugin-transform-typescript": "^7.25.2",
         "@babel/plugin-transform-unicode-regex": "^7.24.7",
         "@babel/template": "^7.25.0",
-        "@react-native/babel-plugin-codegen": "0.80.1",
-        "babel-plugin-syntax-hermes-parser": "0.28.1",
+        "@react-native/babel-plugin-codegen": "0.81.4",
+        "babel-plugin-syntax-hermes-parser": "0.29.1",
         "babel-plugin-transform-flow-enums": "^0.0.2",
         "react-refresh": "^0.14.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       },
       "peerDependencies": {
         "@babel/core": "*"
       }
     },
     "node_modules/@react-native/codegen": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.80.1.tgz",
-      "integrity": "sha512-CFhOYkXmExOeZDZnd0UJCK9A4AOSAyFBoVgmFZsf+fv8JqnwIx/SD6RxY1+Jzz9EWPQcH2v+WgwPP/4qVmjtKw==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.81.4.tgz",
+      "integrity": "sha512-LWTGUTzFu+qOQnvkzBP52B90Ym3stZT8IFCzzUrppz8Iwglg83FCtDZAR4yLHI29VY/x/+pkcWAMCl3739XHdw==",
       "license": "MIT",
       "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/parser": "^7.25.3",
         "glob": "^7.1.1",
-        "hermes-parser": "0.28.1",
+        "hermes-parser": "0.29.1",
         "invariant": "^2.2.4",
         "nullthrows": "^1.1.1",
         "yargs": "^17.6.2"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       },
       "peerDependencies": {
         "@babel/core": "*"
       }
     },
     "node_modules/@react-native/community-cli-plugin": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/community-cli-plugin/-/community-cli-plugin-0.80.1.tgz",
-      "integrity": "sha512-M1lzLvZUz6zb6rn4Oyc3HUY72wye8mtdm1bJSYIBoK96ejMvQGoM+Lih/6k3c1xL7LSruNHfsEXXePLjCbhE8Q==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/community-cli-plugin/-/community-cli-plugin-0.81.4.tgz",
+      "integrity": "sha512-8mpnvfcLcnVh+t1ok6V9eozWo8Ut+TZhz8ylJ6gF9d6q9EGDQX6s8jenan5Yv/pzN4vQEKI4ib2pTf/FELw+SA==",
       "license": "MIT",
       "dependencies": {
-        "@react-native/dev-middleware": "0.80.1",
-        "chalk": "^4.0.0",
+        "@react-native/dev-middleware": "0.81.4",
         "debug": "^4.4.0",
         "invariant": "^2.2.4",
-        "metro": "^0.82.2",
-        "metro-config": "^0.82.2",
-        "metro-core": "^0.82.2",
+        "metro": "^0.83.1",
+        "metro-config": "^0.83.1",
+        "metro-core": "^0.83.1",
         "semver": "^7.1.3"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       },
       "peerDependencies": {
-        "@react-native-community/cli": "*"
+        "@react-native-community/cli": "*",
+        "@react-native/metro-config": "*"
       },
       "peerDependenciesMeta": {
         "@react-native-community/cli": {
           "optional": true
+        },
+        "@react-native/metro-config": {
+          "optional": true
         }
       }
     },
@@ -3358,22 +3224,22 @@
       }
     },
     "node_modules/@react-native/debugger-frontend": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.80.1.tgz",
-      "integrity": "sha512-5dQJdX1ZS4dINNw51KNsDIL+A06sZQd2hqN2Pldq5SavxAwEJh5NxAx7K+lutKhwp1By5gxd6/9ruVt+9NCvKA==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.81.4.tgz",
+      "integrity": "sha512-SU05w1wD0nKdQFcuNC9D6De0ITnINCi8MEnx9RsTD2e4wN83ukoC7FpXaPCYyP6+VjFt5tUKDPgP1O7iaNXCqg==",
       "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/dev-middleware": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/dev-middleware/-/dev-middleware-0.80.1.tgz",
-      "integrity": "sha512-EBnZ3s6+hGAlUggDvo9uI37Xh0vG55H2rr3A6l6ww7+sgNuUz+wEJ63mGINiU6DwzQSgr6av7rjrVERxKH6vxg==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/dev-middleware/-/dev-middleware-0.81.4.tgz",
+      "integrity": "sha512-hu1Wu5R28FT7nHXs2wWXvQ++7W7zq5GPY83llajgPlYKznyPLAY/7bArc5rAzNB7b0kwnlaoPQKlvD/VP9LZug==",
       "license": "MIT",
       "dependencies": {
         "@isaacs/ttlcache": "^1.4.1",
-        "@react-native/debugger-frontend": "0.80.1",
+        "@react-native/debugger-frontend": "0.81.4",
         "chrome-launcher": "^0.15.2",
         "chromium-edge-launcher": "^0.2.0",
         "connect": "^3.6.5",
@@ -3385,7 +3251,7 @@
         "ws": "^6.2.3"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/dev-middleware/node_modules/is-wsl": {
@@ -3417,15 +3283,15 @@
       }
     },
     "node_modules/@react-native/eslint-config": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/eslint-config/-/eslint-config-0.80.1.tgz",
-      "integrity": "sha512-bGtMGDfLDLZ5WWIo+OjfnDo4s1TaKfD0W4OoqeqmIcAkbVYBvTLGcjBW4MsMDO5JVebErUMGa+vE0z7p3B0Nsg==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/eslint-config/-/eslint-config-0.81.4.tgz",
+      "integrity": "sha512-U3YhRctTy7oVEjP5+6viSLon2nlbvA/+nTQccFdxE01jULl8n6iLvBlVUN1OWicKGlMfJxSdX76QidbOf4Zm6A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
-        "@react-native/eslint-plugin": "0.80.1",
+        "@react-native/eslint-plugin": "0.81.4",
         "@typescript-eslint/eslint-plugin": "^7.1.1",
         "@typescript-eslint/parser": "^7.1.1",
         "eslint-config-prettier": "^8.5.0",
@@ -3437,7 +3303,7 @@
         "eslint-plugin-react-native": "^4.0.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       },
       "peerDependencies": {
         "eslint": ">=8",
@@ -3458,95 +3324,95 @@
       }
     },
     "node_modules/@react-native/eslint-plugin": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/eslint-plugin/-/eslint-plugin-0.80.1.tgz",
-      "integrity": "sha512-e3vLbjiRqJWGm5kVvVfboJwPHOE0ut5bSy/630PQSxpxN1BAZMR2E+pX+s1FasP2KmtOQ3qsIOB54jCA9/xfxA==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/eslint-plugin/-/eslint-plugin-0.81.4.tgz",
+      "integrity": "sha512-hL+v7ntZwWta4iaBXQ79dzA8FdkLJ4xdHso8OMSDDmUJZgiNDcviYs7inyIE5DB/DavwYIhl99teaDIFMyUb5A==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/gradle-plugin": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/gradle-plugin/-/gradle-plugin-0.80.1.tgz",
-      "integrity": "sha512-6B7bWUk27ne/g/wCgFF4MZFi5iy6hWOcBffqETJoab6WURMyZ6nU+EAMn+Vjhl5ishhUvTVSrJ/1uqrxxYQO2Q==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/gradle-plugin/-/gradle-plugin-0.81.4.tgz",
+      "integrity": "sha512-T7fPcQvDDCSusZFVSg6H1oVDKb/NnVYLnsqkcHsAF2C2KGXyo3J7slH/tJAwNfj/7EOA2OgcWxfC1frgn9TQvw==",
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/js-polyfills": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.80.1.tgz",
-      "integrity": "sha512-cWd5Cd2kBMRM37dor8N9Ck4X0NzjYM3m8K6HtjodcOdOvzpXfrfhhM56jdseTl5Z4iB+pohzPJpSmFJctmuIpA==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.81.4.tgz",
+      "integrity": "sha512-sr42FaypKXJHMVHhgSbu2f/ZJfrLzgaoQ+HdpRvKEiEh2mhFf6XzZwecyLBvWqf2pMPZa+CpPfNPiejXjKEy8w==",
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/metro-babel-transformer": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.80.1.tgz",
-      "integrity": "sha512-pHKwMfoSoScWHmYAd8xSa2wyMq0GESibP1/yeFjtkqaMQKNuEcfKdrXrTrrmMje6psaB17UizvHBevsnEUWWFA==",
-      "dev": true,
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.81.4.tgz",
+      "integrity": "sha512-AahgamQ9kZV4B1x8I/LpTZBgbT+j9i1pQoM3KDkECPIOF1JUwNFUukEjpkq4kRSdzudLocnfASFg+eWzIgPcCA==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
-        "@react-native/babel-preset": "0.80.1",
-        "hermes-parser": "0.28.1",
+        "@react-native/babel-preset": "0.81.4",
+        "hermes-parser": "0.29.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       },
       "peerDependencies": {
         "@babel/core": "*"
       }
     },
     "node_modules/@react-native/metro-config": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.80.1.tgz",
-      "integrity": "sha512-VLfHJ1G/lHvpE0YzxPal3sslfr5e5RNQVFeVebMwS3zSf57ZiZbfAevWJJT+7/gfGADMIoiX7AUteCVlbxMu/g==",
-      "dev": true,
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.81.4.tgz",
+      "integrity": "sha512-aEXhRMsz6yN5X63Zk+cdKByQ0j3dsKv+ETRP9lLARdZ82fBOCMuK6IfmZMwK3A/3bI7gSvt2MFPn3QHy3WnByw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@react-native/js-polyfills": "0.80.1",
-        "@react-native/metro-babel-transformer": "0.80.1",
-        "metro-config": "^0.82.2",
-        "metro-runtime": "^0.82.2"
+        "@react-native/js-polyfills": "0.81.4",
+        "@react-native/metro-babel-transformer": "0.81.4",
+        "metro-config": "^0.83.1",
+        "metro-runtime": "^0.83.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       }
     },
     "node_modules/@react-native/normalize-colors": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.80.1.tgz",
-      "integrity": "sha512-YP12bjz0bzo2lFxZDOPkRJSOkcqAzXCQQIV1wd7lzCTXE0NJNwoaeNBobJvcPhiODEWUYCXPANrZveFhtFu5vw==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.81.4.tgz",
+      "integrity": "sha512-9nRRHO1H+tcFqjb9gAM105Urtgcanbta2tuqCVY0NATHeFPDEAB7gPyiLxCHKMi1NbhP6TH0kxgSWXKZl1cyRg==",
       "license": "MIT"
     },
     "node_modules/@react-native/typescript-config": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/typescript-config/-/typescript-config-0.80.1.tgz",
-      "integrity": "sha512-rcDV6BMh+rjsYIh/f0pd6mWOKN4eTS9nov7CyeU2cAfuIEslScEJ7Kv6YZtlLZ5PgC9teUf5L9pqzx9GwmzY/w==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/typescript-config/-/typescript-config-0.81.4.tgz",
+      "integrity": "sha512-1HSrwtfAmtbKHNK2HAMCL5ArbGhxxJjOmTViDQ4nEhLJCAllZjQJyR/Hs1GmwHJokLmgXCcg3VH/13spwQBdxw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@react-native/virtualized-lists": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.80.1.tgz",
-      "integrity": "sha512-nqQAeHheSNZBV+syhLVMgKBZv+FhCANfxAWVvfEXZa4rm5jGHsj3yA9vqrh2lcJL3pjd7PW5nMX7TcuJThEAgQ==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.81.4.tgz",
+      "integrity": "sha512-hBM+rMyL6Wm1Q4f/WpqGsaCojKSNUBqAXLABNGoWm1vabZ7cSnARMxBvA/2vo3hLcoR4v7zDK8tkKm9+O0LjVA==",
       "license": "MIT",
       "dependencies": {
         "invariant": "^2.2.4",
         "nullthrows": "^1.1.1"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       },
       "peerDependencies": {
-        "@types/react": "^19.0.0",
+        "@types/react": "^19.1.0",
         "react": "*",
         "react-native": "*"
       },
@@ -3695,41 +3561,6 @@
         "pretty-format": "^29.0.0"
       }
     },
-    "node_modules/@types/jest/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@types/jest/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -4062,9 +3893,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -4084,9 +3915,9 @@
       }
     },
     "node_modules/agent-base": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
-      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 14"
@@ -4460,7 +4291,7 @@
       "version": "0.4.13",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.13.tgz",
       "integrity": "sha512-3sX/eOms8kd3q2KZ6DAhKPc0dgm525Gqq5NtWKZ7QYYZEv57OQ54KtblzJzH1lQF/eQxO8KjWGIK9IPUJNus5g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.22.6",
@@ -4475,7 +4306,7 @@
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz",
       "integrity": "sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.3",
@@ -4489,7 +4320,7 @@
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.4.tgz",
       "integrity": "sha512-7gD3pRadPrbjhjLyxebmx/WrFYcuSjZ0XbdUujQMZ/fcE9oeewk2U/7PCvez84UeuK3oSjmPZ0Ch0dlupQvGzw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.4"
@@ -4499,19 +4330,19 @@
       }
     },
     "node_modules/babel-plugin-syntax-hermes-parser": {
-      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.28.1.tgz",
-      "integrity": "sha512-meT17DOuUElMNsL5LZN56d+KBp22hb0EfxWfuPUeoSi54e40v1W4C2V36P75FpsH9fVEfDKpw5Nnkahc8haSsQ==",
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.29.1.tgz",
+      "integrity": "sha512-2WFYnoWGdmih1I1J5eIqxATOeycOqRwYxAQBu3cUu/rhwInwHUg7k60AFNbuGjSDL8tje5GDrAnxzRLcu2pYcA==",
       "license": "MIT",
       "dependencies": {
-        "hermes-parser": "0.28.1"
+        "hermes-parser": "0.29.1"
       }
     },
     "node_modules/babel-plugin-transform-flow-enums": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-flow-enums/-/babel-plugin-transform-flow-enums-0.0.2.tgz",
       "integrity": "sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/plugin-syntax-flow": "^7.12.1"
@@ -5196,7 +5027,7 @@
       "version": "3.41.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.41.0.tgz",
       "integrity": "sha512-RFsU9LySVue9RTwdDVX/T0e2Y6jRYWXERKElIjpuEOEnxaXffI0X7RUwVzfYLfzuLXSNJDYoRYUAmRUcyln20A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.24.4"
@@ -7174,18 +7005,18 @@
       }
     },
     "node_modules/hermes-estree": {
-      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.28.1.tgz",
-      "integrity": "sha512-w3nxl/RGM7LBae0v8LH2o36+8VqwOZGv9rX1wyoWT6YaKZLqpJZ0YQ5P0LVr3tuRpf7vCx0iIG4i/VmBJejxTQ==",
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.29.1.tgz",
+      "integrity": "sha512-jl+x31n4/w+wEqm0I2r4CMimukLbLQEYpisys5oCre611CI5fc9TxhqkBBCJ1edDG4Kza0f7CgNz8xVMLZQOmQ==",
       "license": "MIT"
     },
     "node_modules/hermes-parser": {
-      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.28.1.tgz",
-      "integrity": "sha512-nf8o+hE8g7UJWParnccljHumE9Vlq8F7MqIdeahl+4x0tvCUJYRrT0L7h0MMg/X9YJmkNwsfbaNNrzPtFXOscg==",
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.29.1.tgz",
+      "integrity": "sha512-xBHWmUtRC5e/UL0tI7Ivt2riA/YBq9+SiYFU7C1oBa/j2jYGlIF9043oak1F47ihuDIxQ5nbsKueYJDRY02UgA==",
       "license": "MIT",
       "dependencies": {
-        "hermes-estree": "0.28.1"
+        "hermes-estree": "0.29.1"
       }
     },
     "node_modules/hoist-non-react-statics": {
@@ -7498,7 +7329,7 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -8076,41 +7907,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-circus/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-circus/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-circus/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jest-cli": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-29.7.0.tgz",
@@ -8191,41 +7987,6 @@
         }
       }
     },
-    "node_modules/jest-config/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-config/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-config/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jest-diff": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
@@ -8242,41 +8003,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-diff/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-diff/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-diff/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jest-docblock": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.7.0.tgz",
@@ -8307,41 +8033,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-each/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-each/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-each/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jest-environment-node": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz",
@@ -8389,59 +8080,24 @@
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       },
-      "optionalDependencies": {
-        "fsevents": "^2.3.2"
-      }
-    },
-    "node_modules/jest-leak-detector": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz",
-      "integrity": "sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-leak-detector/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/pretty-format": {
+    "node_modules/jest-leak-detector": {
       "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz",
+      "integrity": "sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
       },
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jest-matcher-utils": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
@@ -8458,41 +8114,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-matcher-utils/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-matcher-utils/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jest-message-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
@@ -8513,38 +8134,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-message-util/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-message-util/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-message-util/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
-    },
     "node_modules/jest-mock": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
@@ -8720,41 +8309,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-snapshot/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-snapshot/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-snapshot/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jest-snapshot/node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -8802,18 +8356,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-validate/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/jest-validate/node_modules/camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
@@ -8826,26 +8368,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-validate/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-validate/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
-    },
     "node_modules/jest-watcher": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.7.0.tgz",
@@ -9040,14 +8562,14 @@
       }
     },
     "node_modules/launch-editor": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.10.0.tgz",
-      "integrity": "sha512-D7dBRJo/qcGX9xlvt/6wUYzQxjh5G1RvZPgPv8vi4KRU99DVQL/oW7tnVOCCTm2HGeo3C5HvGE5Yrh6UBoZ0vA==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
+      "integrity": "sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "picocolors": "^1.0.0",
-        "shell-quote": "^1.8.1"
+        "picocolors": "^1.1.1",
+        "shell-quote": "^1.8.3"
       }
     },
     "node_modules/leven": {
@@ -9132,7 +8654,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/lodash.merge": {
@@ -9428,9 +8950,9 @@
       }
     },
     "node_modules/metro": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro/-/metro-0.82.4.tgz",
-      "integrity": "sha512-/gFmw3ux9CPG5WUmygY35hpyno28zi/7OUn6+OFfbweA8l0B+PPqXXLr0/T6cf5nclCcH0d22o+02fICaShVxw==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro/-/metro-0.83.1.tgz",
+      "integrity": "sha512-UGKepmTxoGD4HkQV8YWvpvwef7fUujNtTgG4Ygf7m/M0qjvb9VuDmAsEU+UdriRX7F61pnVK/opz89hjKlYTXA==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
@@ -9448,24 +8970,24 @@
         "error-stack-parser": "^2.0.6",
         "flow-enums-runtime": "^0.0.6",
         "graceful-fs": "^4.2.4",
-        "hermes-parser": "0.28.1",
+        "hermes-parser": "0.29.1",
         "image-size": "^1.0.2",
         "invariant": "^2.2.4",
         "jest-worker": "^29.7.0",
         "jsc-safe-url": "^0.2.2",
         "lodash.throttle": "^4.1.1",
-        "metro-babel-transformer": "0.82.4",
-        "metro-cache": "0.82.4",
-        "metro-cache-key": "0.82.4",
-        "metro-config": "0.82.4",
-        "metro-core": "0.82.4",
-        "metro-file-map": "0.82.4",
-        "metro-resolver": "0.82.4",
-        "metro-runtime": "0.82.4",
-        "metro-source-map": "0.82.4",
-        "metro-symbolicate": "0.82.4",
-        "metro-transform-plugins": "0.82.4",
-        "metro-transform-worker": "0.82.4",
+        "metro-babel-transformer": "0.83.1",
+        "metro-cache": "0.83.1",
+        "metro-cache-key": "0.83.1",
+        "metro-config": "0.83.1",
+        "metro-core": "0.83.1",
+        "metro-file-map": "0.83.1",
+        "metro-resolver": "0.83.1",
+        "metro-runtime": "0.83.1",
+        "metro-source-map": "0.83.1",
+        "metro-symbolicate": "0.83.1",
+        "metro-transform-plugins": "0.83.1",
+        "metro-transform-worker": "0.83.1",
         "mime-types": "^2.1.27",
         "nullthrows": "^1.1.1",
         "serialize-error": "^2.1.0",
@@ -9478,68 +9000,68 @@
         "metro": "src/cli.js"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-babel-transformer": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.82.4.tgz",
-      "integrity": "sha512-4juJahGRb1gmNbQq48lNinB6WFNfb6m0BQqi/RQibEltNiqTCxew/dBspI2EWA4xVCd3mQWGfw0TML4KurQZnQ==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.83.1.tgz",
+      "integrity": "sha512-r3xAD3964E8dwDBaZNSO2aIIvWXjIK80uO2xo0/pi3WI8XWT9h5SCjtGWtMtE5PRWw+t20TN0q1WMRsjvhC1rQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
         "flow-enums-runtime": "^0.0.6",
-        "hermes-parser": "0.28.1",
+        "hermes-parser": "0.29.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-cache": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.82.4.tgz",
-      "integrity": "sha512-vX0ylSMGtORKiZ4G8uP6fgfPdDiCWvLZUGZ5zIblSGylOX6JYhvExl0Zg4UA9pix/SSQu5Pnp9vdODMFsNIxhw==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.83.1.tgz",
+      "integrity": "sha512-7N/Ad1PHa1YMWDNiyynTPq34Op2qIE68NWryGEQ4TSE3Zy6a8GpsYnEEZE4Qi6aHgsE+yZHKkRczeBgxhnFIxQ==",
       "license": "MIT",
       "dependencies": {
         "exponential-backoff": "^3.1.1",
         "flow-enums-runtime": "^0.0.6",
         "https-proxy-agent": "^7.0.5",
-        "metro-core": "0.82.4"
+        "metro-core": "0.83.1"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-cache-key": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.82.4.tgz",
-      "integrity": "sha512-2JCTqcpF+f2OghOpe/+x+JywfzDkrHdAqinPFWmK2ezNAU/qX0jBFaTETogPibFivxZJil37w9Yp6syX8rFUng==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.83.1.tgz",
+      "integrity": "sha512-ZUs+GD5CNeDLxx5UUWmfg26IL+Dnbryd+TLqTlZnDEgehkIa11kUSvgF92OFfJhONeXzV4rZDRGNXoo6JT+8Gg==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-config": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.82.4.tgz",
-      "integrity": "sha512-Ki3Wumr3hKHGDS7RrHsygmmRNc/PCJrvkLn0+BWWxmbOmOcMMJDSmSI+WRlT8jd5VPZFxIi4wg+sAt5yBXAK0g==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.83.1.tgz",
+      "integrity": "sha512-HJhpZx3wyOkux/jeF1o7akFJzZFdbn6Zf7UQqWrvp7gqFqNulQ8Mju09raBgPmmSxKDl4LbbNeigkX0/nKY1QA==",
       "license": "MIT",
       "dependencies": {
         "connect": "^3.6.5",
         "cosmiconfig": "^5.0.5",
         "flow-enums-runtime": "^0.0.6",
         "jest-validate": "^29.7.0",
-        "metro": "0.82.4",
-        "metro-cache": "0.82.4",
-        "metro-core": "0.82.4",
-        "metro-runtime": "0.82.4"
+        "metro": "0.83.1",
+        "metro-cache": "0.83.1",
+        "metro-core": "0.83.1",
+        "metro-runtime": "0.83.1"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-config/node_modules/argparse": {
@@ -9615,23 +9137,23 @@
       }
     },
     "node_modules/metro-core": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.82.4.tgz",
-      "integrity": "sha512-Xo4ozbxPg2vfgJGCgXZ8sVhC2M0lhTqD+tsKO2q9aelq/dCjnnSb26xZKcQO80CQOQUL7e3QWB7pLFGPjZm31A==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.83.1.tgz",
+      "integrity": "sha512-uVL1eAJcMFd2o2Q7dsbpg8COaxjZBBGaXqO2OHnivpCdfanraVL8dPmY6It9ZeqWLOihUKZ2yHW4b6soVCzH/Q==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6",
         "lodash.throttle": "^4.1.1",
-        "metro-resolver": "0.82.4"
+        "metro-resolver": "0.83.1"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-file-map": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-file-map/-/metro-file-map-0.82.4.tgz",
-      "integrity": "sha512-eO7HD1O3aeNsbEe6NBZvx1lLJUrxgyATjnDmb7bm4eyF6yWOQot9XVtxTDLNifECuvsZ4jzRiTInrbmIHkTdGA==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-file-map/-/metro-file-map-0.83.1.tgz",
+      "integrity": "sha512-Yu429lnexKl44PttKw3nhqgmpBR+6UQ/tRaYcxPeEShtcza9DWakCn7cjqDTQZtWR2A8xSNv139izJMyQ4CG+w==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.4.0",
@@ -9645,51 +9167,51 @@
         "walker": "^1.0.7"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-minify-terser": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-minify-terser/-/metro-minify-terser-0.82.4.tgz",
-      "integrity": "sha512-W79Mi6BUwWVaM8Mc5XepcqkG+TSsCyyo//dmTsgYfJcsmReQorRFodil3bbJInETvjzdnS1mCsUo9pllNjT1Hg==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-minify-terser/-/metro-minify-terser-0.83.1.tgz",
+      "integrity": "sha512-kmooOxXLvKVxkh80IVSYO4weBdJDhCpg5NSPkjzzAnPJP43u6+usGXobkTWxxrAlq900bhzqKek4pBsUchlX6A==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6",
         "terser": "^5.15.0"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-resolver": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.82.4.tgz",
-      "integrity": "sha512-uWoHzOBGQTPT5PjippB8rRT3iI9CTgFA9tRiLMzrseA5o7YAlgvfTdY9vFk2qyk3lW3aQfFKWkmqENryPRpu+Q==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.83.1.tgz",
+      "integrity": "sha512-t8j46kiILAqqFS5RNa+xpQyVjULxRxlvMidqUswPEk5nQVNdlJslqizDm/Et3v/JKwOtQGkYAQCHxP1zGStR/g==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-runtime": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.82.4.tgz",
-      "integrity": "sha512-vVyFO7H+eLXRV2E7YAUYA7aMGBECGagqxmFvC2hmErS7oq90BbPVENfAHbUWq1vWH+MRiivoRxdxlN8gBoF/dw==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.83.1.tgz",
+      "integrity": "sha512-3Ag8ZS4IwafL/JUKlaeM6/CbkooY+WcVeqdNlBG0m4S0Qz0om3rdFdy1y6fYBpl6AwXJwWeMuXrvZdMuByTcRA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
         "flow-enums-runtime": "^0.0.6"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-source-map": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.82.4.tgz",
-      "integrity": "sha512-9jzDQJ0FPas1FuQFtwmBHsez2BfhFNufMowbOMeG3ZaFvzeziE8A0aJwILDS3U+V5039ssCQFiQeqDgENWvquA==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.83.1.tgz",
+      "integrity": "sha512-De7Vbeo96fFZ2cqmI0fWwVJbtHIwPZv++LYlWSwzTiCzxBDJORncN0LcT48Vi2UlQLzXJg+/CuTAcy7NBVh69A==",
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.3",
@@ -9697,14 +9219,14 @@
         "@babel/types": "^7.25.2",
         "flow-enums-runtime": "^0.0.6",
         "invariant": "^2.2.4",
-        "metro-symbolicate": "0.82.4",
+        "metro-symbolicate": "0.83.1",
         "nullthrows": "^1.1.1",
-        "ob1": "0.82.4",
+        "ob1": "0.83.1",
         "source-map": "^0.5.6",
         "vlq": "^1.0.0"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-source-map/node_modules/source-map": {
@@ -9717,14 +9239,14 @@
       }
     },
     "node_modules/metro-symbolicate": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.82.4.tgz",
-      "integrity": "sha512-LwEwAtdsx7z8rYjxjpLWxuFa2U0J6TS6ljlQM4WAATKa4uzV8unmnRuN2iNBWTmRqgNR77mzmI2vhwD4QSCo+w==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.83.1.tgz",
+      "integrity": "sha512-wPxYkONlq/Sv8Ji7vHEx5OzFouXAMQJjpcPW41ySKMLP/Ir18SsiJK2h4YkdKpYrTS1+0xf8oqF6nxCsT3uWtg==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6",
         "invariant": "^2.2.4",
-        "metro-source-map": "0.82.4",
+        "metro-source-map": "0.83.1",
         "nullthrows": "^1.1.1",
         "source-map": "^0.5.6",
         "vlq": "^1.0.0"
@@ -9733,7 +9255,7 @@
         "metro-symbolicate": "src/index.js"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-symbolicate/node_modules/source-map": {
@@ -9746,9 +9268,9 @@
       }
     },
     "node_modules/metro-transform-plugins": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.82.4.tgz",
-      "integrity": "sha512-NoWQRPHupVpnDgYguiEcm7YwDhnqW02iWWQjO2O8NsNP09rEMSq99nPjARWfukN7+KDh6YjLvTIN20mj3dk9kw==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.83.1.tgz",
+      "integrity": "sha512-1Y+I8oozXwhuS0qwC+ezaHXBf0jXW4oeYn4X39XWbZt9X2HfjodqY9bH9r6RUTsoiK7S4j8Ni2C91bUC+sktJQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
@@ -9759,13 +9281,13 @@
         "nullthrows": "^1.1.1"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro-transform-worker": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.82.4.tgz",
-      "integrity": "sha512-kPI7Ad/tdAnI9PY4T+2H0cdgGeSWWdiPRKuytI806UcN4VhFL6OmYa19/4abYVYF+Cd2jo57CDuwbaxRfmXDhw==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.83.1.tgz",
+      "integrity": "sha512-owCrhPyUxdLgXEEEAL2b14GWTPZ2zYuab1VQXcfEy0sJE71iciD7fuMcrngoufh7e7UHDZ56q4ktXg8wgiYA1Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.25.2",
@@ -9773,17 +9295,17 @@
         "@babel/parser": "^7.25.3",
         "@babel/types": "^7.25.2",
         "flow-enums-runtime": "^0.0.6",
-        "metro": "0.82.4",
-        "metro-babel-transformer": "0.82.4",
-        "metro-cache": "0.82.4",
-        "metro-cache-key": "0.82.4",
-        "metro-minify-terser": "0.82.4",
-        "metro-source-map": "0.82.4",
-        "metro-transform-plugins": "0.82.4",
+        "metro": "0.83.1",
+        "metro-babel-transformer": "0.83.1",
+        "metro-cache": "0.83.1",
+        "metro-cache-key": "0.83.1",
+        "metro-minify-terser": "0.83.1",
+        "metro-source-map": "0.83.1",
+        "metro-transform-plugins": "0.83.1",
         "nullthrows": "^1.1.1"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/metro/node_modules/ci-info": {
@@ -9950,6 +9472,27 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -10005,15 +9548,15 @@
       "license": "MIT"
     },
     "node_modules/ob1": {
-      "version": "0.82.4",
-      "resolved": "https://registry.npmjs.org/ob1/-/ob1-0.82.4.tgz",
-      "integrity": "sha512-n9S8e4l5TvkrequEAMDidl4yXesruWTNTzVkeaHSGywoTOIwTzZzKw7Z670H3eaXDZui5MJXjWGNzYowVZIxCA==",
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/ob1/-/ob1-0.83.1.tgz",
+      "integrity": "sha512-ngwqewtdUzFyycomdbdIhFLjePPSOt1awKMUXQ0L7iLHgWEPF3DsCerblzjzfAUHaXuvE9ccJymWQ/4PNNqvnQ==",
       "license": "MIT",
       "dependencies": {
         "flow-enums-runtime": "^0.0.6"
       },
       "engines": {
-        "node": ">=18.18"
+        "node": ">=20.19.4"
       }
     },
     "node_modules/object-assign": {
@@ -10371,7 +9914,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/path-type": {
@@ -10530,46 +10073,29 @@
       }
     },
     "node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "devOptional": true,
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/pretty-format/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "devOptional": true,
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "license": "MIT",
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/pretty-format/node_modules/@types/yargs": {
-      "version": "15.0.19",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.19.tgz",
-      "integrity": "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/yargs-parser": "*"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/promise": {
@@ -10722,9 +10248,9 @@
       }
     },
     "node_modules/react-devtools-core": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-6.1.1.tgz",
-      "integrity": "sha512-TFo1MEnkqE6hzAbaztnyR5uLTMoz6wnEWwWBsCUzNt+sVXJycuRJdDqvL078M4/h65BI/YO5XWTaxZDWVsW0fw==",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-6.1.5.tgz",
+      "integrity": "sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA==",
       "license": "MIT",
       "dependencies": {
         "shell-quote": "^1.6.1",
@@ -10753,45 +10279,43 @@
       }
     },
     "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "devOptional": true,
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
     "node_modules/react-native": {
-      "version": "0.80.1",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.80.1.tgz",
-      "integrity": "sha512-cIiJiPItdC2+Z9n30FmE2ef1y4522kgmOjMIoDtlD16jrOMNTUdB2u+CylLTy3REkWkWTS6w8Ub7skUthkeo5w==",
+      "version": "0.81.4",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.4.tgz",
+      "integrity": "sha512-bt5bz3A/+Cv46KcjV0VQa+fo7MKxs17RCcpzjftINlen4ZDUl0I6Ut+brQ2FToa5oD0IB0xvQHfmsg2EDqsZdQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/create-cache-key-function": "^29.7.0",
-        "@react-native/assets-registry": "0.80.1",
-        "@react-native/codegen": "0.80.1",
-        "@react-native/community-cli-plugin": "0.80.1",
-        "@react-native/gradle-plugin": "0.80.1",
-        "@react-native/js-polyfills": "0.80.1",
-        "@react-native/normalize-colors": "0.80.1",
-        "@react-native/virtualized-lists": "0.80.1",
+        "@react-native/assets-registry": "0.81.4",
+        "@react-native/codegen": "0.81.4",
+        "@react-native/community-cli-plugin": "0.81.4",
+        "@react-native/gradle-plugin": "0.81.4",
+        "@react-native/js-polyfills": "0.81.4",
+        "@react-native/normalize-colors": "0.81.4",
+        "@react-native/virtualized-lists": "0.81.4",
         "abort-controller": "^3.0.0",
         "anser": "^1.4.9",
         "ansi-regex": "^5.0.0",
         "babel-jest": "^29.7.0",
-        "babel-plugin-syntax-hermes-parser": "0.28.1",
+        "babel-plugin-syntax-hermes-parser": "0.29.1",
         "base64-js": "^1.5.1",
-        "chalk": "^4.0.0",
         "commander": "^12.0.0",
         "flow-enums-runtime": "^0.0.6",
         "glob": "^7.1.1",
         "invariant": "^2.2.4",
         "jest-environment-node": "^29.7.0",
         "memoize-one": "^5.0.0",
-        "metro-runtime": "^0.82.2",
-        "metro-source-map": "^0.82.2",
+        "metro-runtime": "^0.83.1",
+        "metro-source-map": "^0.83.1",
         "nullthrows": "^1.1.1",
         "pretty-format": "^29.7.0",
         "promise": "^8.3.0",
-        "react-devtools-core": "^6.1.1",
+        "react-devtools-core": "^6.1.5",
         "react-refresh": "^0.14.0",
         "regenerator-runtime": "^0.13.2",
         "scheduler": "0.26.0",
@@ -10805,7 +10329,7 @@
         "react-native": "cli.js"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">= 20.19.4"
       },
       "peerDependencies": {
         "@types/react": "^19.1.0",
@@ -10818,9 +10342,9 @@
       }
     },
     "node_modules/react-native-gesture-handler": {
-      "version": "2.27.2",
-      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.27.2.tgz",
-      "integrity": "sha512-+kNaY2m7uQu5+5ls8os6z92DTk9expsEAYsaPv30n08mrqX2r64G8iVGDwNWzZcId54+P7RlDnhyszTql0sQ0w==",
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.28.0.tgz",
+      "integrity": "sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==",
       "license": "MIT",
       "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
@@ -10843,9 +10367,9 @@
       }
     },
     "node_modules/react-native-reanimated": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.0.0.tgz",
-      "integrity": "sha512-gcLvbfJBQSmSHnPjlURWN/EJjWDhVpWqe+ilshcEmK/gS46AY42oVGYA0FFoLBiQj2BH+I24Tox/7GrBCBFbwg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.0.tgz",
+      "integrity": "sha512-L8FqZn8VjZyBaCUMYFyx1Y+T+ZTbblaudpxReOXJ66RnOf52g6UM4Pa/IjwLD1XAw1FUxLRQrtpdjbkEc74FiQ==",
       "license": "MIT",
       "dependencies": {
         "react-native-is-edge-to-edge": "^1.2.1",
@@ -10855,7 +10379,7 @@
         "@babel/core": "^7.0.0-0",
         "react": "*",
         "react-native": "*",
-        "react-native-worklets": ">=0.3.0"
+        "react-native-worklets": ">=0.5.0"
       }
     },
     "node_modules/react-native-reanimated/node_modules/semver": {
@@ -10871,9 +10395,9 @@
       }
     },
     "node_modules/react-native-worklets": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.4.0.tgz",
-      "integrity": "sha512-q4AKd9RH6JSX17dSbXw1ppr7WbGYleQT2GqlpE9LLKLRAi2UeSHD3Q3br4MBGobQfQDyfDyfkiO5DvhXSa/8Xg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.5.1.tgz",
+      "integrity": "sha512-lJG6Uk9YuojjEX/tQrCbcbmpdLCSFxDK1rJlkDhgqkVi1KZzG7cdcBFQRqyNOOzR9Y0CXNuldmtWTGOyM0k0+w==",
       "license": "MIT",
       "dependencies": {
         "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
@@ -10885,7 +10409,8 @@
         "@babel/plugin-transform-template-literals": "^7.0.0-0",
         "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
         "@babel/preset-typescript": "^7.16.7",
-        "convert-source-map": "^2.0.0"
+        "convert-source-map": "^2.0.0",
+        "semver": "7.7.2"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0",
@@ -10893,16 +10418,16 @@
         "react-native": "*"
       }
     },
-    "node_modules/react-native/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "license": "MIT",
+    "node_modules/react-native-worklets/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/react-native/node_modules/commander": {
@@ -10914,26 +10439,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/react-native/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/react-native/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
-    },
     "node_modules/react-native/node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -11048,7 +10553,7 @@
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
       "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
@@ -11142,7 +10647,7 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -11544,9 +11049,9 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
-      "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -12027,6 +11532,14 @@
       ],
       "license": "MIT"
     },
+    "node_modules/sudo-prompt": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-9.2.1.tgz",
+      "integrity": "sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12043,7 +11556,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -12070,13 +11583,13 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.42.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.42.0.tgz",
-      "integrity": "sha512-UYCvU9YQW2f/Vwl+P0GfhxJxbUGLwd+5QrrGgLajzWAtC/23AX0vcise32kkP7Eu0Wu9VlzzHAXkLObgjQfFlQ==",
+      "version": "5.44.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz",
+      "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -12179,6 +11692,13 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
@@ -12350,9 +11870,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -12360,7 +11880,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=12.20"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
@@ -12553,12 +12073,30 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/whatwg-fetch": {
       "version": "3.6.20",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
       "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
       "license": "MIT"
     },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -12754,9 +12292,9 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
diff --git a/ExampleLatest/package.json b/ExampleLatest/package.json
index 033bc57..35b8261 100755
--- a/ExampleLatest/package.json
+++ b/ExampleLatest/package.json
@@ -11,22 +11,22 @@
   },
   "dependencies": {
     "react": "19.1.0",
-    "react-native": "0.80.1",
-    "react-native-gesture-handler": "^2.27.2",
-    "react-native-reanimated": "^4.0.0",
-    "react-native-worklets": "^0.4.0"
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^4.1.0",
+    "react-native-worklets": "^0.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "19.1.0",
-    "@react-native-community/cli-platform-android": "19.0.0",
-    "@react-native-community/cli-platform-ios": "19.0.0",
-    "@react-native/babel-preset": "0.80.1",
-    "@react-native/eslint-config": "0.80.1",
-    "@react-native/metro-config": "0.80.1",
-    "@react-native/typescript-config": "0.80.1",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "12.0.0",
+    "@react-native-community/cli-platform-ios": "12.0.0",
+    "@react-native/babel-preset": "0.81.4",
+    "@react-native/eslint-config": "0.81.4",
+    "@react-native/metro-config": "0.81.4",
+    "@react-native/typescript-config": "0.81.4",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.1.0",
     "@types/react-test-renderer": "^19.1.0",
@@ -36,7 +36,7 @@
     "jest": "^29.6.3",
     "prettier": "3.5.3",
     "react-test-renderer": "19.1.0",
-    "typescript": "5.0.4"
+    "typescript": "5.8.3"
   },
   "codegenConfig": {
     "name": "NativeSplashScreenSpec",
@@ -52,6 +52,6 @@
     }
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }
diff --git a/ExampleLatest/tsconfig.json b/ExampleLatest/tsconfig.json
index 9eaa362..1af0bc1 100755
--- a/ExampleLatest/tsconfig.json
+++ b/ExampleLatest/tsconfig.json
@@ -1,10 +1,12 @@
 {
   "extends": "@react-native/typescript-config",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"],
   "compilerOptions": {
     "paths": {
       "baseUrl": ["."],
-      "reanimated-color-picker": ["../src/index"]
-    }
+      "reanimated-color-picker": ["../src/index"],
+    },
   },
-  "references": [{ "path": "../tsconfig.json" }]
+  "references": [{ "path": "../tsconfig.json" }],
 }

From b8ada302f908d7d91b1fa9d0adc43661563829e3 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 11 Sep 2025 13:09:40 +0300
Subject: [PATCH 7/9] fix: update react-native-reanimated version constraints
 in package.json and package-lock.json

---
 package-lock.json | 64 +++++++++++++++++++++++++++++++++++++++--------
 package.json      |  2 +-
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ebcf1d..33111ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "react": "*",
         "react-native": "*",
         "react-native-gesture-handler": ">=2.0.0",
-        "react-native-reanimated": "^2.0.0 || ^3.0.0"
+        "react-native-reanimated": ">=2.0.0"
       },
       "peerDependenciesMeta": {
         "expo": {
@@ -11390,20 +11390,50 @@
       }
     },
     "node_modules/react-native-is-edge-to-edge": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.1.6.tgz",
-      "integrity": "sha512-1pHnFTlBahins6UAajXUqeCOHew9l9C2C8tErnpGC3IyLJzvxD+TpYAixnCbrVS52f7+NvMttbiSI290XfwN0w==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",
+      "integrity": "sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q==",
       "license": "MIT",
       "peer": true,
       "peerDependencies": {
-        "react": ">=18.2.0",
-        "react-native": ">=0.73.0"
+        "react": "*",
+        "react-native": "*"
       }
     },
     "node_modules/react-native-reanimated": {
-      "version": "3.17.2",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.17.2.tgz",
-      "integrity": "sha512-8z4o8/qZRM02oI3qzVh48417/AXDx+aKl95X8qn+vqQx+s7Z1sGI8GPah645vYDB/DrPDRkoJOp0tAhrJdXs9w==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.0.tgz",
+      "integrity": "sha512-L8FqZn8VjZyBaCUMYFyx1Y+T+ZTbblaudpxReOXJ66RnOf52g6UM4Pa/IjwLD1XAw1FUxLRQrtpdjbkEc74FiQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "react-native-is-edge-to-edge": "^1.2.1",
+        "semver": "7.7.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-worklets": ">=0.5.0"
+      }
+    },
+    "node_modules/react-native-reanimated/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-worklets": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.5.1.tgz",
+      "integrity": "sha512-lJG6Uk9YuojjEX/tQrCbcbmpdLCSFxDK1rJlkDhgqkVi1KZzG7cdcBFQRqyNOOzR9Y0CXNuldmtWTGOyM0k0+w==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -11417,8 +11447,7 @@
         "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
         "@babel/preset-typescript": "^7.16.7",
         "convert-source-map": "^2.0.0",
-        "invariant": "^2.2.4",
-        "react-native-is-edge-to-edge": "1.1.6"
+        "semver": "7.7.2"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0",
@@ -11426,6 +11455,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-worklets/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index decc784..62f6916 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": "^2.0.0 || ^3.0.0"
+    "react-native-reanimated": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "expo": {

From c6f3c94fe49477fe1025cc1f822fcc4d8642c0f5 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 11 Sep 2025 13:09:55 +0300
Subject: [PATCH 8/9] fix: update AnimatedStyleProp to AnimatedStyle in
 types.ts

---
 src/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types.ts b/src/types.ts
index 473233c..5981400 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ImageStyle, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
-import type { AnimatedStyleProp, SharedValue } from 'react-native-reanimated';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 import type { SupportedColorFormats } from './colorKit/types';
 import type { Gesture } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture';
 
@@ -157,7 +157,7 @@ export type BuiltinThumbsProps = {
   handleStyle: StyleProp<ViewStyle>;
   innerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
-  solidColor: AnimatedStyleProp<ViewStyle>;
+  solidColor: AnimatedStyle<ViewStyle>;
   renderThumb?: RenderThumbType;
   vertical?: boolean;
 };

From 62458706a9d689fc756361ae0739019a5c80e0d0 Mon Sep 17 00:00:00 2001
From: alabsi91 <alabsi91@gmail.com>
Date: Thu, 11 Sep 2025 13:10:29 +0300
Subject: [PATCH 9/9] fix: bump version to 4.1.1 in package.json and
 package-lock.json

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 33111ff..bd738da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reanimated-color-picker",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reanimated-color-picker",
-      "version": "4.1.0",
+      "version": "4.1.1",
       "license": "MIT",
       "devDependencies": {
         "@babel/cli": "^7.23.4",
diff --git a/package.json b/package.json
index 62f6916..a11841c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reanimated-color-picker",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "A Pure JavaScript Color Picker for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",